数据模版

一、先搞懂：什么是数据模板？

官方定义

DataTemplate = 数据的 “外观设计图”

大白话

你给 WPF 一个数据对象（比如学生、用户、商品），

 

WPF 默认只会显示 ToString()，丑到没法用。

 

数据模板就是告诉 WPF：

“这个数据应该怎么显示！用什么布局？什么文字？什么图片？什么颜色？”

核心作用

1. 把复杂数据对象 → 变成美观的界面
2. 完全分离 UI 和数据（MVVM 核心）
3. 列表控件（ListBox/ListView）必用技术
4. 不写逻辑，只写 XAML 就能做复杂界面

一句话记住

控件模板改控件长相，数据模板改数据长相！

二、数据模板用在哪里？（两个核心位置）

数据模板不是直接用，而是赋值给两个属性：

1. 列表控件（最常用）

ItemsControl.ItemTemplate

• ListBox
• ListView
• ComboBox
• DataGrid
• ItemsControl

2. 内容控件

ContentControl.ContentTemplate

• Button
• Label
• ContentControl

三、数据模板的核心语法

<DataTemplate>
    <!-- 这里写你要的界面布局：StackPanel/Grid/Image/TextBlock -->
</DataTemplate>

最常用绑定

{Binding 属性名}

可选：指定数据类型（智能提示 + 自动应用）

DataType="{x:Type local:Student}"

四、必须先准备一个数据类（所有例子共用）

我们创建一个学生类，方便后面演示：

public class Student
{
    public string Name { get; set; }
    public int Age { get; set; }
    public string Gender { get; set; }
    public string Avatar { get; set; } = "https://www.baidu.com/favicon.ico";
}

窗口加载时造点测试数据：

public MainWindow()
{
    InitializeComponent();
    List<Student> students = new List<Student>()
    {
        new Student{Name="张三",Age=18,Gender="男"},
        new Student{Name="李四",Age=19,Gender="女"},
        new Student{Name="王五",Age=20,Gender="男"}
    };
    listBox.ItemsSource = students;
}

五、示例 1：最简单的数据模板（文字）

效果

把默认只显示类名 → 变成显示姓名、年龄、性别

<ListBox x:Name="listBox">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="姓名：" />
                <TextBlock Text="{Binding Name}" FontWeight="Bold" />
                <TextBlock Text="年龄：" />
                <TextBlock Text="{Binding Age}" />
                <TextBlock Text="性别：" />
                <TextBlock Text="{Binding Gender}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

你会看到

每一项都变成：

 

姓名：张三

 

年龄：18

 

性别：男

 

六、示例 2：带图片 + 水平布局（常用卡片样式）

这是实际项目 90% 会用的写法！

<ListBox x:Name="listBox">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" Margin="5">
                <!-- 头像 -->
                <Image
                    Source="{Binding Avatar}"
                    Width="50"
                    Height="50"
                    Margin="5"/>

                <StackPanel>
                    <TextBlock Text="{Binding Name}" FontSize="18" FontWeight="Bold"/>
                    <TextBlock Text="{Binding Age}" FontSize="14" Foreground="Gray"/>
                    <TextBlock Text="{Binding Gender}" FontSize="12" Foreground="DarkGray"/>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

效果

每一项都是：
     姓名
     年龄
     性别

七、示例 3：把 DataTemplate 定义为资源（全局复用）

把模板放到资源里，所有列表共用，这才是工程化用法！

<Window.Resources>
    <DataTemplate x:Key="StudentTemplate" DataType="{x:Type local:Student}">
        <StackPanel Orientation="Horizontal" Margin="5">
            <Image Source="{Binding Avatar}" Width="50" Height="50"/>
            <StackPanel>
                <TextBlock Text="{Binding Name}" FontWeight="Bold"/>
                <TextBlock Text="{Binding Age,Age}" Foreground="Gray"/>
            </StackPanel>
        </StackPanel>
    </DataTemplate>
</Window.Resources>

使用：

<ListBox ItemTemplate="{StaticResource StudentTemplate}" />

八、示例 4：隐式数据模板（自动匹配类型，最强！）

不给 x:Key，只给 DataType，自动应用！

<Window.Resources>
    <DataTemplate DataType="{x:Type local:Student}">
        <StackPanel>
            <TextBlock Text="{Binding Name}" />
        </StackPanel>
    </DataTemplate>
</Window.Resources>

使用时完全不用写 ItemTemplate！

<ListBox x:Name="listBox" />

WPF 会自动识别：

“哦，这是 Student → 自动用对应模板！”

这就是 MVVM 自动界面生成 的核心魔法！

九、示例 5：数据模板里加按钮、输入框、触发器

数据模板里可以放任何控件！

<DataTemplate>
    <Border CornerRadius="5" Background="LightBlue" Margin="3">
        <StackPanel>
            <TextBlock Text="{Binding Name}" />
            <Button Content="查看详情" Width="80" Margin="3"/>
            <CheckBox Content="已选中" />
        </StackPanel>
    </Border>
</DataTemplate>

你没看错：

数据模板 = 一个完整的迷你界面

十、示例 6：数据触发器 DataTrigger（根据数据改变外观）

比如：性别男 → 蓝色，女 → 粉色

<DataTemplate>
    <StackPanel x:Name="panel" Background="LightBlue">
        <TextBlock Text="{Binding Name}" />
    </StackPanel>

    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding Gender}" Value="女">
            <Setter TargetName="panel" Property="Background" Value="Pink"/>
        </DataTrigger>
    </DataTemplate.Triggers>
</DataTemplate>

自动变色！超级常用！

十一、数据模板最常用控件列表

你在 DataTemplate 里可以随便用：

• TextBlock 文本
• Image 图片
• Button 按钮
• CheckBox 勾选
• TextBox 输入
• Border 边框
• Grid/StackPanel/DockPanel 布局
• ProgressBar 进度条
• 甚至嵌套 ListBox

十二、数据模板 vs 控件模板（超级清晰区分）

模板	作用	改什么	常用属性
DataTemplate	数据显示	数据长啥样	ItemTemplate
ControlTemplate	控件外观	控件长啥样	Template

口诀

数据模板管内容，控件模板管外壳！

十三、数据模板使用总结（必背）

1. DataTemplate 用来定义 “数据如何显示”
2. 必须配合 {Binding}
3. 最常用在 ListBox/ListView/ComboBox 的 ItemTemplate
4. 可放资源里复用
5. 可通过 DataType 自动应用（隐式模板）
6. 内部可放任何控件 + 触发器
7. 是 WPF 做列表界面、卡片界面、商品列表的必备技术