WPF不僅支持傳統(tǒng)的Windows Forms編程的用戶界面和用戶體驗設(shè)計，同時還推出了以模板為核心的新一代設(shè)計理念。在WPF中，通過引入模板，將數(shù)據(jù)和算法的“內(nèi)容”和“形式”進(jìn)行解耦。模板主要分為兩大類：數(shù)據(jù)模板【Data Template】和控件模板【Control Template】。

基本上，ControlTemplate描述如何顯示控件，而DataTemplate描述如何顯示數(shù)據(jù)。

控件模板 Control Template

控件模板讓我們可以定義控件的外觀，改變控件的展現(xiàn)形式，通過Control Template實現(xiàn)。

1. 編輯默認(rèn)模板

選中控件--右鍵--編輯模板--編輯副本，打開創(chuàng)建Style資源對話框，如下所示：

創(chuàng)建Style資源，輸入資源名稱，定義位置，默認(rèn)為此文檔【W(wǎng)indow】，然后點擊【確定】，創(chuàng)建資源。如下所示：

創(chuàng)建控件元素的默認(rèn)資源，如下所示：

<Window x: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><Style x:Key="FocusVisual"><Setter Property="Control.Template"><Setter.Value><ControlTemplate><Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/></ControlTemplate></Setter.Value></Setter></Style><SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/><SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/><SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/><SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/><SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/><SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/><SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/><SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/><SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/><Style x:Key="OneButtonStyle" TargetType="{x:Type Button}"><Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/><Setter Property="Background" Value="{StaticResource Button.Static.Background}"/><Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/><Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/><Setter Property="BorderThickness" Value="1"/><Setter Property="HorizontalContentAlignment" Value="Center"/><Setter Property="VerticalContentAlignment" Value="Center"/><Setter Property="Padding" Value="1"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true"><ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/></Border><ControlTemplate.Triggers><Trigger Property="IsDefaulted" Value="true"><Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/></Trigger><Trigger Property="IsMouseOver" Value="true"><Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/><Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/></Trigger><Trigger Property="IsPressed" Value="true"><Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/><Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/></Trigger><Trigger Property="IsEnabled" Value="false"><Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/><Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/><Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style></Window.Resources><Grid><Button x:Name="one" Content="Hello wpf" Margin="5" Width="100" Height="30" Style="{DynamicResource OneButtonStyle}"></Button></Grid>
</Window>

編輯默認(rèn)模板，也可以通過【文檔大綱】右鍵--編輯模板--編輯副本，然后打開創(chuàng)建資源對話框，進(jìn)行操作，如下所示：

2. 修改默認(rèn)樣式

通過默認(rèn)創(chuàng)建的控件模板Style，可以修改和重定義控件的顯示內(nèi)容，如：設(shè)置按鈕顯示圓角，和鼠標(biāo)放上去為紅色。

?

要實現(xiàn)以上功能，只需要修改兩個地方即可，如下所示：

3. 自定義控件模板

通過自定義模板，同樣能達(dá)到修改控件樣式的效果。

控件模板也是資源的一種，每一個控件模板都有一個唯一的key，在控件上通過Template進(jìn)行綁定，如下所示：

<Window x: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><ControlTemplate x:Key="oneStyle" TargetType="Button"><Border Background="LightBlue" CornerRadius="5" x:Name="border"><StackPanel Orientation="Horizontal" HorizontalAlignment="{TemplateBinding HorizontalAlignment}"><TextBlock VerticalAlignment="{TemplateBinding VerticalAlignment}">》》</TextBlock><ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}"></ContentPresenter></StackPanel></Border><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="true"><Setter Property="Background" TargetName="border" Value="Red"/><Setter Property="BorderBrush" TargetName="border" Value="Blue"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Window.Resources><Grid><Button x:Name="one" Content="Hello wpf" Margin="5" Width="100" Height="30" VerticalAlignment="Center"  HorizontalAlignment="Center" Template="{StaticResource oneStyle}"></Button></Grid>
</Window>

自定義控件模板，示例如下：

數(shù)據(jù)模板 DataTemplate

控件模板決定了數(shù)據(jù)的展示形式和用戶體檢，在軟件UI設(shè)計中非常重要。同樣數(shù)據(jù)的展示形式越來越多樣化，正所謂：橫看成嶺側(cè)成峰，遠(yuǎn)近高低各不同。同樣的數(shù)據(jù)內(nèi)容，在DataGrid中的展示是文本的列表形式，在ComboBox中是下拉框的形式。給數(shù)據(jù)披上外衣，將數(shù)據(jù)和形式解耦，是一種新的發(fā)展趨勢。

1. DataGrid

1.?數(shù)據(jù)模板

DataGrid是可以自定義網(wǎng)格數(shù)據(jù)顯示的控件，通過自定義顯示的列模板，可以實現(xiàn)各式各樣的展現(xiàn)方式。列定義如下：

1. DataGrid的列定義，通過Binding="{Binding Name}"的方式綁定屬性，通過ElementStyle="{StaticResource one_center}"的方式綁定樣式。

2. DataGrid預(yù)制了幾種列展示數(shù)據(jù)的方式，如：DataGridTextColumn【文本】，DataGridCheckBoxColumn【復(fù)選框】，DataGridComboBoxColumn【下拉框】，DataGridHyperlinkColumn【鏈接】等，如果使用數(shù)據(jù)模板，則采用DataGridTemplateColumn進(jìn)行定義。

UI示例如下所示：

<Window x: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="數(shù)據(jù)模板示例" Height="450" Width="650"><Window.Resources><Style x:Key="one_center" TargetType="TextBlock"><Setter Property="VerticalAlignment" Value="Center"></Setter><Setter Property="HorizontalAlignment" Value="Center"></Setter></Style><Style x:Key="one_header" TargetType="DataGridColumnHeader"><Setter Property="VerticalAlignment" Value="Center"></Setter><Setter Property="HorizontalAlignment" Value="Center"></Setter><Setter Property="HorizontalContentAlignment" Value="Center"></Setter><Setter Property="BorderThickness" Value="0"></Setter></Style></Window.Resources><Grid><DataGrid x:Name="one"  Margin="10" AutoGenerateColumns="False"  CanUserAddRows="False"  CanUserSortColumns="False" BorderThickness="0" ><DataGrid.Columns><DataGridTextColumn Header="姓名" Binding="{Binding Name}" Width="*" ElementStyle="{StaticResource one_center}" HeaderStyle="{StaticResource one_header}"  /><DataGridTextColumn Header="年齡" Binding="{Binding Age}" Width="*" ElementStyle="{StaticResource one_center}" HeaderStyle="{StaticResource one_header}"/><DataGridTextColumn Header="性別" Binding="{Binding Sex}" Width="*" ElementStyle="{StaticResource one_center}" HeaderStyle="{StaticResource one_header}"/><DataGridTextColumn Header="班級" Binding="{Binding Classes}" Width="*" ElementStyle="{StaticResource one_center}" HeaderStyle="{StaticResource one_header}"/><DataGridTemplateColumn Header="操作" Width="*" HeaderStyle="{StaticResource one_header}"><DataGridTemplateColumn.CellTemplate><DataTemplate><StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center"><Button x:Name="edit" Content="編輯" Width="60" Margin="3" Height="25"></Button><Button x:Name="delete" Content="刪除" Width="60" Margin="3" Height="25"></Button></StackPanel></DataTemplate></DataGridTemplateColumn.CellTemplate></DataGridTemplateColumn></DataGrid.Columns></DataGrid></Grid>
</Window>

2.后臺數(shù)據(jù)綁定

后臺數(shù)據(jù)綁定通過ItemsSource進(jìn)行賦值，綁定的數(shù)據(jù)的屬性名，要和DataGrid的列綁定數(shù)據(jù)的名稱保持一致，如下所示：

namespace WpfApp2
{/// <summary>/// A1Window.xaml 的交互邏輯/// </summary>public partial class A1Window : Window{public A1Window(){InitializeComponent();List<Student> lst = new List<Student>();lst.Add(new Student() { Name = "張三", Age = 22, Sex = "男", Classes = "一班" });lst.Add(new Student() { Name = "李四", Age = 21, Sex = "男", Classes = "二班" });lst.Add(new Student() { Name = "王五", Age = 20, Sex = "女", Classes = "一班" });lst.Add(new Student() { Name = "劉大", Age = 19, Sex = "男", Classes = "三班" });lst.Add(new Student() { Name = "麻子", Age = 18, Sex = "男", Classes = "四班" });one.ItemsSource = lst;}}public class Student{public string Name { get; set; }public int Age { get; set; }public string Sex { get; set; }public string Classes { get; set; }}
}

DataGrid示例，如下所示：

2. ListBox和ComboBox

1.?數(shù)據(jù)模板

ListBox，ComboBox，均是包含可選擇的項的列表，只是ListBox不需要下拉顯示，ComboBox需要下拉顯示。通過定義數(shù)據(jù)模板，可以豐富數(shù)據(jù)的展示形式。

通過ItemTemplate="{StaticResource item_template}"的形式，進(jìn)行數(shù)據(jù)模板的綁定。如下所示：

<Window x: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="數(shù)據(jù)模板示例" Height="450" Width="800"><Window.Resources><DataTemplate x:Key="item_template"><StackPanel Orientation="Horizontal" Margin="5 ,0"><Border Width="10" Height="10" Background="{Binding Code}"></Border><TextBlock Text="{Binding Code}" Margin="5,0" ></TextBlock></StackPanel></DataTemplate></Window.Resources><Grid><StackPanel Margin="3" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center"><ComboBox x:Name="one" Height="25" Width="120" Margin="5" ItemTemplate="{StaticResource item_template}"></ComboBox><ListBox x:Name="two"  Width="120" Margin="5" ItemTemplate="{StaticResource item_template}"></ListBox></StackPanel></Grid>
</Window>

2.后臺數(shù)據(jù)綁定

與DataGrid一樣，后臺通過ItemsSource進(jìn)行數(shù)據(jù)的綁定。如下所示：

namespace WpfApp2
{/// <summary>/// A2Window.xaml 的交互邏輯/// </summary>public partial class A2Window : Window{public A2Window(){InitializeComponent();List<Color> lst = new List<Color>();lst.Add(new Color() { Code = "#FE8C00" });lst.Add(new Color() { Code = "#1F7F50" });lst.Add(new Color() { Code = "#AA8C00" });lst.Add(new Color() { Code = "#FEAA00" });lst.Add(new Color() { Code = "#008CAA" });lst.Add(new Color() { Code = "#FEBB00" });one.ItemsSource = lst;two.ItemsSource = lst;}}public class Color{public string Code { get; set; }}
}

示例截圖，如下所示：

3. ItemsControl

1.?數(shù)據(jù)模板

ItemsControl，主要用于展示集合數(shù)據(jù)的項，也是列表控件的一種。ItemsControl 需要設(shè)置兩個內(nèi)容：

• ItemsControl.ItemsPanel，做為數(shù)據(jù)展示的容器。

• ItemsControl.ItemTemplate，用于單個數(shù)據(jù)的展示形式。

具體如下所示：

<Window x: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><ItemsControl x:Name="one"><ItemsControl.ItemsPanel><ItemsPanelTemplate><WrapPanel></WrapPanel></ItemsPanelTemplate></ItemsControl.ItemsPanel><ItemsControl.ItemTemplate><DataTemplate><Button Width="50" Height="50" Margin="5" Content="{Binding Code}"></Button></DataTemplate></ItemsControl.ItemTemplate></ItemsControl></Grid>
</Window>

?

2.后臺數(shù)據(jù)綁定

與DataGrid一樣，后臺通過ItemsSource進(jìn)行數(shù)據(jù)的綁定。如下所示：

namespace WpfApp2
{/// <summary>/// A3Window.xaml 的交互邏輯/// </summary>public partial class A3Window : Window{public A3Window(){InitializeComponent();List<Test> lst = new List<Test>();lst.Add(new Test() { Code = "1" });lst.Add(new Test() { Code = "2" });lst.Add(new Test() { Code = "3" });lst.Add(new Test() { Code = "4" });lst.Add(new Test() { Code = "5" });lst.Add(new Test() { Code = "6" });one.ItemsSource = lst;}}public class Test{public string Code { get; set; }}
}

示例截圖

控件模板和數(shù)據(jù)模板的應(yīng)用場景還有很多，本文旨在拋磚引玉，一起學(xué)習(xí)，共同進(jìn)步。