WPF入门：ControlTemplate

---

前言

例如：根据对wpf的网上学习与资料查找，整理了对模板ControlTemplate理解

---

一、ControlTemplate是什么？

ControlTemplate是模板(Template)中的一类，，后续控件只需引用ControlTemplate即可实现同一显示，以下为两种引用方法：

二、方法一

1.新建字典模板

首先创建字典：

2.字典模板代码

代码与解析如下（示例）：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <!--定义了一个名为But2Style的样式，该样式专门用于Button控件-->
    <Style TargetType="Button" x:Key="But2Style">
        <!--属性设置：-->
        <Setter Property="Foreground" Value="#aaa"></Setter>
        <Setter Property="Width" Value="50"></Setter>
        <Setter Property="Height" Value="50"></Setter>
        <!--模板定义-->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <!--边框-->
                    <Border BorderThickness="5" Background="Yellow" Name="border">
                        <!--渐变色-->
                        <Border.BorderBrush>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                <GradientStop Color="Black" Offset="0"></GradientStop>
                                <GradientStop Color="Green" Offset="0.5"></GradientStop>
                                <GradientStop Color="Blue" Offset="1"></GradientStop>
                            </LinearGradientBrush>
                        </Border.BorderBrush>
                        <!--边框里面内容-->
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
                            <!--<TextBlock Text="{TemplateBinding Tag}" FontFamily="../Resource/Fonts/#iconfont" Margin="0,2,5,0"></TextBlock>-->
                            <TextBlock Text="{TemplateBinding Content}" VerticalAlignment="Center"></TextBlock>
                        </StackPanel>
                    </Border>
                    <!--触发事件-->
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="border" Property="Background" Value="white"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

---

3.字典模板引用

字典代码编写完后，代码引用（分别在app和主界面）：


代码如下：

<Application x:Class="WpfApp1.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WpfApp1"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Dictionary/But2StyleDic.xaml"></ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

<Button Style="{StaticResource But2Style}" Content="点击1" Background="Red" ></Button>

---

三、方法二

1.编写主界面模板

在主界中先编写好模板，代码如下：

 <Window.Resources>
     <ResourceDictionary>
         <!--定义了一个名为btnStyle的按钮样式-->
         <Style TargetType="Button" x:Key="btnStyle">
             <!--Setter设置控件静态属性-->
             <Setter Property="FontSize" Value="16"/>
             <Setter Property="Width" Value="50"></Setter>
             <Setter Property="Height" Value="50"></Setter>
             <!--定义模板-->
             <Setter Property="Template">
                 <Setter.Value>
                     <ControlTemplate TargetType="{x:Type Button}"  >
                         <Border x:Name="but1" Background="Blue" BorderThickness="5">
                             <!--渐变色-->
                             <Border.BorderBrush>
                                 <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                     <GradientStop Color="Black" Offset="0"></GradientStop>
                                     <GradientStop Color="Gray" Offset="0.5"></GradientStop>
                                     <GradientStop Color="Red" Offset="1"></GradientStop>
                                 </LinearGradientBrush>
                             </Border.BorderBrush>
                             <!--模板内容-->
                             <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
                                 <TextBlock Text="{TemplateBinding Content}" VerticalAlignment="Center"></TextBlock>
                             </StackPanel>
                         </Border>
                         <ControlTemplate.Triggers>
                             <!--点击事件-->
                             <Trigger Property="IsPressed" Value="True">
                                 <Setter TargetName="but1" Property="Background" Value="yellow"/>
                             </Trigger>
                         </ControlTemplate.Triggers>
                     </ControlTemplate>
                 </Setter.Value>
             </Setter>
         </Style>
     </ResourceDictionary>
 </Window.Resources>

---

2.引用主界面模板

<Button Background="Blue" Content="点击2" Style="{StaticResource btnStyle}"></Button>