WPF ControlTemplate 控件模版

1. 什么是 ControlTemplate？

核心作用：用于定义控件的视觉外观（UI 结构），与控件的行为逻辑分离

与 DataTemplate 的区别：

• ControlTemplate：控制控件自身的外观（如按钮的形状）。

• DataTemplate：控制数据对象在界面中的呈现方式（如列表项的布局）

2. 基本语法结构

<ControlTemplate TargetType="{x:Type 控件类型}">
    <!-- 定义视觉树 -->
    <Border Background="{TemplateBinding Background}"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}">
        <!--ContentPresenter：负责呈现控件内容-->
        <ContentPresenter />
    </Border>
</ControlTemplate>

关键点：使用 TemplateBinding 将模板属性绑定到控件属性

3. 修改控件模板的步骤（以 Button 为例）

<Button Content="Click Me">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <!-- 自定义外观（例：圆形按钮） -->
            <Grid>
                <Ellipse Fill="{TemplateBinding Background}" />
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Grid>
        </ControlTemplate>
    </Button.Template>
</Button>

4. 关键组件

ContentPresenter：占位符，显示控件的内容（如按钮文本）。

ItemsPresenter：用于项控件（如 ListBox）显示子项。

TemplateBinding：将模板属性绑定到控件的依赖属性。

5. 自定义 CheckBox

<Window x:Class="WpfApp3.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"
        xmlns:local="clr-namespace:WpfApp3"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <Style TargetType="CheckBox">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="CheckBox">
                        <StackPanel Orientation="Horizontal">
                            <Border x:Name="box" Width="20" Height="20" Background="White" BorderBrush="Gray" BorderThickness="1"/>
                            <ContentPresenter x:Name="contentPresenter" Margin="{TemplateBinding Margin}"/>
                        </StackPanel>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter TargetName="box" Property="Background" Value="Green"/>
                                <Setter TargetName="contentPresenter" Property="TextElement.Foreground" Value="Green"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <StackPanel>
            <CheckBox Content="CheckBox" Margin="10" />
        </StackPanel>
    </Grid>
</Window>