ControlTemplate

我们知道WPF的控件都是继承自Control，在Control类中有一个Template属性，类型就是ControlTemplate。那么利用这个ControlTemplate就可以彻底的颠覆控件的默认外观。

  1. <Window x:Class="WpfApplication1.Window1"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:UC="clr-namespace:WpfApplication1"
  5.         xmlns:UC1="clr-namespace:WpfControlLibrary1;assembly=WpfControlLibrary1"
  6.         xmlns:sys="clr-namespace:System;assembly=mscorlib"
  7.         Title="Window1" Height="300" Width="300">
  8.     <Window.Resources>
  9.         <ControlTemplate x:Key="rect" TargetType="{x:Type CheckBox}">
  10.             <StackPanel>
  11.                 <Rectangle Name="breakRectangle" Stroke="Red" StrokeThickness="2" Width="20" Height="20">
  12.                     <Rectangle.Fill>
  13.                         <SolidColorBrush Color="White"/>
  14.                     </Rectangle.Fill>
  15.                 </Rectangle>
  16.             </StackPanel>
  17.         </ControlTemplate>
  18.     </Window.Resources>
  19.     <Canvas>
  20.         <CheckBox Template="{StaticResource ResourceKey=rect}" Content="我是CheckBox"/>
  21.     </Canvas>
  22. </Window>

WPF模板 - 图1

ContentPresenter

WPF给我们提供了一个ContentPresenter，它的作用就是把原有模板的属性原封不动的投放到自定义模板中。

  1. <Window x:Class="WpfApplication1.Window1"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:UC="clr-namespace:WpfApplication1"
  5.         xmlns:UC1="clr-namespace:WpfControlLibrary1;assembly=WpfControlLibrary1"
  6.         xmlns:sys="clr-namespace:System;assembly=mscorlib"
  7.         Title="Window1" Height="300" Width="300">
  8.     <Window.Resources>
  9.         <ControlTemplate x:Key="rect" TargetType="{x:Type CheckBox}">
  10.             <ControlTemplate.Resources>
  11.                 <SolidColorBrush x:Key="redBrush" Color="Red"/>
  12.             </ControlTemplate.Resources>
  13.             <StackPanel>
  14.                 <Rectangle Name="breakRectangle" Stroke="Red" StrokeThickness="2" Width="20" Height="20">
  15.                     <Rectangle.Fill>
  16.                         <SolidColorBrush Color="White"/>
  17.                     </Rectangle.Fill>
  18.                 </Rectangle>
  19.                 <!--模板中的Margin绑定到原控件中的Padding上去-->
  20.                 <ContentPresenter  Margin="{TemplateBinding Padding}" />
  21.             </StackPanel>
  22.             <!--Trigger-->
  23.             <ControlTemplate.Triggers>
  24.                 <Trigger Property="IsChecked" Value="True">
  25.                     <Setter TargetName="breakRectangle" Property="Fill" Value="{StaticResource ResourceKey=redBrush}">
  26.                     </Setter>
  27.                 </Trigger>
  28.             </ControlTemplate.Triggers>
  29.         </ControlTemplate>
  30.     </Window.Resources>
  31.     <Canvas>
  32.         <CheckBox Template="{StaticResource ResourceKey=rect}" Content="我是CheckBox" Padding="20"/>
  33.     </Canvas>
  34. </Window>

WPF模板 - 图2

与Style混搭

  1. <Window x:Class="WpfApplication1.Window1"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:UC="clr-namespace:WpfApplication1"
  5.         xmlns:UC1="clr-namespace:WpfControlLibrary1;assembly=WpfControlLibrary1"
  6.         xmlns:sys="clr-namespace:System;assembly=mscorlib"
  7.         Title="Window1" Height="300" Width="300">
  8.     <Window.Resources>
  9.         <Style x:Key="cbx" TargetType="{x:Type CheckBox}">
  10.             <Setter Property="Template">
  11.                 <Setter.Value>
  12.                     <ControlTemplate TargetType="{x:Type CheckBox}">
  13.                         <ControlTemplate.Resources>
  14.                             <SolidColorBrush x:Key="redBrush" Color="Red"/>
  15.                         </ControlTemplate.Resources>
  16.                         <StackPanel>
  17.                             <Rectangle Name="breakRectangle" Stroke="Red" StrokeThickness="2" Width="20" Height="20">
  18.                                 <Rectangle.Fill>
  19.                                     <SolidColorBrush Color="White"/>
  20.                                 </Rectangle.Fill>
  21.                             </Rectangle>
  22.                             <ContentPresenter/>
  23.                         </StackPanel>
  24.                         <ControlTemplate.Triggers>
  25.                             <Trigger Property="IsChecked" Value="True">
  26.                                 <Setter TargetName="breakRectangle" Property="Fill" Value="{StaticResource ResourceKey=redBrush}">
  27.                                 </Setter>
  28.                             </Trigger>
  29.                         </ControlTemplate.Triggers>
  30.                     </ControlTemplate>
  31.                 </Setter.Value>
  32.             </Setter>
  33.         </Style>
  35.     </Window.Resources>
  36.     <Canvas>
  37.         <CheckBox Style="{StaticResource ResourceKey=cbx}" Content="我是CheckBox"/>
  38.     </Canvas>
  39. </Window>

数据模板

  1. namespace WpfApplication1
  2. {
  3.     /// <summary>
  4.     /// Window1.xaml 的交互逻辑
  5.     /// </summary>
  6.     public partial class Window1 : Window
  7.     {
  8.         public static string name = "WPF";
  10.         public Window1()
  11.         {
  12.             InitializeComponent();
  13.         }
  14.     }
  16.     public class PersonList : ObservableCollection<PersonNew>
  17.     {
  18.         public PersonList()
  19.         {
  20.             this.Add(new PersonNew() { Name = "一线码农", Age = 24, Address = "上海" });
  21.             this.Add(new PersonNew() { Name = "小师妹", Age = 20, Address = "上海" });
  22.         }
  23.     }
  25.     public class PersonNew
  26.     {
  27.         public string Name { get; set; }
  28.         public int Age { get; set; }
  29.         public string Address { get; set; }
  30.         //既然wpf在Render数据的时候呈现的是当前的ToString()形式，那下面我们来重写ToString()试试看。
  31.         public override string ToString()
  32.         {
  33.             return string.Format("姓名:{0}, 年龄:{1}, 地址:{2}", Name, Age, Address);
  34.         }
  35.     }
  36. }
  1. <Window x:Class="WpfApplication1.Window1"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:sys="clr-namespace:System;assembly=mscorlib"
  5.         xmlns:src="clr-namespace:WpfApplication1"
  6.         Title="MainWindow" Height="350" Width="525">
  7.     <Window.Resources>
  8.         <ObjectDataProvider x:Key="personList" ObjectType="{x:Type src:PersonList}"/>
  9.     </Window.Resources>
  10.     <Grid>
  11.         <ListBox ItemsSource="{Binding Source={StaticResource ResourceKey=personList}}"></ListBox>
  12.     </Grid>
  13. </Window>

WPF模板 - 图3

  1. <Window x:Class="WpfApplication1.Window1"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:sys="clr-namespace:System;assembly=mscorlib"
  5.         xmlns:src="clr-namespace:WpfApplication1"
  6.         Title="MainWindow" Height="350" Width="525">
  7.     <Window.Resources>
  8.         <ObjectDataProvider x:Key="personList" ObjectType="{x:Type src:PersonList}"/>
  9.         <DataTemplate x:Key="rect">
  10.             <Border Name="border" BorderBrush="Aqua" BorderThickness="1" Padding="5" Margin="5">
  11.                 <StackPanel>
  12.                     <StackPanel Orientation="Horizontal">
  13.                         <TextBlock Text="{Binding Name}" Margin="5,0,0,0"/>
  14.                         <TextBlock Text="{Binding Age}" Margin="5,0,0,0"/>
  15.                     </StackPanel>
  16.                     <StackPanel Orientation="Horizontal">
  17.                         <TextBlock Text="{Binding Address}" Margin="5,0,0,0"/>
  18.                     </StackPanel>
  19.                 </StackPanel>
  20.             </Border>
  21.         </DataTemplate>
  22.     </Window.Resources>
  23.     <Grid>
  24.         <ListBox ItemsSource="{Binding Source={StaticResource ResourceKey=personList}}"
  25.                    ItemTemplate="{StaticResource ResourceKey=rect}"></ListBox>
  26.     </Grid>
  27. </Window>

WPF模板 - 图4

ItemsPanelTemplate

  1. <Window x:Class="WpfApplication1.Window1"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:sys="clr-namespace:System;assembly=mscorlib"
  5.         xmlns:src="clr-namespace:WpfApplication1"
  6.         Title="MainWindow" Height="350" Width="525">
  7.     <Window.Resources>
  8.         <ObjectDataProvider x:Key="personList" ObjectType="{x:Type src:PersonList}"/>
  9.         <DataTemplate x:Key="rect">
  10.             <Border Name="border" BorderBrush="Aqua" BorderThickness="1" Padding="5" Margin="5">
  11.                 <StackPanel>
  12.                     <StackPanel Orientation="Horizontal">
  13.                         <TextBlock Text="{Binding Name}" Margin="5,0,0,0"/>
  14.                         <TextBlock Text="{Binding Age}" Margin="5,0,0,0"/>
  15.                     </StackPanel>
  16.                     <StackPanel Orientation="Horizontal">
  17.                         <TextBlock Text="{Binding Address}" Margin="5,0,0,0"/>
  18.                     </StackPanel>
  19.                 </StackPanel>
  20.             </Border>
  21.         </DataTemplate>
  22.         <!--控件调用的布局控件-->
  23.         <ItemsPanelTemplate x:Key="items">
  24.             <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center"/>
  25.         </ItemsPanelTemplate>
  26.     </Window.Resources>
  27.     <Grid>
  28.         <ListBox ItemsSource="{Binding Source={StaticResource ResourceKey=personList}}"
  29.                    ItemTemplate="{StaticResource ResourceKey=rect}" ItemsPanel="{StaticResource ResourceKey=items}"></ListBox>
  30.     </Grid>
  31. </Window>

WPF模板 - 图5

HierarchicalDataTemplate

它是针对具有分层数据结构的控件设计的，比如说TreeView，相当于可以每一个层级上做DataTemplate，很好很强大。

  1. <Window x:Class="WpfApplication1.Window1"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:sys="clr-namespace:System;assembly=mscorlib"
  5.         xmlns:src="clr-namespace:WpfApplication1"
  6.         Title="MainWindow" Height="350" Width="525">
  7.     <Window.Resources>
  8.         <XmlDataProvider x:Key="Info" XPath="Nations">
  9.             <x:XData>
  10.                 <Nations xmlns="">
  11.                     <Nation Name="中国">
  12.                         <Provinces>
  13.                             <Province Name="安徽">
  14.                                 <Citys>
  15.                                     <City Name="安庆">
  16.                                         <Countrys>
  17.                                             <Country Name="潜山"/>
  18.                                             <Country Name="桐城"/>
  19.                                         </Countrys>
  20.                                     </City>
  21.                                     <City Name="合肥">
  22.                                         <Countrys>
  23.                                             <Country Name="长丰"/>
  24.                                             <Country Name="肥东"/>
  25.                                         </Countrys>
  26.                                     </City>
  27.                                 </Citys>
  28.                             </Province>
  29.                             <Province Name="江苏">
  30.                                 <Citys>
  31.                                     <City Name="南京">
  32.                                         <Countys>
  33.                                             <Country Name="溧水"/>
  34.                                             <Country Name="高淳"/>
  35.                                         </Countys>
  36.                                     </City>
  37.                                     <City Name="苏州">
  38.                                         <Countys>
  39.                                             <Country Name="常熟"/>
  40.                                         </Countys>
  41.                                     </City>
  42.                                 </Citys>
  43.                             </Province>
  44.                         </Provinces>
  45.                     </Nation>
  46.                 </Nations>
  47.             </x:XData>
  48.         </XmlDataProvider>
  49.         <HierarchicalDataTemplate DataType="Nation" ItemsSource="{Binding XPath=Provinces/Province}">
  50.             <StackPanel Background="AliceBlue">
  51.                 <TextBlock FontSize="20" Text="{Binding XPath=@Name}"/>
  52.             </StackPanel>
  53.         </HierarchicalDataTemplate>
  54.         <HierarchicalDataTemplate DataType="Province" ItemsSource="{Binding XPath=Citys/City}">
  55.             <StackPanel Background="LightBlue">
  56.                 <TextBlock FontSize="18" Text="{Binding XPath=@Name}"/>
  57.             </StackPanel>
  58.         </HierarchicalDataTemplate>
  59.         <HierarchicalDataTemplate DataType="City" ItemsSource="{Binding XPath=Countrys/Country}">
  60.             <StackPanel Background="LightBlue">
  61.                 <TextBlock FontSize="18" Text="{Binding XPath=@Name}"/>
  62.             </StackPanel>
  63.         </HierarchicalDataTemplate>
  64.         <HierarchicalDataTemplate DataType="Country">
  65.             <StackPanel Background="LightSalmon">
  66.                 <TextBlock FontSize="18" Text="{Binding XPath=@Name}"/>
  67.             </StackPanel>
  68.         </HierarchicalDataTemplate>
  69.     </Window.Resources>
  70.     <TreeView ItemsSource="{Binding Source={StaticResource ResourceKey=Info},XPath=Nation}"></TreeView>
  71. </Window>

WPF模板 - 图6