WPF、控件模板(ControlTemplate)和数据模板(DataTemplate)

前言

在 WPF 中，控件种类丰富且功能非常完善。一个显著的优点是 WPF 提供了强大的自定义能力和灵活的用户界面表现，能够满足各种复杂的应用需求。其中，ControlTemplate 和 DataTemplate 是两个非常重要的概念，分别用于自定义控件的外观和定义数据的展示方式。

控件模板(ControlTemplate)

ControlTemplate 主要用于自定义控件的外观，而不改变控件的行为。由于WPF默认控件的样式不是特别美观，ControlTemplate 它允许自定义控件的视觉元素，例如按钮的外观、文本框的边框等等，而不需要改变控件的内部逻辑或数据。ControlTemplate 也是一个 XAML 模板。

基本语法

<ControlTemplate x:Key="CustomerTemplate" TargetType="{x:Type 控件类型}">

</ControlTemplate>

ControlTemplate有两个重要的属性，VisualTree另一个是Triggers。

• VisualTree，定义模板的视觉树结构，其实我们就是使用这个属性来描述控件的外观的。
• Triggers，触发器列表，里面包含一些触发器Trigger，我们可以定制这个触发器列表来使控件对外界的刺激发生反应，比如鼠标经过时文本变成粗体等。

下面我就基于比较常用的Button来演示一下，如何自定义Button样式。

<Window x:Class="WpfApp1.ControlTemplateWindow"
        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:WpfApp1"
        mc:Ignorable="d"
        Title="ControlTemplateWindow" Height="450" Width="800">

    <Window.Resources>
    </Window.Resources>
    
    <Grid>

        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="100"/>
        </Grid.ColumnDefinitions>

        <Button Grid.Column="0" Grid.Row="0" Content="默认按钮" Margin="0 10 0 0"></Button>

        <Button Grid.Column="2" Grid.Row="0" Content="自定义按钮1" Foreground="White" FontSize="12" FontWeight="Bold" Margin="0 10 0 0" Cursor="Hand">
            <Button.Style>
                <Style TargetType="Button">
                    <Setter Property="Background" Value="#409eff"/>
                    <Setter Property="BorderBrush" Value="White"/>
                </Style>
            </Button.Style>
            <Button.Template>
                <ControlTemplate TargetType="Button">
                    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="7">
                        <Grid>
                            <!--Rectangle是用于绘制矩形，Fill填充颜色，RadiusX/Y 是绘制矩形的CornerRadius，Opacity透明度 -->
                            <Rectangle Name="CustomerOverlay" Fill="White" Opacity="0" RadiusX="7" RadiusY="7" />
                            <Rectangle Name="CustomerPressed" Fill="Black" Opacity="0" RadiusX="7" RadiusY="7" />
                            <!-- 按钮的内容 -->
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Grid>
                    </Border>
                    <!-- 触发器 -->
                    <ControlTemplate.Triggers>
                        <!-- 点击按钮时触发 -->
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="CustomerPressed" Property="Opacity" Value="0.3"/>
                        </Trigger>
                        <!-- 鼠标移动到按钮时触发 -->
                        <Trigger Property="Button.IsMouseOver" Value="True">
                            <Setter TargetName="CustomerOverlay" Property="Opacity" Value="0.2"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Button.Template>
        </Button>

    </Grid>
</Window>

代码看着有点多，其实很简单，复制到自己本地，就可以运行，大家可以试一下。

简单解释下代码：

• ControlTemplate：我们定义了一个简单的ControlTemplate，该模板的目标类型是Button。
• Grid：定义一个布局（类似HTML的div），该布局中就是具体的自定义样式的内容。里面我加了两个图层，一个是在鼠标悬停时展示，另一个是鼠标点击按钮时展示。我在Grid外面还包了一个Border边框。
• ContentPresenter：这是一个占位符，用来显示按钮的内容。它确保我们可以在按钮中显示文本或其他控件。
• TemplateBinding：用于将模板中控件的某个属性绑定到其父控件的某个属性。在此示例中，BorderBrush绑定到按钮的BorderBrush、Background属性。
• Triggers：触发器，具体每个控件的触发器会不同，大家可以参考微软官网中WPF具体每个控件模板。

需要注意的是，ControlTemplate中的内容一般放到Window.Resources中。

具体执行效果如下所示：

当鼠标悬停在按钮上时，按钮会显示一个高亮图层；点击按钮后，会展示一个新的图层效果。这是基于element-plus按钮组件的样式用WPF实现的，下面我把element-plus上比较常用的按钮组件，用WPF实现看看效果。

<Window x:Class="WpfApp1.ControlTemplateWindow"
        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:WpfApp1"
        mc:Ignorable="d"
        Title="ControlTemplateWindow" Height="450" Width="800">

    <Window.Resources>
        <ControlTemplate x:Key="CustomButtonTemplate" TargetType="Button">
            <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="7">
                <Grid>
                    <!-- Rectangle用于绘制矩形，Fill填充颜色，RadiusX/Y绘制矩形的CornerRadius，Opacity透明度 -->
                    <Rectangle Name="CustomerOverlay" Fill="White" Opacity="0" RadiusX="7" RadiusY="7" />
                    <Rectangle Name="CustomerPressed" Fill="Black" Opacity="0" RadiusX="7" RadiusY="7" />
                    <!-- 按钮的内容 -->
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Grid>
            </Border>
            <!-- 触发器 -->
            <ControlTemplate.Triggers>
                <!-- 点击按钮时触发 -->
                <Trigger Property="IsPressed" Value="True">
                    <Setter TargetName="CustomerPressed" Property="Opacity" Value="0.3"/>
                </Trigger>
                <!-- 鼠标移动到按钮时触发 -->
                <Trigger Property="Button.IsMouseOver" Value="True">
                    <Setter TargetName="CustomerOverlay" Property="Opacity" Value="0.2"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
        
        <ControlTemplate  x:Key="CustomIconButtonTemplate" TargetType="Button">
            <Grid>
                <Ellipse Fill="{TemplateBinding Background}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"/>
                <Image Source="/images/收藏.png" Width="18" />

                <Ellipse Name="CustomerOverlay" Fill="White" Opacity="0" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"/>
                <Ellipse Name="CustomerPressed" Fill="Black" Opacity="0" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"/>
            </Grid>
            <!-- 触发器 -->
            <ControlTemplate.Triggers>
                <!-- 点击按钮时触发 -->
                <Trigger Property="IsPressed" Value="True">
                    <Setter TargetName="CustomerPressed" Property="Opacity" Value="0.3"/>
                </Trigger>
                <!-- 鼠标移动到按钮时触发 -->
                <Trigger Property="Button.IsMouseOver" Value="True">
                    <Setter TargetName="CustomerOverlay" Property="Opacity" Value="0.2"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

        <ControlTemplate x:Key="CustomImageButtonTemplate" TargetType="Button">
            <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="7">
                <Grid>
                    <Rectangle Name="CustomerOverlay" Fill="White" Opacity="0" RadiusX="7" RadiusY="7" />
                    <Rectangle Name="CustomerPressed" Fill="Black" Opacity="0" RadiusX="7" RadiusY="7" />
                    <!-- 按钮的内容 -->
                    <WrapPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                        <ContentPresenter Content="下载" VerticalAlignment="Center" Margin="0 0 8 0"/>
                        <Image Source="/images/下载.png" Width="15" />
                    </WrapPanel>
                </Grid>
            </Border>
            <!-- 触发器 -->
            <ControlTemplate.Triggers>
                <!-- 点击按钮时触发 -->
                <Trigger Property="IsPressed" Value="True">
                    <Setter TargetName="CustomerPressed" Property="Opacity" Value="0.3"/>
                </Trigger>
                <!-- 鼠标移动到按钮时触发 -->
                <Trigger Property="Button.IsMouseOver" Value="True">
                    <Setter TargetName="CustomerOverlay" Property="Opacity" Value="0.2"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Window.Resources>
    
    <Grid>

        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="100"/>
        </Grid.ColumnDefinitions>

        <Button Grid.Column="0" Grid.Row="0" Content="默认按钮" Margin="0 10 0 0"></Button>

        <Button Grid.Column="2" Grid.Row="0" 
                Content="自定义按钮1" 
                Foreground="White" 
                FontSize="12" 
                FontWeight="Bold" 
                Background ="#409eff"
                BorderBrush="White"
                Margin="0 10 0 0" 
                Cursor="Hand"
                Template="{StaticResource CustomButtonTemplate}">
        </Button>

        <Button Grid.Column="4" Grid.Row="0" 
                Margin="0 10 0 0" 
                Background="#e6a23c"
                Width="30"
                Height="30"
                Cursor="Hand"
                Template="{StaticResource CustomIconButtonTemplate}">
        </Button>

        <Button Grid.Column="6" Grid.Row="0" 
                Margin="0 10 0 0" 
                Foreground="White"
                Background="#409eff"
                BorderBrush="White"
                Cursor="Hand"
                Template="{StaticResource CustomImageButtonTemplate}">
        </Button>

    </Grid>
</Window>

具体效果如下所示：

还有更多炫酷的自定义样式，比如添加一个动画效果，但是这种样式，对于我目前刚刚学习WPF来说不太需要，等后面需要用到再了解。

数据模板(DataTemplate)

ControlTemplate 主要用于自定义控件的外观，它改变控件的整体结构和样式，通常用于修改控件的框架（例如按钮的样式）。而当控件内部需要显示与数据相关的内容时，就需要使用 DataTemplate。DataTemplate 定义了数据对象的外观，控制了数据项的可视化方式，特别是在使用像 ItemsControl、ListBox 或 DataGrid 等控件时，DataTemplate 会决定如何呈现绑定的数据项。

基本语法

<DataTemplate x:Key="CustomerDataTemplate">
   
</DataTemplate>

DataTemplate重要属性：

• VisualTree，定义每个数据项的样式。
• Triggers，触发器当绑定的数据满足某个条件时，可以去设置一些控件的属性值，这个与ControlTemplate中的Triggers还不一样。

下面我将以ListBox为例，自定义ListBox的样式

前端页面代码：

<Window x:Class="WpfApp1.DataTemplateWindow"
        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:WpfApp1"
        mc:Ignorable="d"
        Title="DataTemplateWindow" Height="450" Width="800">

    <Window.Resources>
       
    </Window.Resources>
    
    <Grid>

        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition/>
        </Grid.RowDefinitions>

        <ListBox Grid.Row="0" 
                 x:Name="DefaultListBox" 
                 HorizontalContentAlignment="Stretch"
                 >
        </ListBox>

        <ListBox Grid.Row="1" x:Name="CustomerListBox" HorizontalContentAlignment="Stretch">
            <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Setter Property="Margin" Value="0 10 0 0"/>
                    <!-- 去掉背景 -->
                    <Setter Property="Background" Value="Transparent"/>
                    <Setter Property="BorderBrush" Value="Transparent"/>
                    <Setter Property="BorderThickness" Value="0"/>
                    
                </Style>
            </ListBox.ItemContainerStyle>
            <!-- ListBox中的内容排列方向 -->
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <WrapPanel Orientation="Horizontal"  >
                        <Border  Background="{Binding TagColor}" CornerRadius="3" Width="70" Height="25" >
                            <TextBlock 
                                   Text="{Binding TagName}" 
                                   Width="70" 
                                   Height="25" 
                                   TextAlignment="Center"
                                   Foreground="White"
                                   Padding="0 5 0 0"
                                   />
                        </Border>
                        <Image Source="/images/删除.png" x:Name="ShowImg" Width="15" Margin="-18 0 0 0" Visibility="Hidden"  Cursor="Hand" />

                    </WrapPanel>

                    <DataTemplate.Triggers>
                        <DataTrigger Binding="{Binding TagDelete}" Value="True">
                            <Setter TargetName="ShowImg" Property="Visibility" Value="Visible"/>
                        </DataTrigger>
                    </DataTemplate.Triggers>
                    
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>


    </Grid>
</Window>

后台代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace WpfApp1
{
    /// <summary>
    /// DataTemplateWindow.xaml 的交互逻辑
    /// </summary>
    public partial class DataTemplateWindow : Window
    {
        public DataTemplateWindow()
        {
            InitializeComponent();

            var tagList = new List<TagInfo>()
            {
                new TagInfo()
                {
                    TagName = "Tag 1",
                    TagColor = "#409eff"
                },
                new TagInfo()
                {
                    TagName = "Tag 2",
                    TagColor = "#67c23a",
                    TagDelete = true
                },
                new TagInfo()
                {
                    TagName = "Tag 3",
                    TagColor = "#909399"
                },
            };

            DefaultListBox.ItemsSource = tagList;
            CustomerListBox.ItemsSource = tagList;
        }
    }

    public class TagInfo
    {
        public string TagName { get; set; }
        public string TagColor { get; set; }
        public bool TagDelete { get; set; } = false;
        public override string ToString()
        {
            return TagName;  // 使用 TagName 作为默认显示内容
        }
    }
}

执行效果：

代码也很简单，稍微解释一下：

• ItemContainerStyle，设置每个数据项的样式。
• ItemsPanel，设置数据集的排列方向。
• ItemTemplate，设置每个数据项的具体自定义样式，里面就有DataTemplate。

需要注意的是，上面说的ItemContainerStyle、ItemsPanel、ItemTemplate这并不是每个数据集的控件都支持，具体还需要看官网每个控件支持的是哪些。

DataTemplate中的内容一般也是放到Window.Resources中。

<Window x:Class="WpfApp1.DataTemplateWindow"
        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:WpfApp1"
        mc:Ignorable="d"
        Title="DataTemplateWindow" Height="450" Width="800">

    <Window.Resources>
        <Style x:Key="CustomListBoxItemStyle" TargetType="ListBoxItem">
            <Setter Property="Margin" Value="0 10 0 0"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>
        </Style>

        <!-- ItemTemplate -->
        <DataTemplate x:Key="CustomItemTemplate">
            <WrapPanel Orientation="Horizontal">
                <Border Background="{Binding TagColor}" CornerRadius="3" Width="70" Height="25">
                    <TextBlock Text="{Binding TagName}" Width="70" Height="25" TextAlignment="Center"
                               Foreground="White" Padding="0 5 0 0"/>
                </Border>
                <Image Source="/images/删除.png" x:Name="ShowImg" Width="15" Margin="-18 0 0 0"
                       Visibility="Hidden" Cursor="Hand"/>
            </WrapPanel>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding TagDelete}" Value="True">
                    <Setter TargetName="ShowImg" Property="Visibility" Value="Visible"/>
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </Window.Resources>
    
    <Grid>

        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition/>
        </Grid.RowDefinitions>

        <ListBox Grid.Row="0" 
                 x:Name="DefaultListBox" 
                 HorizontalContentAlignment="Stretch"
                 >
        </ListBox>

        <ListBox Grid.Row="1" x:Name="CustomerListBox" HorizontalContentAlignment="Stretch"
                 ItemContainerStyle="{StaticResource CustomListBoxItemStyle}"
                 ItemTemplate="{StaticResource CustomItemTemplate}">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>


    </Grid>
</Window>

总结

在 WPF 中，ControlTemplate和DataTemplate 是非常强大且重要的功能，它们分别用于自定义控件的外观和数据展示的方式。只有在用到某些控件需要自定义样式的时候，再具体了解，因为每个控件自定义模板是不一样的，本篇文章只是根据Button和ListBox简单实现这两个控件的自定义样式。如果有不同的需求，大家具体可以看下微软的模板库，里面有每个控件模板涉及需要修改的点。

后面我会用每个控件都实现自定义样，包括下拉控件、分页控件、时间控件等等，实现效果以经常使用的场景为主。

控件样式和模板 - WPF .NET Framework | Microsoft Learn