WPF不仅支持传统的Windows Forms编程的用户界面和用户体验设计，同时还推出了以模板为核心的新一代设计理念。在WPF中，通过引入模板，将数据和算法的“内容”和“形式”进行解耦。模板主要分为两大类：数据模板【Data Template】和控件模板【Control Template】。
基本上，ControlTemplate描述如何显示控件，而DataTemplate描述如何显示数据。
控件模板 Control Template
控件模板让我们可以定义控件的外观，改变控件的展现形式，通过Control Template实现。
1. 编辑默认模板
选中控件--右键--编辑模板--编辑副本，打开创建Style资源对话框，如下所示：
创建Style资源，输入资源名称，定义位置，默认为此文档【Window】，然后点击【确定】，创建资源。如下所示：
创建控件元素的默认资源，如下所示：
<Windowx:Class="WpfApp2.TwoWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:WpfApp2"mc:Ignorable="d"Title="TwoWindow"Height="350"Width="800"><Window.Resources><Stylex:Key="FocusVisual"><SetterProperty="Control.Template"><Setter.Value><ControlTemplate><RectangleMargin="2"SnapsToDevicePixels="true"Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"StrokeThickness="1"StrokeDashArray="1 2"/></ControlTemplate></Setter.Value></Setter></Style><SolidColorBrushx:Key="Button.Static.Background"Color="#FFDDDDDD"/><SolidColorBrushx:Key="Button.Static.Border"Color="#FF707070"/><SolidColorBrushx:Key="Button.MouseOver.Background"Color="#FFBEE6FD"/><SolidColorBrushx:Key="Button.MouseOver.Border"Color="#FF3C7FB1"/><SolidColorBrushx:Key="Button.Pressed.Background"Color="#FFC4E5F6"/><SolidColorBrushx:Key="Button.Pressed.Border"Color="#FF2C628B"/><SolidColorBrushx:Key="Button.Disabled.Background"Color="#FFF4F4F4"/><SolidColorBrushx:Key="Button.Disabled.Border"Color="#FFADB2B5"/><SolidColorBrushx:Key="Button.Disabled.Foreground"Color="#FF838383"/><Stylex:Key="OneButtonStyle"TargetType="{x:Type Button}"><SetterProperty="FocusVisualStyle"Value="{StaticResource FocusVisual}"/><SetterProperty="Background"Value="{StaticResource Button.Static.Background}"/><SetterProperty="BorderBrush"Value="{StaticResource Button.Static.Border}"/><SetterProperty="Foreground"Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/><SetterProperty="BorderThickness"Value="1"/><SetterProperty="HorizontalContentAlignment"Value="Center"/><SetterProperty="VerticalContentAlignment"Value="Center"/><SetterProperty="Padding"Value="1"/><SetterProperty="Template"><Setter.Value><ControlTemplateTargetType="{x:Type Button}"><Borderx:Name="border"BorderBrush="{TemplateBinding BorderBrush}"BorderThickness="{TemplateBinding BorderThickness}"Background="{TemplateBinding Background}"SnapsToDevicePixels="true"><ContentPresenterx:Name="contentPresenter"Focusable="False"HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"Margin="{TemplateBinding Padding}"RecognizesAccessKey="True"SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/></Border><ControlTemplate.Triggers><TriggerProperty="IsDefaulted"Value="true"><SetterProperty="BorderBrush"TargetName="border"Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/></Trigger><TriggerProperty="IsMouseOver"Value="true"><SetterProperty="Background"TargetName="border"Value="{StaticResource Button.MouseOver.Background}"/><SetterProperty="BorderBrush"TargetName="border"Value="{StaticResource Button.MouseOver.Border}"/></Trigger><TriggerProperty="IsPressed"Value="true"><SetterProperty="Background"TargetName="border"Value="{StaticResource Button.Pressed.Background}"/><SetterProperty="BorderBrush"TargetName="border"Value="{StaticResource Button.Pressed.Border}"/></Trigger><TriggerProperty="IsEnabled"Value="false"><SetterProperty="Background"TargetName="border"Value="{StaticResource Button.Disabled.Background}"/><SetterProperty="BorderBrush"TargetName="border"Value="{StaticResource Button.Disabled.Border}"/><SetterProperty="TextElement.Foreground"TargetName="contentPresenter"Value="{StaticResource Button.Disabled.Foreground}"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style></Window.Resources><Grid><Buttonx:Name="one"Content="Hello wpf"Margin="5"Width="100"Height="30"Style="{DynamicResource OneButtonStyle}"></Button></Grid></Window>
编辑默认模板，也可以通过【文档大纲】右键--编辑模板--编辑副本，然后打开创建资源对话框，进行操作，如下所示：
2. 修改默认样式
通过默认创建的控件模板Style，可以修改和重定义控件的显示内容，如：设置按钮显示圆角，和鼠标放上去为红色。
要实现以上功能，只需要修改两个地方即可，如下所示：
3. 自定义控件模板
通过自定义模板，同样能达到修改控件样式的效果。
控件模板也是资源的一种，每一个控件模板都有一个唯一的key，在控件上通过Template进行绑定，如下所示：
<Windowx:Class="WpfApp2.ThreeWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:WpfApp2"mc:Ignorable="d"Title="自定义控件模板示例"Height="150"Width="300"><Window.Resources><ControlTemplatex:Key="oneStyle"TargetType="Button"><BorderBackground="LightBlue"CornerRadius="5"x:Name="border"><StackPanelOrientation="Horizontal"HorizontalAlignment="{TemplateBinding HorizontalAlignment}"><TextBlockVerticalAlignment="{TemplateBinding VerticalAlignment}">》》</TextBlock><ContentPresenterHorizontalAlignment="{TemplateBinding HorizontalAlignment}"VerticalAlignment="{TemplateBinding VerticalAlignment}"></ContentPresenter></StackPanel></Border><ControlTemplate.Triggers><TriggerProperty="IsMouseOver"Value="true"><SetterProperty="Background"TargetName="border"Value="Red"/><SetterProperty="BorderBrush"TargetName="border"Value="Blue"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Window.Resources><Grid><Buttonx:Name="one"Content="Hello wpf"Margin="5"Width="100"Height="30"VerticalAlignment="Center"HorizontalAlignment="Center"Template="{StaticResource oneStyle}"></Button></Grid></Window>
自定义控件模板，示例如下：
数据模板 DataTemplate
控件模板决定了数据的展示形式和用户体检，在软件UI设计中非常重要。同样数据的展示形式越来越多样化，正所谓：横看成岭侧成峰，远近高低各不同。同样的数据内容，在DataGrid中的展示是文本的列表形式，在ComboBox中是下拉框的形式。给数据披上外衣，将数据和形式解耦，是一种新的发展趋势。
1. DataGrid
a. 数据模板
DataGrid是可以自定义网格数据显示的控件，通过自定义显示的列模板，可以实现各式各样的展现方式。列定义如下：
- DataGrid的列定义，通过Binding="{Binding Name}"的方式绑定属性，通过ElementStyle="{StaticResource one_center}"的方式绑定样式。
- DataGrid预制了几种列展示数据的方式，如：DataGridTextColumn【文本】，DataGridCheckBoxColumn【复选框】，DataGridComboBoxColumn【下拉框】，DataGridHyperlinkColumn【链接】等，如果使用数据模板，则采用DataGridTemplateColumn进行定义。
UI示例如下所示：
<Windowx:Class="WpfApp2.A1Window"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:WpfApp2"mc:Ignorable="d"Title="数据模板示例"Height="450"Width="650"><Window.Resources><Stylex:Key="one_center"TargetType="TextBlock"><SetterProperty="VerticalAlignment"Value="Center"></Setter><SetterProperty="HorizontalAlignment"Value="Center"></Setter></Style><Stylex:Key="one_header"TargetType="DataGridColumnHeader"><SetterProperty="VerticalAlignment"Value="Center"></Setter><SetterProperty="HorizontalAlignment"Value="Center"></Setter><SetterProperty="HorizontalContentAlignment"Value="Center"></Setter><SetterProperty="BorderThickness"Value="0"></Setter></Style></Window.Resources><Grid><DataGridx:Name="one"Margin="10"AutoGenerateColumns="False"CanUserAddRows="False"CanUserSortColumns="False"BorderThickness="0"><DataGrid.Columns><DataGridTextColumnHeader="姓名"Binding="{Binding Name}"Width="*"ElementStyle="{StaticResource one_center}"HeaderStyle="{StaticResource one_header}"/><DataGridTextColumnHeader="年龄"Binding="{Binding Age}"Width="*"ElementStyle="{StaticResource one_center}"HeaderStyle="{StaticResource one_header}"/><DataGridTextColumnHeader="性别"Binding="{Binding Sex}"Width="*"ElementStyle="{StaticResource one_center}"HeaderStyle="{StaticResource one_header}"/><DataGridTextColumnHeader="班级"Binding="{Binding Classes}"Width="*"ElementStyle="{StaticResource one_center}"HeaderStyle="{StaticResource one_header}"/><DataGridTemplateColumnHeader="操作"Width="*"HeaderStyle="{StaticResource one_header}"><DataGridTemplateColumn.CellTemplate><DataTemplate><StackPanelOrientation="Horizontal"VerticalAlignment="Center"HorizontalAlignment="Center"><Buttonx:Name="edit"Content="编辑"Width="60"Margin="3"Height="25"></Button><Buttonx:Name="delete"Content="删除"Width="60"Margin="3"Height="25"></Button></StackPanel></DataTemplate></DataGridTemplateColumn.CellTemplate></DataGridTemplateColumn></DataGrid.Columns></DataGrid></Grid></Window>
b. 后台数据绑定
后台数据绑定通过ItemsSource进行赋值，绑定的数据的属性名，要和DataGrid的列绑定数据的名称保持一致，如下所示：
namespaceWpfApp2{ /// <summary>/// A1Window.xaml 的交互逻辑/// </summary>publicpartialclassA1Window : Window { publicA1Window() { InitializeComponent(); List<Student>lst=newList<Student>(); lst.Add(newStudent() { Name="张三", Age=22, Sex="男", Classes="一班" }); lst.Add(newStudent() { Name="李四", Age=21, Sex="男", Classes="二班" }); lst.Add(newStudent() { Name="王五", Age=20, Sex="女", Classes="一班" }); lst.Add(newStudent() { Name="刘大", Age=19, Sex="男", Classes="三班" }); lst.Add(newStudent() { Name="麻子", Age=18, Sex="男", Classes="四班" }); one.ItemsSource=lst; } } publicclassStudent { publicstringName { get; set; } publicintAge { get; set; } publicstringSex { get; set; } publicstringClasses { get; set; } } }
DataGrid示例，如下所示：
2. ListBox和ComboBox
a. 数据模板
ListBox，ComboBox，均是包含可选择的项的列表，只是ListBox不需要下拉显示，ComboBox需要下拉显示。通过定义数据模板，可以丰富数据的展示形式。
通过ItemTemplate="{StaticResource item_template}"的形式，进行数据模板的绑定。如下所示：
<Windowx:Class="WpfApp2.A2Window"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:WpfApp2"mc:Ignorable="d"Title="数据模板示例"Height="450"Width="800"><Window.Resources><DataTemplatex:Key="item_template"><StackPanelOrientation="Horizontal"Margin="5 ,0"><BorderWidth="10"Height="10"Background="{Binding Code}"></Border><TextBlockText="{Binding Code}"Margin="5,0"></TextBlock></StackPanel></DataTemplate></Window.Resources><Grid><StackPanelMargin="3"Orientation="Horizontal"HorizontalAlignment="Center"VerticalAlignment="Center"><ComboBoxx:Name="one"Height="25"Width="120"Margin="5"ItemTemplate="{StaticResource item_template}"></ComboBox><ListBoxx:Name="two"Width="120"Margin="5"ItemTemplate="{StaticResource item_template}"></ListBox></StackPanel></Grid></Window>
b. 后台数据绑定
与DataGrid一样，后台通过ItemsSource进行数据的绑定。如下所示：
namespaceWpfApp2{ /// <summary>/// A2Window.xaml 的交互逻辑/// </summary>publicpartialclassA2Window : Window { publicA2Window() { InitializeComponent(); List<Color>lst=newList<Color>(); lst.Add(newColor() { Code="#FE8C00" }); lst.Add(newColor() { Code="#1F7F50" }); lst.Add(newColor() { Code="#AA8C00" }); lst.Add(newColor() { Code="#FEAA00" }); lst.Add(newColor() { Code="#008CAA" }); lst.Add(newColor() { Code="#FEBB00" }); one.ItemsSource=lst; two.ItemsSource=lst; } } publicclassColor { publicstringCode { get; set; } } }
示例截图，如下所示：
3. ItemsControl
a. 数据模板
ItemsControl，主要用于展示集合数据的项，也是列表控件的一种。ItemsControl 需要设置两个内容：
- ItemsControl.ItemsPanel，做为数据展示的容器。
- ItemsControl.ItemTemplate，用于单个数据的展示形式。
具体如下所示：
<Windowx:Class="WpfApp2.A3Window"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:WpfApp2"mc:Ignorable="d"Title="A3Window"Height="450"Width="800"><Grid><ItemsControlx:Name="one"><ItemsControl.ItemsPanel><ItemsPanelTemplate><WrapPanel></WrapPanel></ItemsPanelTemplate></ItemsControl.ItemsPanel><ItemsControl.ItemTemplate><DataTemplate><ButtonWidth="50"Height="50"Margin="5"Content="{Binding Code}"></Button></DataTemplate></ItemsControl.ItemTemplate></ItemsControl></Grid></Window>
b. 后台数据绑定
与DataGrid一样，后台通过ItemsSource进行数据的绑定。如下所示：
namespaceWpfApp2{ /// <summary>/// A3Window.xaml 的交互逻辑/// </summary>publicpartialclassA3Window : Window { publicA3Window() { InitializeComponent(); List<Test>lst=newList<Test>(); lst.Add(newTest() { Code="1" }); lst.Add(newTest() { Code="2" }); lst.Add(newTest() { Code="3" }); lst.Add(newTest() { Code="4" }); lst.Add(newTest() { Code="5" }); lst.Add(newTest() { Code="6" }); one.ItemsSource=lst; } } publicclassTest { publicstringCode { get; set; } } }
示例截图
控件模板和数据模板的应用场景还有很多，本文旨在抛砖引玉，一起学习，共同进步。
