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 代码

xml 复制代码

<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# 数据类

csharp 复制代码

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

XAML 使用

xml 复制代码

<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，根据数据内容决定使用哪个模板。

示例：动态选择模板

csharp 复制代码

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 使用

xml 复制代码

<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 应用程序。