总目录：https://www.v2know.com/MainPage/Category/WPF

什么是控件模板？

先解释一个最基本的问题，有人觉得模板和定义样式差不多，其实不然。

样式终归是样式，

模板的话，非要定义的话，就说俩字“自举”。

为啥要提到“自举”，其实XAML有人多功能都是微软工作人员帮你自举出来的。

举个例子：

你在VS里面 视图 - 其它窗口 - 找到【文档大纲】这个东西。

打开来，它是一个控件树。

假设你在Grid里面写了个Button，你可以在控件树里面找到它，右击→编辑模板→编辑副本，

这样可以快速创建一个模板。（这样的方式其实就是创建了一个Style）

附源码：

<Window.Resources>
    <Style x:Key="FocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
    <SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
    <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
    <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
    <SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
    <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
    <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
    <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
    <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
    <Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
        <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
        <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                        <ContentPresenter x:Name="contentPresenter" Focusable="False" 
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                          Margin="{TemplateBinding Padding}" 
                                          RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                            <Trigger Property="IsDefaulted" Value="true">
                                <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
                                <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid>
    <StackPanel VerticalAlignment="Center">
        <Button Content="Hello" Width="100" VerticalAlignment="Center" Height="40" Style="{DynamicResource ButtonStyle}"/>
    </StackPanel>
</Grid>

创建完成后，我们可以注意到，在Style里面的最后一个标签的属性是Template。（这可不是随便定义的哟！）

Template里面最终有一个叫ControlTemplate的元素，它的TargetType继承了x:Type Button。（先不要管这是什么）

我们现在可以通过改变ControlTemplate里面的内容来改变按钮的样式。

在Border里面修改的属性将应用于所有的按钮。

这不还是定义样式嘛？

不，不是。

它与一般定义样式最大的区别在于还是在于“自举”，

你可以想象成Style是外，而Template是内。

ContentPresenter已经是“自举”相关的属性了。

你可以看到，在ControlTemplate里面，定了大量的TemplateBinding，依赖外部的一个BorderBrush，这已经是自举出来的东西了。

举个例子：

假设你删除了上面代码的HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 属性，你在Button中将无法正常使用HorizontalAlignment。

TemplateBinding HorizontalContentAlignment的作用其实是为了帮助按钮中的文字居中，这个是预定义的。（你就算是写Style也是基于这样的模板）

就这样，模板套模板，最后套出了你能使用的最简单的wpf。

关于模板触发器

ControlTemplate.Triggers是模板触发器。

这里面有一些预设值。（又是自举）

通常情况下，作为初学者，你不需要去动这些东西，只要知道就行，之后想深入研究的时候再说。

不过说实在的，以后大概会看到非常多的<Setter>罢。：D

基本模板

抛开上面复杂的模板不谈，我们来写一个最基本的：

<Window.Resources>
    <ControlTemplate x:Key="defaultButtonTemplate" TargetType="Button">
        <Border Background="Red" CornerRadius="5">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="{TemplateBinding HorizontalAlignment}">
                <TextBlock Text="★" VerticalAlignment="Center"/>
                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                              VerticalAlignment="{TemplateBinding VerticalAlignment}"
                              />
            </StackPanel>
        </Border>
    </ControlTemplate>
</Window.Resources>
<Grid>
    <Button Content="Hello" Width="100" 
                Template="{StaticResource defaultButtonTemplate}"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Height="40"/>
</Grid>

同样地，你可以测试删除

HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}"

看看会发生什么，这样能帮助你理解上面的内容。

下一篇：WPF设计之数据模板