WPF ControlTemplate和DataTemplate

在 WPF 中，ControlTemplate 和 DataTemplate 是两个非常重要的概念，它们分别用于定义控件的外观和数据对象的显示方式。以下是关于它们的详细讲解，包括定义、作用、使用场景以及实现示例。

1. ControlTemplate

1.1 定义

ControlTemplate 定义了控件的视觉结构和行为。它允许你自定义控件的外观，而不改变其功能。

1.2 作用

替换控件的默认外观（如按钮、文本框等）。
自定义控件的布局和组成元素。
提供一种方式将控件的逻辑与外观分离。

1.3 使用场景

需要为标准控件（如 Button、TextBox 等）创建全新的外观。
需要自定义复杂的控件样式，例如带有动画或特殊效果的控件。
需要在不同主题之间切换控件的外观。

1.4 核心概念

TargetType：指定模板适用的控件类型。
TemplateBinding：将模板中的属性绑定到控件的属性。
ContentPresenter：用于显示控件的内容（如按钮的文本）。
触发器（Triggers）：根据条件动态改变控件的外观或行为。

1.5 示例：自定义按钮外观

以下是一个使用 ControlTemplate 自定义按钮外观的示例：

XAML 代码

<Window x:Class="WpfApp.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="ControlTemplate Example" Height="350" Width="525"><Window.Resources><!-- 定义自定义按钮模板 --><ControlTemplate x:Key="CustomButtonTemplate" TargetType="Button"><Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="10"><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" /></Border></ControlTemplate></Window.Resources><Grid><Button Template="{StaticResource CustomButtonTemplate}" Content="Click Me" Background="LightGreen" BorderBrush="DarkGreen" BorderThickness="2" Width="150" Height="50" HorizontalAlignment="Center" VerticalAlignment="Center" /></Grid>
</Window>

关键点：

ControlTemplate 的 TargetType 指定了模板适用的控件类型（这里是 Button）。
使用 TemplateBinding 将模板中的属性（如 Background、BorderBrush）绑定到控件的属性。
ContentPresenter 用于显示按钮的内容（如文本 “Click Me”）。

2. DataTemplate

2.1 定义

DataTemplate 定义了数据对象的显示方式。它通常用于绑定复杂数据对象时，指定如何在 UI 中呈现这些数据。

2.2 作用

自定义数据对象的显示形式。
用于 ItemsControl（如 ListBox、ComboBox 等）中，定义每个数据项的外观。
提供一种方式将数据模型与视图分离。

2.3 使用场景

需要为复杂的数据对象（如类实例）创建自定义的显示方式。
在 ListBox 或 ComboBox 中显示多个数据项时，需要统一的外观。
需要动态生成 UI 元素以反映数据的变化。

2.4 核心概念

DataType：指定模板适用的数据类型。
{Binding}：将数据对象的属性绑定到 UI 元素。
DataTemplate 的自动应用：当数据对象与 DataType 匹配时，WPF 会自动应用对应的 DataTemplate。

2.5 示例：自定义数据项的显示

假设我们有一个简单的数据类 Person：

C# 数据类

public class Person
{public string Name { get; set; }public int Age { get; set; }
}

XAML 使用

<Window x:Class="WpfApp.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:WpfApp"Title="DataTemplate Example" Height="350" Width="525"><Window.Resources><!-- 定义 DataTemplate --><DataTemplate DataType="{x:Type local:Person}"><StackPanel Orientation="Horizontal" Margin="5"><TextBlock Text="{Binding Name}" FontWeight="Bold" /><TextBlock Text=", " /><TextBlock Text="{Binding Age}" FontStyle="Italic" /></StackPanel></DataTemplate></Window.Resources><Grid><ListBox ItemsSource="{Binding}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="200"><ListBox.ItemsSource><x:Array Type="{x:Type local:Person}"><local:Person Name="Alice" Age="30" /><local:Person Name="Bob" Age="25" /><local:Person Name="Charlie" Age="35" /></x:Array></ListBox.ItemsSource></ListBox></Grid>
</Window>

关键点：

DataTemplate 的 DataType 指定了模板适用的数据类型（这里是 Person）。
使用 {Binding} 将数据对象的属性（如 Name 和 Age）绑定到 TextBlock 的 Text 属性。
ListBox 会自动应用 DataTemplate 来显示每个 Person 对象。

3. 区别对比

特性	`ControlTemplate`	`DataTemplate`
定义对象	控件的外观（如按钮、文本框等）	数据对象的显示形式
使用场景	自定义控件的视觉结构	自定义数据对象的显示方式
绑定机制	使用 `TemplateBinding` 绑定控件属性	使用 `{Binding}` 绑定数据属性
典型控件	`Button`、`TextBox` 等	`ListBox`、`ComboBox`、`ContentControl` 等
是否与数据相关	不直接与数据相关	与数据对象直接相关

4. 高级用法

4.1 动态选择模板

可以使用 DataTemplateSelector 动态选择不同的 DataTemplate，根据数据内容决定使用哪个模板。

示例：动态选择模板

public class PersonTemplateSelector : DataTemplateSelector
{public DataTemplate AdultTemplate { get; set; }public DataTemplate ChildTemplate { get; set; }public override DataTemplate SelectTemplate(object item, DependencyObject container){if (item is Person person){return person.Age >= 18 ? AdultTemplate : ChildTemplate;}return null;}
}

XAML 使用

<Window.Resources><DataTemplate x:Key="AdultTemplate"><TextBlock Text="{Binding Name}" Foreground="Blue" /></DataTemplate><DataTemplate x:Key="ChildTemplate"><TextBlock Text="{Binding Name}" Foreground="Red" /></DataTemplate><local:PersonTemplateSelector x:Key="PersonTemplateSelector" AdultTemplate="{StaticResource AdultTemplate}" ChildTemplate="{StaticResource ChildTemplate}" />
</Window.Resources>
<ListBox ItemTemplateSelector="{StaticResource PersonTemplateSelector}" />

5. 总结

ControlTemplate：
- 用于定义控件的外观。
- 替换控件的默认视觉结构。
- 使用 TemplateBinding 绑定控件属性。
DataTemplate：
- 用于定义数据对象的显示方式。
- 适用于绑定复杂数据对象。
- 使用 {Binding} 绑定数据属性。

通过合理使用 ControlTemplate 和 DataTemplate，你可以构建出功能强大且外观精美的 WPF 应用程序。