你知道WPF这三大模板实例运用吗？

1、介绍

对于Windows桌面端应用开发来讲，WPF以其界面渲染的特殊性，灵活的界面布局而让人津津乐道，因为它能为用户提供更好的交互体验。如何利用WPF开发出让人赏心悦目的界面与功能呢？这里不仅仅只是布局的功劳，很大一部分都在WPF模板的灵活使用，那么这里就来聊一聊WPF的三大模板。

2、控件模板ControlTemplate

WPF所有控件都是基于呈现与行为分离的模式，开发人员可以在自己应用场景中根据需要进行不同呈现状态的更改，而不会影响到控件的原始功能行为，能让我们在任意改变控件外观的同时还能保留控件的操作动作，这里其实除了模板的分离还得益于WPF的路由事件（后面有机会再聊，今天就先说模板）。下面以一个控件为例，可以进行不同的模板修改。

这里我们可以直接使用窗口资源，创建一个ControlTemplate对象，呈现结果与代码如下：

 <Window x:Class="Zhaoxi.ControlTemplate.Demo.MainWindow"
         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"
         mc:Ignorable="d"
         Title="MainWindow" Height="450" Width="800">
     <Window.Resources>
         <ControlTemplate TargetType="Button" x:Key="ButtonTemplate1">
             <Border Background="Red" Width="80" Height="30" CornerRadius="5">
                 <ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
             Border>
         ControlTemplate>
         <ControlTemplate TargetType="Button" x:Key="ButtonTemplate2">
             <Border Background="Orange" Width="80" Height="80" CornerRadius="40">
                 <ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
             Border>
         ControlTemplate>
         <ControlTemplate TargetType="Button" x:Key="ButtonTemplate3">
             <Grid>
                 <Polygon Points="40,0 80,80 0,80" Fill="Green"/>
                 <ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
             Grid>
         ControlTemplate>
     Window.Resources>
     <UniformGrid Rows="1">
         <Button Content="Button1" Template="{StaticResource ButtonTemplate1}"
                 VerticalAlignment="Center" HorizontalAlignment="Center"/>
         
         <Button Content="Button1" Template="{StaticResource ButtonTemplate2}"
                 VerticalAlignment="Center" HorizontalAlignment="Center"/>
 
         <Button Content="Button1" Template="{StaticResource ButtonTemplate3}"
                 VerticalAlignment="Center" HorizontalAlignment="Center"/>
     UniformGrid>
 Window>
 

三个按钮根据不同的模板进行不了同的呈现，但是原始功能依然保留，不受任何影响

3、数据模板DataTemplate

数据模板其实是为了解决数据集绑定中数据呈现的问题，它规定了数据集中数据如何布局，一般在数据集控件中使用，比如ItemsControl、ListView、ListBox、DataGrid等，下面还是以一个简单的例子来介绍：

 <Window x:Class="Zhaoxi.DataTemplate.Demo.MainWindow"
         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"
         mc:Ignorable="d"
         xmlns:sys="clr-namespace:System;assembly=mscorlib"
         Title="MainWindow" Height="450" Width="800">
     <Window.Resources>
         <x:Array Type="sys:String" x:Key="datas">
             <sys:String>ABCDEFGsys:String>
             <sys:String>1234567sys:String>
         x:Array>
 
         <DataTemplate x:Key="DataTemplate1">
             <Border BorderBrush="#DDD" BorderThickness="0,0,0,1">
                 <Grid MinHeight="30">
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition/>
                         <ColumnDefinition/>
                         <ColumnDefinition/>
                     Grid.ColumnDefinitions>
                     <TextBlock Text="{Binding [0]}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                     <StackPanel Grid.Column="1">
                         <TextBlock Text="{Binding [1]}" Margin="0,5"/>
                         <TextBlock Text="{Binding [2]}" Margin="0,5"/>
                     StackPanel>
 
                     <TextBlock Text="{Binding [3]}" Grid.Column="2"/>
                 Grid>
             Border>
         DataTemplate>
     Window.Resources>
     <Grid>
         <ItemsControl ItemsSource="{StaticResource datas}" ItemTemplate="{StaticResource DataTemplate1}">
         ItemsControl>
     Grid>
 Window>

这里的DataTemplate就规定了绑定到ItemsControl的数据集中的数据如何显示，而且被绑定的值才能显示，没有被绑定的值无法显示

4、容器模板ItemsPanelTemplate

窗口模板也是伴随送数据集合控件一起了，它规定了数据呈现的排列方式，可以通过指定不同的布局控件进行不同的布局显示，比如下面的例子介绍了以UniformGrid方式进行布局的例子

 <Window x:Class="Zhaoxi.VisualState.Demo.MainWindow"
         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"
         mc:Ignorable="d"
         xmlns:sys="clr-namespace:System;assembly=mscorlib"
         Title="MainWindow" Height="100" Width="800">
     <Window.Resources>
         <x:Array Type="sys:String" x:Key="datas">
             <sys:String>ABCDEFGsys:String>
             <sys:String>1234567sys:String>
         x:Array>
 
         <DataTemplate x:Key="DataTemplate1">
             <Border BorderBrush="#DDD" BorderThickness="1">
                 <Grid MinHeight="30">
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition/>
                         <ColumnDefinition/>
                         <ColumnDefinition/>
                     Grid.ColumnDefinitions>
                     <TextBlock Text="{Binding [0]}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="Red"/>
                     <StackPanel Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center">
                         <TextBlock Text="{Binding [1]}" Margin="0,5"/>
                         <TextBlock Text="{Binding [2]}" Margin="0,5"/>
                     StackPanel>
 
                     <TextBlock Text="{Binding [3]}" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center"
                                Foreground="Green"/>
                 Grid>
             Border>
         DataTemplate>
     Window.Resources>
     <Grid>
         <ItemsControl ItemsSource="{StaticResource datas}" ItemTemplate="{StaticResource DataTemplate1}">
             <ItemsControl.ItemsPanel>
                 <ItemsPanelTemplate>
                     <UniformGrid Rows="1"/>
                 ItemsPanelTemplate>
             ItemsControl.ItemsPanel>
         ItemsControl>
     Grid>
 Window>

有时候有人为问我：如何让一个布局控件通过绑定的方式进行子项的动态增删？那么这个问题的奥秘就在上面这个例子中，借助一个数据集合控件，将此控件的容器模板改变成所要动态增删子项的容器就可以，不仅仅是Grid、StackPanel还包括UniformGrid、WrapPanel、DockPanel、Canvas都可以，灵活运用能得到意想不到的效果。

最后展示一个利用自定义容器的方式，进行了一个瀑布流式布局的动态数据呈现：

END

持续关注后续更新更多干货！