一、引言模板從字面意思理解是“具有一定規(guī)格的樣板"。在現(xiàn)實(shí)生活中，磚塊都是方方正正的，那是因?yàn)橹谱鞔u塊的模板是方方正正的，如果我們使模板為圓形的話，則制作出來的磚塊就是圓形的，此時(shí)我們并不能說圓形的”磚塊“不是磚塊吧。因?yàn)樾螤钪皇撬鼈兊耐庥^，其制作材料還是一樣的。所以，模板可以理解為表現(xiàn)形式。WPF中的模板同樣是表現(xiàn)形式的意思。 在WPF中包括三種模板：控件模板、數(shù)據(jù)模版和面板模板。它們都繼承于 FrameworkTemplate 基類，其繼承層次結(jié)果如下圖所示： 從上圖可以發(fā)現(xiàn)，F(xiàn)rameworkTemplate確實(shí)有三個(gè)子類，它們正是WPF中支持的三種模板。對(duì)于控件模板，即控件外觀外衣，可以通過修改控件模板來自定義控件的外觀表現(xiàn)，例如，可以通過修改按鈕的控件模板使按鈕表現(xiàn)為圓形；數(shù)據(jù)模板，即數(shù)據(jù)的外衣。用于從一個(gè)對(duì)象中提取數(shù)據(jù)，并在內(nèi)容控件或列表控件的各個(gè)項(xiàng)中顯示數(shù)據(jù)。面板模板即面板的外衣，而面板又用于進(jìn)行布局的，所以面板的外衣也就是布局的外衣，通過修改面板模板可以自定義控件的布局。例如，ListBox默認(rèn)是自從向下地顯示每一項(xiàng)的，此時(shí)可以通過修改面板模板使其自左向右地顯示每一項(xiàng)。 WPF模板其實(shí)都是外觀的表現(xiàn)形式，不管是控件模板、數(shù)據(jù)模板還是面板模板，其都是改變控件的表現(xiàn)形式。只不過這三種控件的作用點(diǎn)不一樣罷了?？丶０迨轻槍?duì)于控件本身，修改它可以改變控件本身表現(xiàn)的樣子；數(shù)據(jù)模板針對(duì)控件的數(shù)據(jù)，修改它可以改變控件綁定的數(shù)據(jù)表現(xiàn)樣子。既然是決定數(shù)據(jù)的表現(xiàn)，從而決定其一般應(yīng)用于數(shù)據(jù)綁定控件，如ListBox、ListView等控件。面板模板則針對(duì)于控件的布局，修改它可以影響控件的布局方式。 二、控件模板在分別介紹這三種控件模板之前，我覺得你有必要先了解WPF的邏輯樹和可視化樹的內(nèi)容，因?yàn)槟阋薷目丶０?，則首先需要了解控件的組成。 2.1 WPF的邏輯樹和可視化樹在許多技術(shù)中，元素和組件都是按樹結(jié)構(gòu)的形式進(jìn)行組織的。使用這樣的結(jié)構(gòu)， 開發(fā)人員可以直接操作樹中的對(duì)象節(jié)點(diǎn)來程序?qū)ο?，從而通過操作該對(duì)象來修改程序的表現(xiàn)和行為（這是了解邏輯樹和可視化樹的主要原因）。 在WPF中，同樣使用了樹結(jié)構(gòu)來組織元素之間的關(guān)系。WPF中支持邏輯樹和可視化樹的概念，并且WPF公開了兩個(gè)提供樹形視圖幫助器類： LogicalTreeHelper 和 VisualTreeHelper 。邏輯樹指的是UI界面的組成元素的結(jié)構(gòu)。先看下面的XAML代碼的例子： <Window x:Class="TemplateDemo.VisualTree" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="200" Width="300"> <StackPanel Margin="5"> <Button Padding="5" Margin="10">First Button</Button> <Button Padding="5" Margin="10">Second Button</Button> </StackPanel> </Window> 上面XAML的邏輯樹如下圖所示： 可視化樹是邏輯樹的擴(kuò)展版本，它將元素分成更小的部分。上面XAML代碼對(duì)應(yīng)的可視化樹如下圖所示： 從上面可視化樹可以看出，Button由多個(gè)可視化元素組成——使按鈕具有陰影背景特征的邊框(由 ButtonChrome 類表示)、內(nèi)部的容器(一個(gè)ContentPresenter對(duì)象)以及存儲(chǔ)按鈕文本的文本塊控件(由TextBlock表示)。上面的可視化樹和邏輯樹結(jié)構(gòu)并不是我憑空想象出來的，而是有事實(shí)依據(jù)的，我們可以通過VisualTreeHelper類和LogicTreeHelper類提供的方法來查看窗口的可視化樹和邏輯樹，下面的例子實(shí)現(xiàn)了這個(gè)需求，具體的XAML實(shí)現(xiàn)如下所示： <Window x:Class="TemplateDemo.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="380" Width="400"> <StackPanel Margin="5"> <Button Padding="5" Margin="5" Click="ShowLogicTree">Show Logic Tree Button</Button> <Button Padding="5" Margin="5" Click="ShowVisualTree">Show Visual Tree Button</Button> <!--TreeView控件用來顯示窗口的邏輯樹和可視化樹--> <TreeView Name="treeElements" Margin="5"></TreeView> </StackPanel> </Window> 對(duì)應(yīng)的后臺(tái)代碼實(shí)現(xiàn)入下所示： public partial class Window1 : Window { public Window1() { InitializeComponent(); } // 把公共代碼抽象出一個(gè)方法，從而使代碼重用 public void ProcessElement(object obj, TreeViewItem item, TreeViewItem previousItem) { item.Header = obj.GetType().Name; item.IsExpanded = true; // 如果當(dāng)前元素是第一個(gè)元素就添加到樹集合上 // 如果是內(nèi)嵌元素，則添加到它的父節(jié)點(diǎn)上 if (previousItem == null) { treeElements.Items.Add(item); } else { previousItem.Items.Add(item); } } private void PrintLogicTree(object obj, TreeViewItem previousItem) { TreeViewItem item = new TreeViewItem(); ProcessElement(obj, item, previousItem); // 如果不是DependencyObject，則返回 if (!(obj is DependencyObject)) return; // 遞歸打印邏輯樹 foreach(object child in LogicalTreeHelper.GetChildren(obj as DependencyObject)) { // 這里為了避免死循環(huán)，因?yàn)門reeView的子元素包含Window1、StackPanel等控件 // 如果不加這個(gè)條件，控件會(huì)一直反復(fù)循環(huán) if (child is TreeView) return; PrintLogicTree(child, item); } } private void PrintVisualTree(DependencyObject obj, TreeViewItem previousItem) { TreeViewItem item = new TreeViewItem(); ProcessElement(obj, item, previousItem); // 遞歸輸出視覺樹 for (int i = 0; i < VisualTreeHelper.GetChildrenCount(obj); i++) { if (obj is TreeView) return; PrintVisualTree(VisualTreeHelper.GetChild(obj, i), item); } } private void ShowLogicTree(object sender, RoutedEventArgs e) { treeElements.Items.Clear(); PrintLogicTree(this, null); } private void ShowVisualTree(object sender, RoutedEventArgs e) { treeElements.Items.Clear(); PrintVisualTree(this, null); } } 程序的運(yùn)行效果如下圖所示： 2.2 通過控件模板自定義控件外觀控件模板既然是控件的外衣，自然我們可以創(chuàng)建的新的控件模板，然后把新的控件模板應(yīng)用到需要應(yīng)用的控件中，這時(shí)候應(yīng)用了新控件模板的控件，將會(huì)使用新的控件模板來渲染自身，從而改變控件的外觀。這也是自定義控件外觀的要旨。在WPF中按鈕的默認(rèn)控件是長(zhǎng)方形的，我們可以通過創(chuàng)建一個(gè)新的控件模板來改變按鈕的外觀，下面的例子就實(shí)現(xiàn)了通過控件模板的方式自定義了一個(gè)圓形的按鈕。具體的XAML代碼如下所示： <Window x:Class="TemplateDemo.ControlTemplate" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="ControlTemplate" Height="300" Width="300"> <Window.Resources> <!--定義控件模板，并使用key標(biāo)記--> <ControlTemplate x:Key="roundButtonTemplate" TargetType="Button"> <Grid> <Ellipse Name="ell" Fill="Orange" Width="100" Height="100"></Ellipse> <!--使用模板綁定來綁定按鈕的內(nèi)容--> <ContentPresenter Content="{TemplateBinding Button.Content}" VerticalAlignment="Center" HorizontalAlignment="Center"></ContentPresenter> </Grid> <!--定義模板觸發(fā)器--> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="ell" Property="Fill" Value="Yellow"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Window.Resources> <StackPanel Margin="10"> <Button Content="Round Button" Template="{StaticResource roundButtonTemplate}"></Button> </StackPanel> </Window> 此時(shí)，你就可以看到按鈕是一個(gè)圓形的了，并且當(dāng)鼠標(biāo)移動(dòng)到按鈕上時(shí)，會(huì)觸發(fā)模板觸發(fā)器來改變Ellipse的填充色，具體的運(yùn)行效果如下圖所示： 從上面的控件模板的使用可知，它和創(chuàng)建自定義控件不同，在很多情況下，你不需要編寫自己的控件，你只是希望更改控件的外觀。使用控件面板非常簡(jiǎn)單：
三、數(shù)據(jù)模板數(shù)據(jù)模板是數(shù)據(jù)的外衣，數(shù)據(jù)模板是一段定義如何綁定數(shù)據(jù)對(duì)象的XAML標(biāo)記，有兩種類型的控件支持?jǐn)?shù)據(jù)模板：
基于列表的模板實(shí)際上是以內(nèi)容控件模板為基礎(chǔ)的，因?yàn)榱斜碇械拿恳豁?xiàng)由一個(gè)內(nèi)容控件包裝的。如ListBox控件的ListBoxItem元素。下面讓我們具體看看如何去創(chuàng)建一個(gè)數(shù)據(jù)模板吧。 3.1 如何定義數(shù)據(jù)模板具體的XAML代碼如下所示： <Window x:Class="TemplateDemo.DataTemplate" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local ="clr-namespace:TemplateDemo;assembly=TemplateDemo" Title="DataTemplate" Height="300" Width="300"> <Window.Resources> <!--創(chuàng)建數(shù)據(jù)模板--> <DataTemplate x:Key="personDataTem"> <Border Name="blueBorder" Margin="3" BorderThickness="3" BorderBrush="Blue" CornerRadius="5"> <Grid Margin="3"> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <TextBlock Name="nametxt" FontWeight="Bold" Text="{Binding Path=Name}"></TextBlock> <TextBlock Grid.Row="1" Text="{Binding Path=Age}"></TextBlock> </Grid> </Border> <!--定義數(shù)據(jù)模板觸發(fā)器--> <DataTemplate.Triggers> <Trigger SourceName="blueBorder" Property="IsMouseOver" Value="True"> <Setter TargetName="blueBorder" Property="Background" Value="LightGray"/> <Setter TargetName="nametxt" Property="FontSize" Value="20"/> </Trigger> </DataTemplate.Triggers> </DataTemplate> </Window.Resources> <StackPanel Margin="5"> <ListBox Name="lstPerson" HorizontalContentAlignment="Stretch" ItemTemplate="{StaticResource personDataTem}"></ListBox> </StackPanel> </Window> 其對(duì)應(yīng)的后臺(tái)代碼如下所示： public partial class DataTemplate : Window { ObservableCollection<Student> persons = new ObservableCollection<Student>() { new Student() { Name ="LearningHard", Age=25}, new Student() { Name ="HelloWorld", Age=22} }; public DataTemplate() { InitializeComponent(); lstPerson.ItemsSource = persons; } } public class Student : INotifyPropertyChanged { public string ID { get { return Guid.NewGuid().ToString(); } } public string Name { get; set; } public int Age { get; set; } public event PropertyChangedEventHandler PropertyChanged; public void OnPropertyChanged(PropertyChangedEventArgs e) { if (PropertyChanged != null) PropertyChanged(this, e); } } 其運(yùn)行效果如下圖所示： 從上面數(shù)據(jù)模板的創(chuàng)建可知，使用DataTemplate很簡(jiǎn)單：
3. 2 數(shù)據(jù)模板與控件模板的關(guān)系從上面的介紹可知，控件只是數(shù)據(jù)和行為的載體，至于它本身長(zhǎng)什么樣子和數(shù)據(jù)長(zhǎng)什么樣子都是靠Template決定的。決定控件外觀的是ControlTemplate，決定數(shù)據(jù)外觀的是DataTemplate，它們正是 Control 類的Template和ContentTemplate兩個(gè)屬性的值。 一般來說，ControlTemplate內(nèi)都有一個(gè)ContentPresenter，這個(gè)ContentPresenter的ContentTemplate就是DataTemplate類型。所以數(shù)據(jù)模板和控件模板的關(guān)系如下圖所示： 四、創(chuàng)建面板模板ItemsPanelTemplate用于指定項(xiàng)的布局。 ItemsControl 類型具有一個(gè)類型為 ItemsPanelTemplate 的 ItemsPanel 屬性。 每種ItemsControl都有其默認(rèn)的ItemsPanelTemplate。 對(duì)于 ListBox ，默認(rèn)值使用 VirtualizingStackPanel 。 對(duì)于 MenuItem ，默認(rèn)值使用 WrapPanel 。 對(duì)于 StatusBar ，默認(rèn)值使用 DockPanel 。 自定義面板模板與自定義數(shù)據(jù)面板和數(shù)據(jù)面板一樣簡(jiǎn)單，一樣只需要首先定義一個(gè)面板模板在資源集合中，然后將其Key指定給ItemsPanel屬性即可。具體的XAML實(shí)現(xiàn)如下所示： <Window x:Class="TemplateDemo.ItemsPanelTemplate" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="ItemsPanelTemplate" Height="300" Width="300"> <Window.Resources> <!--定義DataTemplate--> <DataTemplate x:Key="personDataTem"> <Border Name="blueBorder" Margin="3" BorderThickness="3" BorderBrush="Blue" CornerRadius="5"> <Grid Margin="3"> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <TextBlock Name="nametxt" FontWeight="Bold" Text="{Binding Path=Name}"></TextBlock> <TextBlock Grid.Row="1" Text="{Binding Path=Age}"></TextBlock> </Grid> </Border> </DataTemplate> <!--定義ItemsPanelTemplate--> <ItemsPanelTemplate x:Key="listItemsPanelTem"> <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left"/> </ItemsPanelTemplate> </Window.Resources> <!--使用ItemsPanelTemplate只需要賦值給ItemsPanel屬性即可--> <ListBox Name="lstPerson" ItemsPanel="{StaticResource listItemsPanelTem}" ItemTemplate="{StaticResource personDataTem}" /> </Window> 其后臺(tái)代碼和數(shù)據(jù)模板的后臺(tái)代碼一樣，其實(shí)現(xiàn)代碼為： public partial class ItemsPanelTemplate : Window { ObservableCollection<Student> persons = new ObservableCollection<Student>() { new Student() { Name ="LearningHard", Age=25}, new Student() { Name ="HelloWorld", Age=22} }; public ItemsPanelTemplate() { InitializeComponent(); lstPerson.ItemsSource = persons; } } 此時(shí)程序運(yùn)行的效果如下圖所示，從下圖結(jié)果可以看出，此時(shí)ListBox中的項(xiàng)不再是自上而下排列了，而是從左向右排列的。 五、總結(jié)到這里，WPF模板的內(nèi)容就介紹結(jié)束了，本文主要介紹了WPF中支持的三種模板：控件模板、數(shù)據(jù)模板和面板模板，然后各自定義并使用了自定義的模板，最后介紹了這三個(gè)模板之間的聯(lián)系。使用這三個(gè)模板的方式都非常簡(jiǎn)單， 都是先定義一個(gè)模板，然后在把對(duì)應(yīng)的key應(yīng)用到控件對(duì)應(yīng)的屬性中，對(duì)于控件模板，應(yīng)用的是控件的Template，對(duì)于數(shù)據(jù)模板，應(yīng)用的是控件的ItemTemplate屬性，對(duì)于面板模板，應(yīng)用的是控件的ItemsPanel屬性。 在下面的一篇博文將介紹如何實(shí)現(xiàn)一個(gè)MVVM的實(shí)例程序。 本文所有源碼下載：TemplateDemo.zip |
|
|
