WPF中的ControlTemplate(控件模板)

开发工具与关键技术：VS WPF XAML
作者：李寿宇
撰写时间：2019/6/6
WPF包含数据模板和控件模板，其中控件模板又包括ControlTemplate和ItemsPanelTemplate，这里讨论一下ControlTemplate。
其实WPF的每一个控件都有一个默认的模板，该模板描述了控件的外观以及外观对外界刺激所做出的反应。我们可以自定义一个模板来替换掉控件的默认模板以便打造个性化的控件。
与Style不同，Style只能改变控件的已有属性值（比如颜色字体）来定制控件，但控件模板可以改变控件的内部结构（VisualTree，视觉树）来完成更为复杂的定制，比如我们可以定制这样的按钮：在它的左半部分显示一个小图标而它的右半部分显示文本。
要替换控件的模板，我们只需要声明一个ControlTemplate对象，并对该ControlTemplate对象做相应的配置，然后将该ControlTemplate对象赋值给控件的Template属性就可以了。
ControlTemplate包含两个重要的属性：
1， VisualTree，该模板的视觉树，其实我们就是使用这个属性来描述控件的外观的
2， Triggers，触发器列表，里面包含一些触发器Trigger，我们可以定制这个触发器列表来使控件对外界的刺激发生反应，比如鼠标经过时文本变成粗体等。
参考以下代码：

   <Button>
         <Button.Template>
	           <ControlTemplate>
	             <!--定义视觉树-->
	             <Grid>
	               <Ellipse Name="faceEllipse" Width="{TemplateBinding Button.Width}" Height="{TemplateBinding Control.Height}"  Fill="{TemplateBinding Button.Background}"/>
	               <TextBlock Name="txtBlock" Margin="{TemplateBinding Button.Padding}" VerticalAlignment="Center"  HorizontalAlignment="Center"  Text="{TemplateBinding Button.Content}" />
	             </Grid>
	             <!--定义视觉树_end-->            
	           </ControlTemplate>
         </Button.Template>
   </Button>

在上面的代码中，我们修改了Button的Template属性，我们定义了一个ControlTemplate，在 … 之间包含的是模板的视觉树，也就是如何显示控件的外观，我们这里使用了一个Ellipse（椭圆）和一个TextBlock（文本块）来定义控件的外观。
很容易联想到一个问题：控件（Button）的一些属性，比如高度、宽度、文本等如何在新定义的外观中表现出来呢？
我们使用TemplateBinding 将控件的属性与新外观中的元素的属性关联起来Width="{TemplateBinding Button.Width}" ，这样我们就使得椭圆的宽度与按钮的宽度绑定在一起而保持一致，同理我们使用Text="{TemplateBinding Button.Content}"将TextBlock的文本与按钮的Content属性绑定在一起。

除了定义控件的默认外观外，也许我们还想定义当外界刺激我们的控件时，控件外观做出相应的变化，这是我们需要触发器。参考以下代码：

   <Button Content="test btn" Grid.Column="1" Grid.ColumnSpan="1" Grid.Row="1" Grid.RowSpan="1"  >
         <Button.Template>
           <ControlTemplate>
             <!--定义视觉树-->
             <Grid>
               <Ellipse Name="faceEllipse" Width="{TemplateBinding Button.Width}" Height="{TemplateBinding Control.Height}"  Fill="{TemplateBinding Button.Background}"/>
               <TextBlock Name="txtBlock" Margin="{TemplateBinding Button.Padding}" VerticalAlignment="Center"  HorizontalAlignment="Center"  Text="{TemplateBinding Button.Content}" />
             </Grid>
             <!--定义视觉树_end-->
             <!--定义触发器-->
             <ControlTemplate.Triggers>
               <Trigger  Property="Button.IsMouseOver"  Value="True">
                 <Setter Property="Button.Foreground" Value="Red" />               
               </Trigger>
             </ControlTemplate.Triggers>
             <!--定义触发器_End-->
           </ControlTemplate>
         </Button.Template>
    </Button>

接下来的一个问题是：如果我要重用我的模板，应该怎么办呢？ 你需要将模板定义为资，在项目中可以重复调资源里面写好的模板了，不要每次去重写模板控件了方便使用。