WPF DataTemplate 数据模板

WPF 中的 DataTemplate（数据模板） 是用于定义数据对象如何在 UI 中呈现的核心机制。它允许开发者将数据的逻辑结构与可视化展示分离，从而更灵活地控制数据的显示方式。

1. DataTemplate 的作用

数据驱动的 UI：根据数据对象的类型或属性动态决定其可视化表现形式。

解耦数据与 UI：数据对象无需关心如何显示，UI 只负责如何渲染数据。

复用性：同一数据模板可以在多个控件或场景中重复使用。

2. 常见应用场景

ItemsControl 的项模板

为列表控件（如 ListBox、ListView、ComboBox）定义项的外观：

<Window x:Class="WpfApp3.MainWindow"
        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:WpfApp3"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <ListBox x:Name="list">
            <!--<ListBoxItem>
                <StackPanel Orientation="Horizontal">
                    <Border Height="10" Width="10" Background="red" Margin='5'/>
                    <TextBlock Text="红色" Margin="10,5,15,5"/>
                </StackPanel>
            </ListBoxItem>
            <ListBoxItem>
                <StackPanel Orientation="Horizontal">
                    <Border Height="10" Width="10" Background="blue" Margin='5'/>
                    <TextBlock Text="蓝色" Margin="10,5,15,5"/>
                </StackPanel>
            </ListBoxItem>-->
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <ListBoxItem>
                        <StackPanel Orientation="Horizontal">
                            <Border Height="10" Width="10" Background="{Binding Color}" Margin='5'/>
                            <TextBlock Text="{Binding Name}" Margin="10,5,15,5"/>
                        </StackPanel>
                    </ListBoxItem>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Window>

/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        List<ColorItem> listDataSource = new List<ColorItem>();
        listDataSource.Add(new ColorItem() { Color = "#EED2EE", Name = "#EED2EE" });
        listDataSource.Add(new ColorItem() { Color = "#EE5C42", Name = "#EE5C42" });
        listDataSource.Add(new ColorItem() { Color = "#7CFC00", Name = "#7CFC00" });
        list.ItemsSource = listDataSource;
    }
}

public class ColorItem
{
    public string Name { get; set; }
    public string Color { get; set; }
}