WPF模板

这是最具创造力的一节了，因为WPF中模板的功能非常强大。

在WPF中，通过引入模板（Template）微软将数据和算法的“内容”与“形式”解耦了。WPF中的Template分为两大类：

• ControlTemplate 是算法内容的表现形式，它决定了控件“长成什么样子”。
• DataTemplate 是数据内容的表型形式，一条数据显示成什么样子。

总而言之，ControlTemplate是控件的外衣，DataTemplate是数据的外衣。

DateTemplate常用的地方有3处

• ContentControl的ContentTemplate属性，相当于给ContentControl的内容穿衣服。
• ItemsControl的ItemTemplate属性，相当于给ItemsControl的数据条目穿衣服。
• GridViewColumn的CellTemplate属性，相当于给GridViewColumn的单元格里的数据穿衣服。

请看例子

<Window x:Class="DataTemplateSample.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:local="clr-namespace:DataTemplateSample"

        Title="MainWindow" Height="350" Width="525">

    <Window.Resources>

        <local:AutomakerToLogoPathConveret x:Key="a2l"></local:AutomakerToLogoPathConveret>

        <local:NameToPhotoPathConverter x:Key="n2p"></local:NameToPhotoPathConverter>

        <DataTemplate x:Key="carDetailViewTemplate">

            <Border BorderBrush="Black" BorderThickness="1" CornerRadius="6">

                <StackPanel Margin="5">

                    <Image Width="400" Height="250" Source="{Binding Name,Converter={StaticResource n2p}}"></Image>

                    <StackPanel Orientation="Horizontal" Margin="5,0">

                        <TextBlock Text="Name:" FontWeight="Bold" FontSize="20"/>

                        <TextBlock Text="{Binding Name}" FontSize="20" Margin="5,0"/>

                    </StackPanel>

                    <StackPanel Orientation="Horizontal" Margin="5,0">

                        <TextBlock Text="Automaker:" FontWeight="Bold"/>

                        <TextBlock Text="{Binding Automaker}" Margin="5,0"/>

                        <TextBlock Text="Year:" FontWeight="Bold" Margin="5,0"/>

                        <TextBlock Text="{Binding Year}" Margin="5,0"/>

                        <TextBlock Text="Top Speed:" FontWeight="Bold"/>

                        <TextBlock Text="{Binding TopSpeed}" Margin="5,0"/>

                    </StackPanel>

                </StackPanel>

            </Border>

        </DataTemplate>

        <DataTemplate x:Key="carListItemViewTemplate">

            <Grid Margin="2">

                <StackPanel Orientation="Horizontal">

                    <Image Grid.RowSpan="3" Width="64" Height="64" Source="{Binding Automaker,Converter={StaticResource a2l}}"/>

                    <StackPanel Margin="5,10">

                        <TextBlock Text="{Binding Name}" FontSize="16" FontWeight="Bold"/>

                        <TextBlock Text="{Binding Year}" FontSize="14"/>

                    </StackPanel>

                </StackPanel>

            </Grid>

        </DataTemplate>

    </Window.Resources>

    <StackPanel Orientation="Horizontal" Margin="5">

        <UserControl ContentTemplate="{StaticResource carDetailViewTemplate}" Content="{Binding SelectedItem,ElementName=listBoxCars}"/>

        <ListBox x:Name="listBoxCars" Width="180" Margin="5,0" ItemTemplate="{StaticResource carListItemViewTemplate}" SelectionChanged="listBoxCars_SelectionChanged"/>

    </StackPanel>

</Window>

Car.cs

class Car

    {

        public string Automaker { get; set; }

        public string Name { get; set; }

        public string Year { get; set; }

        public string TopSpeed { get; set; }

    }

转换器

public class AutomakerToLogoPathConveret:IValueConverter

    {



        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

        {

            string uriStr = string.Format(@"Resources/Logos/{0}.jpg",(string)value);

            return new BitmapImage(new Uri(uriStr,UriKind.Relative));

        }



        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

        {

            throw new NotImplementedException();

        }

    }



    public class NameToPhotoPathConverter:IValueConverter

    {



        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

        {

            string uriStr = string.Format(@"Resources/Images/{0}.jpg", (string)value);

            return new BitmapImage(new Uri(uriStr, UriKind.Relative));

        }



        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

        {

            throw new NotImplementedException();

        }

    }

使用DataTemplate完成了数据驱动UI的任务。

在实际项目中，ControlTemplate主要有两大用武之地：

• 通过更换ControlTemplate，获得更好的用户体验
• 借助ControlTemplate可以使程序员和设计师并行工作

如何设计ControlTemplate呢？首先必须知道每个控件的ControlTemplate，怎么看呢，用Blend4打碎它吧。

俗话说得好，挑柿子得找软的捏，剖析控件也从简单的开始。TextBox和Button最简单。

 

这是TextBox打碎后的结构。对TextBox点击右键-》编辑模板-》编辑副本

可以看到代码如下

<Window.Resources>

        <Style x:Key="MyTextBox" BasedOn="{x:Null}" TargetType="{x:Type TextBox}">

            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>

            <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>

            <Setter Property="BorderBrush" Value="{StaticResource TextBoxBorder}"/>

            <Setter Property="BorderThickness" Value="1"/>

            <Setter Property="Padding" Value="1"/>

            <Setter Property="AllowDrop" Value="true"/>

            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>

            <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>

            <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="{x:Type TextBox}">

                        <Microsoft_Windows_Themes:ListBoxChrome x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderFocused="{TemplateBinding IsKeyboardFocusWithin}" SnapsToDevicePixels="true">

                            <ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>

                        </Microsoft_Windows_Themes:ListBoxChrome>

                        <ControlTemplate.Triggers>

                            <Trigger Property="IsEnabled" Value="false">

                                <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>

                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>

                            </Trigger>

                        </ControlTemplate.Triggers>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

    </Window.Resources>

作为资源的不是单纯的ControlTemplate而是Style，就是说编辑ControlTemplate但实际上市把ControlTemplate包含在Style里，不知道微软以后会不会更正这个小麻烦。

TemplateBinding，ControlTemplate最终将被运用到一个控件上，我们称这个控件为模板目标或模板化控件。ControlTemplate里的控件可以使用TemplateBinding将自己的属性值关联在目标控件的某个属性值上，必要的时候还可添加Converter。

由ControlTemplate或DataTemplate生成的控件都是“由Template生成的控件”。ControlTemplate和DataTemplate都派生自FrameworkTemplate类，这个类有个名为FindName的方法供我们检索其内部控件，也就是说，只要我们能拿到Template，找到其内部控件就不成问题 。