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. 区别对比

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