完整教程：WPF 数据模板深入概述

深入探讨 WPF 数据模板（DataTemplate），并结合之前提供的 WPF 布局基础、数据绑定技术、样式基础、触发器使用、控件模板、Prism 框架、MVVM 模式、动态模块加载 和 模块卸载技术 的上下文，提供详细的讲解、代码示例、测试代码、适用场景及使用方法。以下将全面介绍 WPF 数据模板，包括其定义、结构、触发器集成、动画支持、数据模板选择器（DataTemplateSelector）、与控件模板的结合以及模块化应用，并通过扩展的实时消息查看器示例（基于之前的 WpfLayoutDemo 项目）展示数据模板的实际应用。内容将结构清晰、详尽且易懂，适合从初学者到高级开发者的需求，全程使用讲解。

---

1. WPF 数据模板深入概述

1.1 数据模板简介

WPF 数据模板（DataTemplate）是用于定义数据对象（如 ViewModel 或模型对象）在 UI 中的可视化表示的机制。数据模板允许开发者指定如何将数据对象的属性映射到视觉元素（如 TextBlock、Image），并可结合触发器、样式、动画和数据绑定实现动态、交互式的 UI。数据模板是 MVVM 模式中连接数据和视图的核心工具，广泛用于 ItemsControl（如 ListBox、ComboBox）或 ContentControl 中。数据模板的主要特点包括：

• 数据驱动：根据数据对象的属性动态生成 UI。
• 灵活性：支持从简单文本到复杂布局的任意视觉结构。
• 触发器支持：通过 DataTrigger 或 MultiDataTrigger 响应数据变化。
• 选择器支持：通过 DataTemplateSelector 动态选择模板。
• 模块化：支持在模块化应用中动态加载和卸载。
• 与控件模板结合：通过 ContentPresenter.ContentTemplate 嵌套在控件模板中。

1.2 数据模板核心概念

1. 数据模板定义：
   • 使用 <DataTemplate> 元素，指定数据对象的可视化结构。
   • 可设置 DataType 属性，自动应用于指定类型的数据对象。
2. 数据绑定：
   • 使用 {Binding} 将模板中的视觉元素绑定到数据对象属性。
   • 支持转换器（IValueConverter）处理复杂数据逻辑。
3. 触发器：
   • 在 <DataTemplate.Triggers> 中使用 DataTrigger 或 MultiDataTrigger。
   • 示例：根据消息优先级更改文本颜色。
4. DataTemplateSelector：
   • 继承 DataTemplateSelector，根据数据对象属性动态选择模板。
   • 示例：高优先级消息使用特殊模板。
5. 资源字典：
   • 数据模板通常定义在资源字典中（如 CommonStyles.xaml），支持跨模块共享。
6. 视觉树：
   • 数据模板定义数据对象的视觉结构，可包含任意 WPF 元素（如 Grid、TextBlock）。
7. 与控件模板的区别：
   • 数据模板：定义数据对象的可视化表示，作用于数据（如 ViewModel）。
   • 控件模板：定义控件本身的视觉结构，作用于控件（如 Button）。

1.3 适用场景

数据模板类型	适用场景	示例
简单数据模板	显示单一数据对象	显示消息内容和时间
复杂数据模板	显示复杂数据结构	消息卡片，包含内容、时间、优先级和按钮
触发器模板	数据驱动的动态 UI	高优先级消息显示红色
选择器模板	根据数据动态选择模板	高优先级消息使用不同卡片样式
模块模板	模块化 UI	模块视图显示特定消息模板
动画模板	动态交互效果	消息进入时淡入动画

1.4 与上下文的集成

• Prism 框架：数据模板在区域（Region）视图中显示模块化数据。
• MVVM 模式：通过 Binding 绑定到 ViewModel 属性，支持动态更新。
• 动态模块加载：模块视图使用独立数据模板，加载时应用。
• 模块卸载：卸载模块时清理模板资源。
• 数据绑定：模板通过 Binding 与数据对象交互。
• 样式和触发器：模板内嵌样式和触发器，增强交互性。
• 控件模板：数据模板通过 ContentPresenter.ContentTemplate 嵌套在控件模板中。
• 布局：模板与布局容器（如 Grid、StackPanel）结合，优化视觉结构。

1.5 技术要点

• 数据绑定：依赖 Binding 和 INotifyPropertyChanged 实现动态更新。
• 触发器：支持 DataTrigger 和 MultiDataTrigger，响应数据变化。
• 选择器：使用 DataTemplateSelector 动态选择模板。
• 动画：通过 EventTrigger 和 Storyboard 实现交互动画。
• 性能：避免复杂视觉树，优化数据绑定和渲染。
• 模块化：模块模板定义在独立资源字典，卸载时清理资源。
• 调试：使用 Visual Studio 调试工具检查绑定和视觉树。

---

2. 环境设置

基于之前的 WpfLayoutDemo 项目，扩展支持数据模板功能。以下是必要的环境设置：

2.1 NuGet 包

确保项目包含以下 NuGet 包：

<PackageReference Include="Prism.Unity" Version="9.0.401-pre" />
<PackageReference Include="Newtonsoft.Json" Version="13.0.3" />

2.2 项目结构

扩展之前的项目结构，添加数据模板相关代码：

• 主项目（WpfLayoutDemo）：
  • App.xaml, App.xaml.cs
  • MainWindow.xaml, MainWindow.xaml.cs
  • MainViewModel.cs（扩展支持模板相关属性）
  • Models：IMessageItem.cs, Message.cs
  • Events：MessageReceivedEvent.cs
  • Commands：AsyncRelayCommand.cs
  • Converters：PriorityToColorConverter.cs, BooleanToVisibilityConverter.cs, DateTimeToRecentConverter.cs
  • ValidationRules：MessageValidationRule.cs
  • Views：GridView.xaml, DataBindingView.xaml, StyleView.xaml, TriggerView.xaml, TemplateView.xaml, DataTemplateView.xaml（更新）
  • Resources：CommonStyles.xaml（更新数据模板）
  • Selectors：MessageTemplateSelector.cs
  • ModuleManager：ModuleManager.cs
• 模块项目：
  • MessageModule（独立 DLL）
    • MessageModule.cs
    • MessageView.xaml, MessageView.xaml.cs
    • MessageViewModel.cs
    • ModuleStyles.xaml（更新数据模板）
• 配置文件：Modules.json
• 模块目录：bin\Debug\net8.0-windows\Modules

2.3 配置文件（Modules.json）

保持不变：

[
{
"ModuleName": "MessageModule",
"AssemblyPath": "Modules\\MessageModule.dll",
"LoadOnDemand": false
}
]

---

3. 代码实现

以下代码扩展之前的实时消息查看器，展示 WPF 数据模板的各种应用，包括简单模板、复杂模板、触发器、动画、选择器和模块化模板。代码基于 WpfLayoutDemo 项目，重点展示数据模板的功能。

3.1 数据模板选择器（MessageTemplateSelector.cs）

实现动态模板选择：

using System.Windows;
using System.Windows.Controls;
namespace WpfLayoutDemo
{
public class MessageTemplateSelector : DataTemplateSelector
{
public DataTemplate HighPriorityTemplate { get; set; }
public DataTemplate NormalTemplate { get; set; }
public DataTemplate RecentHighPriorityTemplate { get; set; }
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
if (item is IMessageItem message)
{
if (message.Priority == 10 && message.Timestamp > DateTime.Now.AddMinutes(-5))
return RecentHighPriorityTemplate;
if (message.Priority == 10)
return HighPriorityTemplate;
return NormalTemplate;
}
return NormalTemplate;
}
}
}

3.2 更新资源字典（CommonStyles.xaml）

添加数据模板定义：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:WpfLayoutDemo">
<!-- 高优先级消息模板 -->
    <DataTemplate x:Key="HighPriorityMessageTemplate" DataType="{x:Type local:IMessageItem}">
      <Border Background="Pink" BorderBrush="Red" BorderThickness="2" CornerRadius="5" Margin="5" Padding="5">
      <StackPanel>
        <TextBlock Text="{Binding Content}" FontWeight="Bold" Foreground="Red" FontSize="14" />
        <TextBlock Text="{Binding Timestamp, StringFormat='时间: {0:yyyy-MM-dd HH:mm:ss}'}" FontSize="12" />
        <TextBlock Text="{Binding Priority, StringFormat='优先级: {0}'}" FontSize="12" />
      </StackPanel>
      <Border.Triggers>
        <!-- EventTrigger: 鼠标进入动画 -->
            <EventTrigger RoutedEvent="Border.MouseEnter">
            <BeginStoryboard>
              <Storyboard>
                  <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
                  To="1.05" Duration="0:0:0.2" />
                  <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
                  To="1.05" Duration="0:0:0.2" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>
            <EventTrigger RoutedEvent="Border.MouseLeave">
            <BeginStoryboard>
              <Storyboard>
                  <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
                  To="1.0" Duration="0:0:0.2" />
                  <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
                  To="1.0" Duration="0:0:0.2" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>
        </Border.Triggers>
        <Border.RenderTransform>
          <ScaleTransform ScaleX="1" ScaleY="1" />
        </Border.RenderTransform>
      </Border>
    </DataTemplate>
    <!-- 最近高优先级消息模板 -->
        <DataTemplate x:Key="RecentHighPriorityMessageTemplate" DataType="{x:Type local:IMessageItem}">
          <Border Background="LightCoral" BorderBrush="DarkRed" BorderThickness="2" CornerRadius="5" Margin="5" Padding="5">
          <StackPanel>
            <TextBlock Text="{Binding Content}" FontWeight="Bold" Foreground="White" FontSize="14" />
            <TextBlock Text="{Binding Timestamp, StringFormat='时间: {0:yyyy-MM-dd HH:mm:ss}'}" FontSize="12" Foreground="White" />
            <TextBlock Text="{Binding Priority, StringFormat='优先级: {0}'}" FontSize="12" Foreground="White" />
          </StackPanel>
          <Border.Triggers>
              <EventTrigger RoutedEvent="Border.Loaded">
              <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Opacity"
                    From="0" To="1" Duration="0:0:0.5" />
                </Storyboard>
              </BeginStoryboard>
            </EventTrigger>
          </Border.Triggers>
        </Border>
      </DataTemplate>
      <!-- 普通消息模板 -->
          <DataTemplate x:Key="NormalMessageTemplate" DataType="{x:Type local:IMessageItem}">
            <Border Background="White" BorderBrush="Gray" BorderThickness="1" CornerRadius="3" Margin="5" Padding="5">
            <StackPanel>
              <TextBlock Text="{Binding Content}" FontSize="12" />
              <TextBlock Text="{Binding Timestamp, StringFormat='时间: {0:yyyy-MM-dd HH:mm:ss}'}" FontSize="10" />
              <TextBlock Text="{Binding Priority, StringFormat='优先级: {0}'}" FontSize="10" />
            </StackPanel>
          </Border>
        </DataTemplate>
        <!-- 按钮样式 -->
            <Style x:Key="BaseButtonStyle" TargetType="Button">
            <Setter Property="Background" Value="#0078D7" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="FontSize" Value="14" />
            <Setter Property="Padding" Value="10,5" />
            <Setter Property="Margin" Value="5" />
            <Setter Property="BorderThickness" Value="0" />
            <Style.Triggers>
              <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="#005EA6" />
                <Setter Property="Cursor" Value="Hand" />
              </Trigger>
              <Trigger Property="IsPressed" Value="True">
                <Setter Property="Background" Value="#003D6E" />
              </Trigger>
            </Style.Triggers>
          </Style>
          <!-- 列表项控件模板 -->
              <ControlTemplate x:Key="MessageListItemTemplate" TargetType="ListBoxItem">
                <Border x:Name="ItemBorder"
                Background="{TemplateBinding Background}"
                BorderBrush="Gray"
                BorderThickness="1"
                Margin="5"
                Padding="5"
                CornerRadius="3">
                <ContentPresenter Content="{TemplateBinding Content}"
                ContentTemplate="{TemplateBinding ContentTemplate}" />
              <Border.Triggers>
                  <Trigger Property="IsSelected" Value="True">
                  <Setter Property="Background" Value="LightBlue" />
                </Trigger>
              </Border.Triggers>
            </Border>
          </ControlTemplate>
          <!-- 列表项样式 -->
              <Style x:Key="MessageListItemStyle" TargetType="ListBoxItem">
              <Setter Property="Template" Value="{StaticResource MessageListItemTemplate}" />
            </Style>
          </ResourceDictionary>

3.3 更新模块资源字典（ModuleStyles.xaml）

添加模块特定数据模板：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:WpfLayoutDemo">
<!-- 模块消息模板 -->
    <DataTemplate x:Key="ModuleMessageTemplate" DataType="{x:Type local:IMessageItem}">
      <Border Background="#E6F3E6" BorderBrush="Green" BorderThickness="2" CornerRadius="5" Margin="5" Padding="5">
      <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*" />
          <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
          <StackPanel Grid.Column="0">
          <TextBlock Text="{Binding Content}" FontSize="14" Foreground="DarkGreen" />
          <TextBlock Text="{Binding Timestamp, StringFormat='时间: {0:yyyy-MM-dd HH:mm:ss}'}" FontSize="12" />
          <TextBlock Text="{Binding Priority, StringFormat='优先级: {0}'}" FontSize="12" />
        </StackPanel>
          <Button Grid.Column="1" Content="高优先级" Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListBox}}, Path=DataContext.AddMessageCommand}"
          CommandParameter="{Binding Content}" Style="{StaticResource ModuleButtonStyle}" />
      </Grid>
      <Border.Triggers>
        <!-- DataTrigger: 高优先级 -->
            <DataTrigger Binding="{Binding Priority}" Value="10">
            <Setter Property="Background" Value="#C8E6C9" />
            <Setter Property="BorderBrush" Value="DarkGreen" />
          </DataTrigger>
          <!-- EventTrigger: 加载动画 -->
              <EventTrigger RoutedEvent="Border.Loaded">
              <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Opacity"
                    From="0" To="1" Duration="0:0:0.5" />
                </Storyboard>
              </BeginStoryboard>
            </EventTrigger>
          </Border.Triggers>
        </Border>
      </DataTemplate>
      <!-- 模块按钮样式 -->
          <Style x:Key="ModuleButtonStyle" TargetType="Button">
          <Setter Property="Background" Value="#28A745" />
          <Setter Property="Foreground" Value="White" />
          <Setter Property="FontSize" Value="14" />
          <Setter Property="Padding" Value="10,5" />
          <Setter Property="Margin" Value="5" />
          <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
              <Setter Property="Background" Value="#218838" />
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
              <Setter Property="Background" Value="#1E7E34" />
            </Trigger>
          </Style.Triggers>
        </Style>
      </ResourceDictionary>

3.4 更新 DataTemplateView.xaml

展示数据模板和选择器：

<UserControl x:Class="WpfLayoutDemo.DataTemplateView"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:WpfLayoutDemo">
<UserControl.Resources>
  <local:PriorityToColorConverter x:Key="PriorityToColorConverter" />
  <local:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
  <local:DateTimeToRecentConverter x:Key="DateTimeToRecentConverter" />
  <local:MessageValidationRule x:Key="MessageValidationRule" />
  <!-- 数据模板选择器 -->
      <local:MessageTemplateSelector x:Key="MessageTemplateSelector"
      HighPriorityTemplate="{StaticResource HighPriorityMessageTemplate}"
      NormalTemplate="{StaticResource NormalMessageTemplate}"
      RecentHighPriorityTemplate="{StaticResource RecentHighPriorityMessageTemplate}" />
    <!-- 动态按钮样式 -->
        <Style x:Key="DynamicButtonStyle" TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}">
        <Style.Triggers>
          <DataTrigger Binding="{Binding Theme}" Value="Dark">
            <Setter Property="Background" Value="#343A40" />
            <Setter Property="Foreground" Value="White" />
          </DataTrigger>
          <DataTrigger Binding="{Binding Theme}" Value="Light">
            <Setter Property="Background" Value="#F8F9FA" />
            <Setter Property="Foreground" Value="Black" />
          </DataTrigger>
        </Style.Triggers>
      </Style>
    </UserControl.Resources>
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>
      <TextBlock Grid.Row="0" Text="数据模板演示" FontSize="16" Margin="5" />
      <!-- 主题切换 -->
          <StackPanel Grid.Row="1" Orientation="Horizontal" Margin="5">
          <Button Content="默认主题" Command="{Binding SwitchThemeCommand}" CommandParameter="Default" Style="{StaticResource BaseButtonStyle}" />
          <Button Content="深色主题" Command="{Binding SwitchThemeCommand}" CommandParameter="Dark" Style="{StaticResource BaseButtonStyle}" />
          <Button Content="浅色主题" Command="{Binding SwitchThemeCommand}" CommandParameter="Light" Style="{StaticResource BaseButtonStyle}" />
        </StackPanel>
        <!-- 消息列表 -->
            <ListBox Grid.Row="2" ItemsSource="{Binding Messages}" ItemTemplateSelector="{StaticResource MessageTemplateSelector}"
            ItemContainerStyle="{StaticResource MessageListItemStyle}" MaxHeight="300" />
          <!-- 按钮 -->
              <StackPanel Grid.Row="3" Orientation="Horizontal">
              <Button Content="开始推送" Command="{Binding StartPushCommand}" Style="{StaticResource DynamicButtonStyle}" />
                <Button Content="取消" Command="{Binding CancelCommand}" Style="{StaticResource BaseButtonStyle}"
                Visibility="{Binding IsBusy, Converter={StaticResource BooleanToVisibilityConverter}}" />
              <Button Content="添加消息" Command="{Binding AddMessageCommand}" CommandParameter="测试消息" Style="{StaticResource DynamicButtonStyle}" />
            </StackPanel>
          </Grid>
        </UserControl>

3.5 更新模块（MessageView.xaml）

应用模块数据模板：

<UserControl x:Class="MessageModule.MessageView"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:WpfLayoutDemo">
<UserControl.Resources>
  <ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
      <ResourceDictionary Source="Resources/ModuleStyles.xaml" />
    </ResourceDictionary.MergedDictionaries>
  </ResourceDictionary>
</UserControl.Resources>
<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>
  <TextBlock Text="消息模块视图 (数据模板)" FontSize="16" Margin="5" />
    <ListBox Grid.Row="1" ItemsSource="{Binding Messages}" ItemTemplate="{StaticResource ModuleMessageTemplate}"
    ItemContainerStyle="{StaticResource MessageListItemStyle}" />
    <Button Grid.Row="2" Content="添加模块消息" Command="{Binding AddMessageCommand}" CommandParameter="模块消息"
    Style="{StaticResource ModuleButtonStyle}" />
</Grid>
</UserControl>

3.6 更新 MainWindow.xaml

确保包含所有视图导航按钮：

<Window x:Class="WpfLayoutDemo.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:prism="http://prismlibrary.com/"
  xmlns:local="clr-namespace:WpfLayoutDemo"
  Title="WPF 数据模板演示" Height="600" Width="800">
<Window.Resources>
  <local:PriorityToColorConverter x:Key="PriorityToColorConverter" />
  <local:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
  <local:DateTimeToRecentConverter x:Key="DateTimeToRecentConverter" />
</Window.Resources>
  <Grid Margin="10">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>
  <TextBlock Grid.Row="0" Text="{Binding Status}" FontSize="14" Margin="0,0,0,10" />
    <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,0,0,10">
    <Button Content="开始推送" Command="{Binding StartPushCommand}" Style="{StaticResource BaseButtonStyle}" />
    <Button Content="取消" Command="{Binding CancelCommand}" Style="{StaticResource BaseButtonStyle}" />
    <Button Content="Grid 视图" Command="{Binding NavigateCommand}" CommandParameter="GridView" Style="{StaticResource BaseButtonStyle}" />
    <Button Content="StackPanel 视图" Command="{Binding NavigateCommand}" CommandParameter="StackPanelView" Style="{StaticResource BaseButtonStyle}" />
    <Button Content="DockPanel 视图" Command="{Binding NavigateCommand}" CommandParameter="DockPanelView" Style="{StaticResource BaseButtonStyle}" />
    <Button Content="WrapPanel 视图" Command="{Binding NavigateCommand}" CommandParameter="WrapPanelView" Style="{StaticResource BaseButtonStyle}" />
    <Button Content="Canvas 视图" Command="{Binding NavigateCommand}" CommandParameter="CanvasView" Style="{StaticResource BaseButtonStyle}" />
    <Button Content="UniformGrid 视图" Command="{Binding NavigateCommand}" CommandParameter="UniformGridView" Style="{StaticResource BaseButtonStyle}" />
    <Button Content="VirtualizingStackPanel 视图" Command="{Binding NavigateCommand}" CommandParameter="VirtualizingStackPanelView" Style="{StaticResource BaseButtonStyle}" />
    <Button Content="数据绑定视图" Command="{Binding NavigateCommand}" CommandParameter="DataBindingView" Style="{StaticResource BaseButtonStyle}" />
    <Button Content="样式视图" Command="{Binding NavigateCommand}" CommandParameter="StyleView" Style="{StaticResource BaseButtonStyle}" />
    <Button Content="触发器视图" Command="{Binding NavigateCommand}" CommandParameter="TriggerView" Style="{StaticResource BaseButtonStyle}" />
    <Button Content="控件模板视图" Command="{Binding NavigateCommand}" CommandParameter="TemplateView" Style="{StaticResource BaseButtonStyle}" />
    <Button Content="数据模板视图" Command="{Binding NavigateCommand}" CommandParameter="DataTemplateView" Style="{StaticResource BaseButtonStyle}" />
    <Button Content="消息模块视图" Command="{Binding NavigateCommand}" CommandParameter="MessageView" Style="{StaticResource BaseButtonStyle}" />
    <Button Content="加载消息模块" Command="{Binding LoadModuleCommand}" CommandParameter="MessageModule" Style="{StaticResource BaseButtonStyle}" />
    <Button Content="卸载消息模块" Command="{Binding UnloadModuleCommand}" CommandParameter="MessageModule" Style="{StaticResource BaseButtonStyle}" />
  </StackPanel>
  <ContentControl Grid.Row="2" prism:RegionManager.RegionName="ContentRegion" />
</Grid>
</Window>

3.7 更新 App.xaml.cs

确保注册所有视图：

using Prism.Ioc;
using Prism.Modularity;
using Prism.Unity;
using System.Windows;
namespace WpfLayoutDemo
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
}
public class App : PrismApplication
{
protected override Window CreateShell()
{
return Container.Resolve<MainWindow>();
  }
  protected override void RegisterTypes(IContainerRegistry containerRegistry)
  {
  containerRegistry.Register<MainViewModel>();
    containerRegistry.RegisterSingleton<ModuleManager>();
      containerRegistry.RegisterForNavigation<GridView>();
        containerRegistry.RegisterForNavigation<StackPanelView>();
          containerRegistry.RegisterForNavigation<DockPanelView>();
            containerRegistry.RegisterForNavigation<WrapPanelView>();
              containerRegistry.RegisterForNavigation<CanvasView>();
                containerRegistry.RegisterForNavigation<UniformGridView>();
                  containerRegistry.RegisterForNavigation<VirtualizingStackPanelView>();
                    containerRegistry.RegisterForNavigation<DataBindingView>();
                      containerRegistry.RegisterForNavigation<StyleView>();
                        containerRegistry.RegisterForNavigation<TriggerView>();
                          containerRegistry.RegisterForNavigation<TemplateView>();
                            containerRegistry.RegisterForNavigation<DataTemplateView>();
                              }
                              protected override IModuleCatalog CreateModuleCatalog()
                              {
                              return new ConfigurationModuleCatalog();
                              }
                              protected override void ConfigureModuleCatalog(IModuleCatalog moduleCatalog)
                              {
                              var moduleManager = Container.Resolve<ModuleManager>();
                                moduleManager.LoadModulesFromConfig(Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "Modules.json"));
                                }
                                }
                                }

3.8 更新 MainViewModel.cs

确保支持主题切换和消息处理（与之前一致，略作调整以支持模板）：

using Prism.Commands;
using Prism.Events;
using Prism.Mvvm;
using Prism.Regions;
using System;
using System.Collections.ObjectModel;
using System.Threading;
using System.Threading.Tasks;
using System.Windows.Input;
namespace WpfLayoutDemo
{
public class MainViewModel : BindableBase
{
private readonly IEventAggregator _eventAggregator;
private readonly IRegionManager _regionManager;
private readonly ModuleManager _moduleManager;
private ObservableCollection<IMessageItem> _messages;
  private string _status;
  private bool _isBusy;
  private string _filterText;
  private bool _showHighPriorityOnly;
  private string _theme;
  public ObservableCollection<IMessageItem> Messages
    {
    get => _messages;
    set => SetProperty(ref _messages, value);
    }
    public string Status
    {
    get => _status;
    set => SetProperty(ref _status, value);
    }
    public bool IsBusy
    {
    get => _isBusy;
    set => SetProperty(ref _isBusy, value, () => CommandManager.InvalidateRequerySuggested());
    }
    public string FilterText
    {
    get => _filterText;
    set => SetProperty(ref _filterText, value);
    }
    public bool ShowHighPriorityOnly
    {
    get => _showHighPriorityOnly;
    set => SetProperty(ref _showHighPriorityOnly, value);
    }
    public string Theme
    {
    get => _theme;
    set => SetProperty(ref _theme, value);
    }
    public ICommand StartPushCommand { get; }
    public ICommand CancelCommand { get; }
    public ICommand NavigateCommand { get; }
    public ICommand LoadModuleCommand { get; }
    public ICommand UnloadModuleCommand { get; }
    public ICommand AddMessageCommand { get; }
    public ICommand SwitchThemeCommand { get; }
    public MainViewModel(IEventAggregator eventAggregator, IRegionManager regionManager, ModuleManager moduleManager)
    {
    _eventAggregator = eventAggregator;
    _regionManager = regionManager;
    _moduleManager = moduleManager;
    Messages = new ObservableCollection<IMessageItem>();
      StartPushCommand = new AsyncRelayCommand(StartPushAsync, CanStartPushAsync);
      CancelCommand = new DelegateCommand(Cancel, CanCancel).ObservesProperty(() => IsBusy);
      NavigateCommand = new DelegateCommand<string>(Navigate);
        LoadModuleCommand = new DelegateCommand<string>(LoadModule);
          UnloadModuleCommand = new DelegateCommand<string>(UnloadModule);
            AddMessageCommand = new DelegateCommand<string>(AddMessage);
              SwitchThemeCommand = new DelegateCommand<string>(SwitchTheme);
                Status = "准备开始数据推送。";
                FilterText = "";
                ShowHighPriorityOnly = false;
                Theme = "Default";
                _eventAggregator.GetEvent<MessageReceivedEvent>().Subscribe(item =>
                  {
                  Application.Current.Dispatcher.Invoke(() =>
                  {
                  if (string.IsNullOrEmpty(FilterText) || item.Content.Contains(FilterText))
                  {
                  if (!ShowHighPriorityOnly || item.Priority == 10)
                  {
                  Messages.Add(item);
                  }
                  }
                  Status = $"已接收 {Messages.Count} 条消息。";
                  });
                  });
                  }
                  private async Task StartPushAsync(object parameter, CancellationToken token)
                  {
                  try
                  {
                  IsBusy = true;
                  await Application.Current.Dispatcher.InvokeAsync(() => { Status = "开始数据推送..."; Messages.Clear(); });
                  for (int i = 0; i < 20 && !token.IsCancellationRequested; i++)
                  {
                  var message = new Message
                  {
                  Content = $"消息 {i + 1}",
                  Priority = i % 3 == 0 ? 10 : 1,
                  Timestamp = DateTime.Now
                  };
                  _eventAggregator.GetEvent<MessageReceivedEvent>().Publish(message);
                    await Task.Delay(200, token);
                    }
                    await Application.Current.Dispatcher.InvokeAsync(() => Status = "数据推送完成。");
                    }
                    catch (OperationCanceledException)
                    {
                    await Application.Current.Dispatcher.InvokeAsync(() =>
                    {
                    Status = "数据推送已取消。";
                    Messages.Clear();
                    });
                    }
                    finally
                    {
                    await Application.Current.Dispatcher.InvokeAsync(() => IsBusy = false);
                    }
                    }
                    private async Task<bool> CanStartPushAsync(object parameter)
                      {
                      await Task.Delay(100);
                      return !IsBusy;
                      }
                      private void Cancel()
                      {
                      (StartPushCommand as AsyncRelayCommand)?.Cancel();
                      Status = "已请求取消。";
                      }
                      private bool CanCancel() => IsBusy;
                      private void Navigate(string viewName)
                      {
                      _regionManager.RequestNavigate("ContentRegion", viewName);
                      Status = $"已导航到 {viewName}";
                      }
                      private void LoadModule(string moduleName)
                      {
                      var moduleInfo = _moduleManager.ModuleCatalog.Modules.FirstOrDefault(m => m.ModuleName == moduleName);
                      if (moduleInfo != null && moduleInfo.State == ModuleState.NotStarted)
                      {
                      _moduleManager.LoadModule(moduleName, Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "Modules", $"{moduleName}.dll"), true);
                      Status = $"已加载模块: {moduleName}";
                      }
                      else
                      {
                      Status = $"模块 {moduleName} 未找到或已加载。";
                      }
                      }
                      private void UnloadModule(string moduleName)
                      {
                      _moduleManager.UnloadModule(moduleName);
                      Status = $"已卸载模块: {moduleName}";
                      }
                      private void AddMessage(string content)
                      {
                      if (!string.IsNullOrWhiteSpace(content))
                      {
                      var message = new Message
                      {
                      Content = content,
                      Priority = 10, // 默认高优先级
                      Timestamp = DateTime.Now
                      };
                      _eventAggregator.GetEvent<MessageReceivedEvent>().Publish(message);
                        }
                        }
                        private void SwitchTheme(string theme)
                        {
                        Theme = theme;
                        Status = $"已切换主题: {theme}";
                        }
                        }
                        }

---

4. 数据模板深入详解

4.1 简单数据模板

• 描述：定义数据对象的简单可视化表示，通常包含少量视觉元素。
• 实现：
  • 使用 <DataTemplate>，绑定数据属性到视觉元素。
  • 设置 DataType 属性，自动应用于指定类型。
  • 示例：普通消息模板显示内容和时间。
• 适用场景：
  • 显示简单数据对象，如列表中的文本信息。
• 代码示例（NormalMessageTemplate）：

  <DataTemplate x:Key="NormalMessageTemplate" DataType="{x:Type local:IMessageItem}">
      <Border Background="White" BorderBrush="Gray" BorderThickness="1" CornerRadius="3" Margin="5" Padding="5">
      <StackPanel>
        <TextBlock Text="{Binding Content}" FontSize="12" />
        <TextBlock Text="{Binding Timestamp, StringFormat='时间: {0:yyyy-MM-dd HH:mm:ss}'}" FontSize="10" />
      </StackPanel>
    </Border>
  </DataTemplate>

• 注意事项：
  • 确保绑定路径正确，数据对象实现 INotifyPropertyChanged。
  • 使用简单布局（如 StackPanel）优化性能。
  • 指定 DataType 便于自动应用模板。

4.2 复杂数据模板

• 描述：定义复杂数据对象的可视化结构，包含多个元素和交互控件。
• 实现：
  • 使用复杂布局（如 Grid）和交互元素（如 Button）。
  • 示例：模块消息模板包含按钮和多列布局。
• 适用场景：
  • 显示复杂数据或需要用户交互的 UI。
• 代码示例（ModuleMessageTemplate）：

  <DataTemplate x:Key="ModuleMessageTemplate" DataType="{x:Type local:IMessageItem}">
      <Border Background="#E6F3E6" BorderBrush="Green" BorderThickness="2" CornerRadius="5" Margin="5" Padding="5">
      <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*" />
          <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
          <StackPanel Grid.Column="0">
          <TextBlock Text="{Binding Content}" FontSize="14" Foreground="DarkGreen" />
          <TextBlock Text="{Binding Timestamp, StringFormat='时间: {0:yyyy-MM-dd HH:mm:ss}'}" FontSize="12" />
        </StackPanel>
        <Button Grid.Column="1" Content="高优先级" Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListBox}}, Path=DataContext.AddMessageCommand}" />
      </Grid>
    </Border>
  </DataTemplate>

• 注意事项：
  • 确保交互元素（如按钮）的命令绑定正确。
  • 优化复杂布局，减少嵌套层级。
  • 测试交互功能（如按钮点击）。

4.3 触发器与数据模板

• 描述：在数据模板中使用触发器响应数据变化。
• 实现：
  • 在 <DataTemplate.Triggers> 中定义 DataTrigger 或 MultiDataTrigger。
  • 示例：高优先级消息显示绿色背景。
• 适用场景：
  • 数据驱动的动态 UI，如根据优先级更改样式。
• 代码示例（ModuleMessageTemplate）：

  <DataTrigger Binding="{Binding Priority}" Value="10">
    <Setter Property="Background" Value="#C8E6C9" />
    <Setter Property="BorderBrush" Value="DarkGreen" />
  </DataTrigger>

• 注意事项：
  • 确保绑定属性实现 INotifyPropertyChanged。
  • 使用转换器（IValueConverter）处理复杂逻辑。
  • 验证触发器条件是否正确。

4.4 DataTemplateSelector

• 描述：根据数据对象属性动态选择模板。
• 实现：
  • 继承 DataTemplateSelector，重写 SelectTemplate 方法。
  • 在 XAML 中通过 ItemTemplateSelector 属性引用。
  • 示例：高优先级且最近的消息使用特殊模板。
• 适用场景：
  • 根据数据属性动态切换模板。
• 代码示例（MessageTemplateSelector.cs）：

  public override DataTemplate SelectTemplate(object item, DependencyObject container)
  {
  if (item is IMessageItem message)
  {
  if (message.Priority == 10 && message.Timestamp > DateTime.Now.AddMinutes(-5))
  return RecentHighPriorityTemplate;
  if (message.Priority == 10)
  return HighPriorityTemplate;
  return NormalTemplate;
  }
  return NormalTemplate;
  }

• 注意事项：
  • 确保选择器属性绑定到正确模板（HighPriorityTemplate 等）。
  • 测试所有选择条件，确保覆盖所有场景。
  • 避免复杂选择逻辑，保持代码清晰。

4.5 动画与数据模板

• 描述：在数据模板中使用 EventTrigger 触发动画。
• 实现：
  • 使用 <EventTrigger> 和 Storyboard 定义动画。
  • 示例：消息卡片加载时淡入，鼠标进入时缩放。
• 适用场景：
  • 增强交互体验，如淡入、缩放动画。
• 代码示例（HighPriorityMessageTemplate）：

  <EventTrigger RoutedEvent="Border.MouseEnter">
    <BeginStoryboard>
      <Storyboard>
          <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
          To="1.05" Duration="0:0:0.2" />
      </Storyboard>
    </BeginStoryboard>
  </EventTrigger>
    <EventTrigger RoutedEvent="Border.Loaded">
    <BeginStoryboard>
      <Storyboard>
          <DoubleAnimation Storyboard.TargetProperty="Opacity"
          From="0" To="1" Duration="0:0:0.5" />
      </Storyboard>
    </BeginStoryboard>
  </EventTrigger>

• 注意事项：
  • 动画时长控制在 0.2-0.5 秒，避免用户等待。
  • 使用 RenderTransform 优化性能。
  • 确保 RenderTransform 已定义。

4.6 模块化数据模板

• 描述：模块使用独立数据模板，支持动态加载和卸载。
• 实现：
  • 在模块资源字典（如 ModuleStyles.xaml）中定义模板。
  • 通过 Prism 区域加载模块视图。
• 适用场景：
  • 模块化 UI 定制，如模块特定的消息卡片样式。
• 代码示例（ModuleMessageTemplate）：

  <DataTemplate x:Key="ModuleMessageTemplate" DataType="{x:Type local:IMessageItem}">
      <Border Background="#E6F3E6" BorderBrush="Green" BorderThickness="2" CornerRadius="5" Margin="5" Padding="5">
      <StackPanel>
        <TextBlock Text="{Binding Content}" FontSize="14" Foreground="DarkGreen" />
      </StackPanel>
    </Border>
  </DataTemplate>

• 注意事项：
  • 确保模块资源字典正确合并到应用中。
  • 卸载模块时清理模板资源，避免内存泄漏。
  • 测试模块加载后模板的正确应用。

4.7 数据模板与控件模板结合

• 描述：数据模板通过 ContentPresenter.ContentTemplate 嵌套在控件模板中。
• 实现：
  • 在控件模板（如 MessageListItemTemplate）中设置 ContentPresenter.ContentTemplate。
  • 示例：列表项控件模板嵌套消息数据模板。
• 适用场景：
  • 分离控件容器样式和数据内容样式。
• 代码示例（MessageListItemTemplate）：

  <ControlTemplate x:Key="MessageListItemTemplate" TargetType="ListBoxItem">
      <Border Background="{TemplateBinding Background}" BorderBrush="Gray" BorderThickness="1" Margin="5" Padding="5">
      <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" />
    </Border>
  </ControlTemplate>

• 注意事项：
  • 确保控件模板和数据模板的 DataContext 一致。
  • 测试嵌套模板的绑定效果。
  • 使用 DataTemplateSelector 动态选择数据模板。

---

5. 测试代码

5.1 手动测试用例

1. 简单数据模板：
   • 导航到 DataTemplateView，确认普通消息使用 NormalMessageTemplate（白色背景，灰色边框）。
2. 复杂数据模板：
   • 导航到 MessageView，确认模块消息使用 ModuleMessageTemplate（绿色边框，包含按钮）。
   • 点击“高优先级”按钮，确认添加高优先级消息。
3. 触发器测试：
   • 在 MessageView，添加高优先级消息（Priority=10），确认背景变为 #C8E6C9（DataTrigger）。
4. DataTemplateSelector 测试：
   • 在 DataTemplateView，确认：
     • 高优先级且最近的消息使用 RecentHighPriorityMessageTemplate（浅珊瑚色背景）。
     • 高优先级消息使用 HighPriorityMessageTemplate（粉色背景）。
     • 普通消息使用 NormalMessageTemplate（白色背景）。
5. 动画测试：
   • 在 DataTemplateView，鼠标进入高优先级消息卡片，确认缩放效果。
   • 添加高优先级消息，确认加载时淡入动画。
6. 模块化模板测试：
   • 加载 MessageModule，导航到 MessageView，确认 ModuleMessageTemplate 应用（绿色边框）。
   • 卸载模块，确认模板资源清理，UI 无异常。
7. 主题切换：
   • 在 DataTemplateView，点击“深色主题”，确认按钮背景变为 #343A40。
   • 点击“浅色主题”，确认按钮背景变为 #F8F9FA。

5.2 单元测试（使用 MSTest）

using Microsoft.VisualStudio.TestTools.UnitTesting;
using Prism.Ioc;
using Prism.Modularity;
using Prism.Unity;
using System.Linq;
using System.Threading.Tasks;
namespace WpfLayoutDemo.Tests
{
[TestClass]
public class DataTemplateTests
{
private IContainerProvider _container;
private MainViewModel _viewModel;
private ModuleManager _moduleManager;
[TestInitialize]
public void Initialize()
{
var app = new App();
_container = app.CreateContainer();
_viewModel = _container.Resolve<MainViewModel>();
  _moduleManager = _container.Resolve<ModuleManager>();
    app.ConfigureModuleCatalog(_container.Resolve<IModuleCatalog>());
      }
      [TestMethod]
      public async Task DataTemplateView_DisplaysMessages()
      {
      // 行动
      _viewModel.NavigateCommand.Execute("DataTemplateView");
      await (_viewModel.StartPushCommand as AsyncRelayCommand).ExecuteAsync(null);
      await Task.Delay(5000);
      // 断言
      Assert.IsTrue(_viewModel.Messages.Count > 0, "消息列表应被填充。");
      Assert.IsTrue(_viewModel.Status.Contains("数据推送完成"), "状态应显示推送完成。");
      }
      [TestMethod]
      public void DataTemplateSelector_HighPriority()
      {
      // 行动
      _viewModel.NavigateCommand.Execute("DataTemplateView");
      _viewModel.AddMessageCommand.Execute("High Priority");
      _viewModel.Messages.Last().Priority = 10;
      // 断言
      Assert.IsTrue(_viewModel.Messages.Any(m => m.Priority == 10), "高优先级消息应存在。");
      }
      [TestMethod]
      public void DataTemplateSelector_RecentHighPriority()
      {
      // 行动
      _viewModel.NavigateCommand.Execute("DataTemplateView");
      _viewModel.AddMessageCommand.Execute("Recent High Priority");
      _viewModel.Messages.Last().Priority = 10;
      _viewModel.Messages.Last().Timestamp = DateTime.Now;
      // 断言
      Assert.IsTrue(_viewModel.Messages.Any(m => m.Priority == 10 && m.Timestamp > DateTime.Now.AddMinutes(-5)), "应存在高优先级且最近的消息。");
      }
      [TestMethod]
      public void DataTemplateTheme_AppliesDarkTheme()
      {
      // 行动
      _viewModel.NavigateCommand.Execute("DataTemplateView");
      _viewModel.SwitchThemeCommand.Execute("Dark");
      // 断言
      Assert.AreEqual("Dark", _viewModel.Theme, "主题应切换到深色。");
      Assert.IsTrue(_viewModel.Status.Contains("已切换主题: Dark"), "状态应显示主题切换。");
      }
      [TestMethod]
      public async Task ModuleDataTemplate_AppliesCorrectly()
      {
      // 行动
      _viewModel.LoadModuleCommand.Execute("MessageModule");
      await Task.Delay(1000);
      _viewModel.NavigateCommand.Execute("MessageView");
      _viewModel.AddMessageCommand.Execute("Module Test");
      _viewModel.Messages.Last().Priority = 10;
      // 断言
      Assert.IsTrue(_viewModel.Messages.Any(m => m.Content == "Module Test" && m.Priority == 10), "模块视图应显示高优先级消息。");
      Assert.IsTrue(_viewModel.Status.Contains("已导航到 MessageView"), "状态应显示模块导航。");
      }
      [TestMethod]
      public void DataTemplateAnimation_TriggersOnLoad()
      {
      // 行动
      _viewModel.NavigateCommand.Execute("DataTemplateView");
      _viewModel.AddMessageCommand.Execute("Test Message");
      _viewModel.Messages.Last().Priority = 10;
      _viewModel.Messages.Last().Timestamp = DateTime.Now;
      // 断言
      Assert.IsTrue(_viewModel.Messages.Any(m => m.Content == "Test Message"), "消息应被添加。");
      }
      }
      }

---

6. 数据模板使用指南

6.1 简单数据模板

• 使用方法：
  • 定义 <DataTemplate>，绑定数据属性到视觉元素。
  • 在 ItemsControl（如 ListBox）中通过 ItemTemplate 属性应用。
  • 设置 DataType 自动应用模板。
  • 示例：NormalMessageTemplate 显示消息内容和时间。
• 适用场景：
  • 显示简单数据对象，如列表中的文本或基本信息。
• 最佳实践：
  • 保持模板简单，减少视觉元素和嵌套。
  • 使用 {Binding} 绑定属性，确保数据对象实现 INotifyPropertyChanged。
  • 指定 DataType 便于自动匹配。
• 示例：NormalMessageTemplate 定义白色背景的消息卡片。

6.2 复杂数据模板

• 使用方法：
  • 使用复杂布局（如 Grid）和交互元素（如 Button）。
  • 在 ItemsControl 或 ContentControl 中应用。
  • 示例：ModuleMessageTemplate 包含按钮和多列布局。
• 适用场景：
  • 显示复杂数据结构或需要用户交互的 UI。
• 最佳实践：
  • 确保交互元素（如按钮）的命令绑定正确。
  • 优化布局，减少嵌套层级。
  • 测试交互功能（如按钮点击）。
• 示例：ModuleMessageTemplate 包含“高优先级”按钮。

6.3 触发器与数据模板

• 使用方法：
  • 在 <DataTemplate.Triggers> 中定义 DataTrigger 或 MultiDataTrigger。
  • 示例：根据 Priority 属性更改背景颜色。
• 适用场景：
  • 数据驱动的动态 UI，如高优先级消息显示不同样式。
• 最佳实践：
  • 使用转换器（IValueConverter）处理复杂逻辑。
  • 确保绑定属性支持变更通知。
  • 验证触发器条件是否正确。
• 示例：ModuleMessageTemplate 中高优先级消息触发绿色背景。

6.4 DataTemplateSelector

• 使用方法：
  • 继承 DataTemplateSelector，实现 SelectTemplate 方法。
  • 在 XAML 中通过 ItemTemplateSelector 属性引用。
  • 示例：根据 Priority 和 Timestamp 选择模板。
• 适用场景：
  • 根据数据属性动态切换模板。
• 最佳实践：
  • 保持选择逻辑清晰，覆盖所有可能条件。
  • 测试选择器的所有分支。
  • 确保模板资源正确引用。
• 示例：MessageTemplateSelector 选择高优先级或普通模板。

6.5 动画与数据模板

• 使用方法：
  • 在 <EventTrigger> 中使用 BeginStoryboard 和 Storyboard 定义动画。
  • 示例：消息卡片加载时淡入，鼠标进入时缩放。
• 适用场景：
  • 增强交互体验，如动态加载或悬停效果。
• 最佳实践：
  • 动画时长控制在 0.2-0.5 秒。
  • 使用 RenderTransform 优化性能。
  • 确保 RenderTransform 已定义。
• 示例：HighPriorityMessageTemplate 中鼠标进入缩放动画。

6.6 模块化数据模板

• 使用方法：
  • 在模块资源字典（如 ModuleStyles.xaml）中定义模板。
  • 通过 Prism 区域加载模块视图。
  • 示例：ModuleMessageTemplate 定义模块消息样式。
• 适用场景：
  • 模块化 UI 定制，如模块特定的消息卡片。
• 最佳实践：
  • 模块模板存储在独立资源字典。
  • 卸载模块时清理模板资源。
  • 确保资源字典正确合并。
• 示例：ModuleMessageTemplate 定义绿色边框消息卡片。

6.7 数据模板与控件模板结合

• 使用方法：
  • 在控件模板中通过 ContentPresenter.ContentTemplate 嵌套数据模板。
  • 示例：MessageListItemTemplate 嵌套 HighPriorityMessageTemplate。
• 适用场景：
  • 分离控件容器样式和数据内容样式。
• 最佳实践：
  • 确保控件模板和数据模板的 DataContext 一致。
  • 测试嵌套模板的绑定效果。
  • 使用 DataTemplateSelector 动态选择数据模板。
• 示例：MessageListItemTemplate 嵌套消息数据模板。

---

7. 注意事项

7.1 常见问题

• 模板未生效：
  • 问题：数据模板未显示。
  • 解决：检查 ItemTemplate 或 ItemTemplateSelector 引用，确认资源字典加载。
• 触发器失效：
  • 问题：触发器未触发。
  • 解决：检查 Binding 路径，确认数据对象实现 INotifyPropertyChanged。
• 动画卡顿：
  • 问题：动画性能差。
  • 解决：简化动画，使用 RenderOptions 启用硬件加速（如 RenderOptions.SetEdgeMode="Aliased"）。
• 模块模板问题：
  • 问题：模块模板未加载。
  • 解决：确认资源字典合并，检查模块加载逻辑。
• 绑定错误：
  • 问题：Binding 失败。
  • 解决：检查绑定路径，确认 DataContext 正确。
• 性能问题：
  • 问题：复杂模板导致渲染慢。
  • 解决：优化视觉树，减少嵌套和绑定复杂度。

7.2 最佳实践

• 简洁模板：
  • 保持模板简单，减少视觉元素和嵌套。
  • 示例：NormalMessageTemplate 使用简单 StackPanel。
• 模块化：
  • 模块模板存储在独立资源字典（如 ModuleStyles.xaml）。
  • 确保卸载模块时清理资源。
• 动画优化：
  • 使用短时动画（0.2-0.5 秒）。
  • 优先使用 RenderTransform 而非 LayoutTransform。
  • 示例：缩放动画使用 ScaleTransform。
• 测试：
  • 测试模板在所有视图和模块中的应用。
  • 验证触发器、动画和数据绑定效果。
• MVVM 集成：
  • 模板通过 Binding 与 ViewModel 属性交互。
  • 示例：Theme 属性触发按钮样式变化。
• 资源管理：
  • 使用资源字典组织模板。
  • 避免重复定义模板，减少资源占用。

7.3 调试技巧

• 模板未生效：
  • 检查输出窗口的绑定错误。
  • 使用 VisualTreeHelper 检查视觉树结构。
  • 示例：VisualTreeHelper.GetChildrenCount(element)。
• 触发器问题：
  • 使用 PresentationTraceSources.TraceLevel=High 调试绑定和触发器。
  • 验证绑定路径和转换器。
• 动画问题：
  • 检查 Storyboard 属性路径。
  • 确认事件触发（如 Border.Loaded）。
  • 示例：使用 Storyboard.TargetName 指定目标元素。
• 模块调试：
  • 记录模块加载日志，检查资源字典合并。
  • 确认 RegionManager 视图注册。
• 性能分析：
  • 使用 Visual Studio 性能分析器检查渲染性能。
  • 启用 RenderOptions 优化（如 RenderOptions.SetBitmapScalingMode="HighQuality"）。

---

8. 运行效果

1. 初始状态：
   • 导航到 DataTemplateView，普通消息使用 NormalMessageTemplate（白色背景，灰色边框）。
   • 按钮使用 BaseButtonStyle（蓝色背景）。
   • Status 显示“准备开始数据推送。”。
2. 数据模板交互：
   • 高优先级消息使用 HighPriorityMessageTemplate（粉色背景，红色边框）。
   • 最近高优先级消息使用 RecentHighPriorityMessageTemplate（浅珊瑚色背景，加载时淡入）。
   • 鼠标进入高优先级消息卡片，触发缩放动画。
3. DataTemplateSelector：
   • 确认 MessageTemplateSelector 正确选择模板：
     • Priority=10 且最近：RecentHighPriorityMessageTemplate。
     • Priority=10：HighPriorityMessageTemplate。
     • 其他：NormalMessageTemplate。
4. 模块模板：
   • 导航到 MessageView，确认 ModuleMessageTemplate 应用（绿色边框）。
   • 点击“高优先级”按钮，添加高优先级消息，确认背景变为 #C8E6C9。
   • 新消息加载时触发淡入动画。
5. 主题切换：
   • 在 DataTemplateView，点击“深色主题”，确认按钮背景变为 #343A40。
   • 点击“浅色主题”，确认按钮背景变为 #F8F9FA。
6. 模块加载/卸载：
   • 加载 MessageModule，确认 ModuleMessageTemplate 应用。
   • 卸载模块，确认 UI 无异常，资源清理。

---

9. 适用场景与如何使用

9.1 适用场景

1. 简单数据展示：
   • 场景：显示简单数据对象，如列表中的文本或时间。
   • 示例：NormalMessageTemplate 显示消息内容和时间。
2. 复杂数据展示：
   • 场景：显示复杂数据结构或需要交互的 UI。
   • 示例：ModuleMessageTemplate 包含按钮和多列布局。
3. 数据驱动 UI：
   • 场景：根据数据属性动态调整样式。
   • 示例：高优先级消息显示绿色背景。
4. 动态模板选择：
   • 场景：根据数据属性动态选择不同模板。
   • 示例：MessageTemplateSelector 根据优先级和时间选择模板。
5. 模块化 UI：
   • 场景：在模块化应用中为模块数据定义特定样式。
   • 示例：MessageModule 使用绿色消息卡片。
6. 动画效果：
   • 场景：为数据展示添加交互动画，增强用户体验。
   • 示例：消息卡片加载时淡入，鼠标进入时缩放。

9.2 如何使用数据模板

1. 定义数据模板：
   • 在资源字典（如 CommonStyles.xaml）中定义 <DataTemplate>。
   • 设置 DataType 属性，自动应用于指定类型。
   • 示例：

     <DataTemplate x:Key="NormalMessageTemplate" DataType="{x:Type local:IMessageItem}">
         <Border Background="White" BorderBrush="Gray" BorderThickness="1">
         <TextBlock Text="{Binding Content}" />
       </Border>
     </DataTemplate>

2. 应用模板：
   • 在 ItemsControl 中通过 ItemTemplate 属性应用。
   • 或使用 DataTemplateSelector 动态选择模板。
   • 示例：

     <ListBox ItemsSource="{Binding Messages}" ItemTemplateSelector="{StaticResource MessageTemplateSelector}" />

3. 添加触发器：
   • 在 <DataTemplate.Triggers> 中定义 DataTrigger 或 EventTrigger。
   • 示例：根据 Priority 更改背景。
4. 实现动画：
   • 使用 <EventTrigger> 和 Storyboard 定义动画。
   • 示例：消息卡片加载时淡入。
5. 实现 DataTemplateSelector：
   • 继承 DataTemplateSelector，实现 SelectTemplate 方法。
   • 在 XAML 中引用选择器。
   • 示例：根据 Priority 选择模板。
6. 模块化应用：
   • 在模块资源字典中定义模板。
   • 使用 Prism 区域加载模块视图。
   • 示例：ModuleMessageTemplate 定义模块消息样式。
7. 测试与调试：
   • 测试模板在所有视图和模块中的应用。
   • 使用 Visual Studio 调试工具检查绑定和视觉树。
   • 示例：验证选择器和动画效果。

---

10. 总结

本示例扩展了之前的 WpfLayoutDemo 项目，深入展示了 WPF 数据模板（DataTemplate）的用法，包括简单模板、复杂模板、触发器、动画、选择器、模块化模板以及与控件模板的结合。结合 Prism 框架、MVVM 模式、动态模块加载和模块卸载，实现了实时消息查看器的动态数据展示。测试用例验证了模板应用、触发器、动画和模块集成，涵盖了从简单消息展示到复杂交互场景的各种功能。如果您需要进一步探讨（如高级数据模板、自定义控件开发、性能优化或与第三方控件库的集成），请告诉我！