WPF模板(一)：控件模板、数据模板、面板模板

模板使用方式：首先定义模板，然后在把对应的key应用到控件对应的属性中； 属性对应： 控件模板，对应控件的Template； 数据模板，对应控件的ItemTemplate属性； 面板模板，对应控件的ItemsPanel属性。

控件模板：如果控件的样式不能满足，可自定义控件模板来设计样式。 数据模板：内容控件通过ContentTemplate属性支持数据模板；列表控件(即继承自ItemsControl类的控件)，通过ItemTemplate属性支持数据模板，该模板用于显示由ItemSource提供集合中的每一项。 面板模板：ItemsPanelTemplate用于指定项的布局。 ItemsControl 类型具有一个类型为ItemsPanelTemplate 的 ItemsPanel 属性。

一、控件模板：如果控件的样式不能满足，可自定义控件模板来设计样式。

<Window.Resources> <ControlTemplate x:Key="roundBtnTemplte"> <Grid> <Ellipse Name="roundBtn" Width="100" Height="100" Fill="AliceBlue"> </Ellipse> <ContentPresenter Content="{TemplateBinding Button.Content}" VerticalAlignment="Center"> </ContentPresenter> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="true"> <Setter TargetName="roundBtn" Property="Fill" Value="Yellow"> </Setter> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Window.Resources> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="1*"></ColumnDefinition> <ColumnDefinition Width="1*"></ColumnDefinition> </Grid.ColumnDefinitions> <StackPanel Margin="10" Grid.Column="0" Orientation="Horizontal"> <Button Padding="5" Margin="5" Content="Round Button" Template="{StaticResource roundBtnTemplte}"></Button> <Button Padding="5" Margin="5">nomal button</Button> </StackPanel> </Grid>

2.数据模板：内容控件通过ContentTemplate属性支持数据模板；列表控件(即继承自ItemsControl类的控件)，通过ItemTemplate属性支持数据模板，该模板用于显示由ItemSource提供集合中的每一项。

<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:sys="clr-namespace:System;assembly=mscorlib" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <!--创建数据模板--> <HierarchicalDataTemplate x:Key="NavDataTem" ItemsSource="{Binding Children}"> <Border Name="myborder" BorderBrush="AliceBlue" BorderThickness="2" Margin="3"> <StackPanel Orientation="Horizontal" Margin="0,3"> <CheckBox IsChecked="{Binding IsChecked}" Content=""/> <Image Source="{Binding Icon}" Width="16" Height="16"></Image> <TextBlock Name="txtOne" Margin="5" FontWeight="Bold" Text="{Binding ItemName}" ></TextBlock> <TextBlock Name="txtTwo" Margin="5" Text="{Binding ItemProperty}" ></TextBlock> </StackPanel> </Border> <HierarchicalDataTemplate.Triggers> <Trigger SourceName="myborder" Property="IsMouseOver" Value="True"> <Setter TargetName="txtOne" Property="Background" Value="LightGray"></Setter> <Setter TargetName="txtTwo" Property="FontSize" Value="20"></Setter> </Trigger> </HierarchicalDataTemplate.Triggers> </HierarchicalDataTemplate> </Window.Resources> <StackPanel Margin="5"> <TreeView Name="treeTest" ScrollViewer.VerticalScrollBarVisibility="Visible" ItemTemplate="{StaticResource NavDataTem}"> </TreeView> </StackPanel> </Window>

编码部分：

public class NavBarItem : INotifyPropertyChanged { public string ID { get { return Guid.NewGuid().ToString(); } } public string ItemName { get; set; } public string ItemProperty { get; set; } public List<NavBarItem> Children { get; set; } public NavBarItem() { Children = new List<NavBarItem>(); } public event PropertyChangedEventHandler PropertyChanged; public void OnPropertyChanged(PropertyChangedEventArgs e) { if (PropertyChanged != null) PropertyChanged(this, e); } } /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window { List<NavBarItem> _NavBarItems = new List<NavBarItem>(); List<NavBarItem> NavBarItems { get { return _NavBarItems; } set { _NavBarItems = value; } } public MainWindow() { InitializeComponent(); treeTest.ItemsSource = NavBarItems; List<NavBarItem> childrenOne = new List<NavBarItem>(); childrenOne.Add(new NavBarItem() { ItemName = "C++", ItemProperty = "C++语言" }); childrenOne.Add(new NavBarItem() { ItemName = "C", ItemProperty = "C语言" }); childrenOne.Add(new NavBarItem() { ItemName = "C#", ItemProperty = "C#语言" }); childrenOne.Add(new NavBarItem() { ItemName = "Java", ItemProperty = "Java语言" }); List<NavBarItem> childrenTwo = new List<NavBarItem>(); childrenTwo.Add(new NavBarItem() { ItemName = "Windows", ItemProperty = "微软" }); childrenTwo.Add(new NavBarItem() { ItemName = "Linux", ItemProperty = "开源" }); childrenTwo.Add(new NavBarItem() { ItemName = "MacOS", ItemProperty = "苹果" }); NavBarItems.Add(new NavBarItem() { ItemName = "编程语言", Children = childrenOne }); NavBarItems.Add(new NavBarItem() { ItemName = "操作系统", Children = childrenTwo }); } }

说明：控件模板和数据模板的关系

控件只是数据和行为的载体，至于它本身长什么样子和数据长什么样子都是靠Template决定的。决定控件外观的是ControlTemplate，决定数据外观的是DataTemplate，它们正是Control类的Template和ContentTemplate两个属性的值。 　　一般来说，ControlTemplate内都有一个ContentPresenter，这个ContentPresenter的ContentTemplate就是DataTemplate类型。所以数据模板和控件模板的关系如下图所示：

Control类型     - Template属性 (ControlTemplate类型)         - ContentPresenter             - ContentTemplate (DataTemplate类型) ContentControl类型     - Template属性 (ControlTemplate类型) 继承自Control     - ContentTemplate (DataTemplate类型) ItemsControl类型     - Template属性 (ControlTemplate类型) 继承自Control     - ItemsPanel属性 (ItemsPanelTemplate类型) 指定布局容器     - ItemTemplate属性 (DateTemplate类型) 每个Item的Template

3.面板模板

增加ItemsPanelTemplate调整面板布局

<Window.Resources> <!--创建数据模板--> <HierarchicalDataTemplate x:Key="NavDataTem" ItemsSource="{Binding Children}"> <Border Name="myborder" BorderBrush="AliceBlue" BorderThickness="2" Margin="3"> <StackPanel Orientation="Horizontal" Margin="0,3"> <CheckBox IsChecked="{Binding IsChecked}" Content=""/> <Image Source="{Binding Icon}" Width="16" Height="16"></Image> <TextBlock Name="txtOne" Margin="5" FontWeight="Bold" Text="{Binding ItemName}" ></TextBlock> <TextBlock Name="txtTwo" Margin="5" Text="{Binding ItemProperty}" ></TextBlock> </StackPanel> </Border> <HierarchicalDataTemplate.Triggers> <Trigger SourceName="myborder" Property="IsMouseOver" Value="True"> <Setter TargetName="txtOne" Property="Background" Value="LightGray"></Setter> <Setter TargetName="txtTwo" Property="FontSize" Value="20"></Setter> </Trigger> </HierarchicalDataTemplate.Triggers> </HierarchicalDataTemplate> <ItemsPanelTemplate x:Key="ItemsPanelTem"> <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left"/> </ItemsPanelTemplate> </Window.Resources> <StackPanel Margin="5"> <TreeView Name="treeTest" ScrollViewer.VerticalScrollBarVisibility="Visible" ItemTemplate="{StaticResource NavDataTem}" ItemsPanel="{StaticResource ItemsPanelTem}"> </TreeView> </StackPanel> </Window>