前言
在 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
