WPF之浅谈数据模板（DataTemplate）
数据模板有什么用
简而言之，数据模板能让你更方便、更灵活的显示你的各类数据。只有你想不到，没有它做不到的（感觉有点夸张，实践之后，你就觉得一点不夸张 ??）。
直接对比下效果：
无数据模板
应用了数据模板
好了，下面我们一步一步来看看数据模板如何做到化腐朽为神奇的！
一些前置条件
-
假设你已了解了MVVM设计模式
-
假设你已了解了一些数据绑定知识
-
假设你已了解了一些样式知识
代码准备
-
首先准备一个Model，代码如下：
public class Employee { public string Name { get; set; } public Sex Sex { get; set; } public string Job { get; set; } public string Department { get; set; } public string Email { get; set; } } public enum Sex { Male, Female } -
在准备好ViewModel，代码如下：
public class MainViewModel: BindableBase { private IEnumerable<Employee> _employees; public IEnumerable<Employee> Employees { get => _employees; set => SetProperty(ref _employees, value); } public MainViewModel() { Employees = new List<Employee>() { new Employee() {Name="张明",Department="技术售后部",Job="售后工程师",Sex=Sex.Male,Email="Zhang.San@wpf.com"}, new Employee() {Name="葛倩",Department="人事部",Job="招聘专员",Sex=Sex.Female,Email="Ge.Qian@wpf.com"}, new Employee() {Name="王小伟",Department="研发部",Job="高级软件工程师",Sex=Sex.Male,Email="Wang.Xiaowei@wpf.com"}, }; } }
没有数据模板
准备好没有使用数据模板的view的xaml代码
<Window x:Class="WpfPractice.DataTemplateDemo.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:WpfPractice.DataTemplateDemo"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<ListBox ItemsSource="{Binding Employees}"
HorizontalContentAlignment="Stretch">
</ListBox>
</Grid>
</Window>
运行下程序，就会出现这样的界面
熟悉.Net的同学，应该看出来每一项显示的是对象的ToString方法返回的值。因为我们集合中存放的是复杂类型的对象，如果没有数据模板，ListBox默认就会用ToString去显示。而ToString方法默认返回的就是对象的类型限定名。
既然了解到这个原理，那我们重载实现下ToString方法
public class Employee
{
public string Name { get; set; }
public Sex Sex { get; set; }
public string Job { get; set; }
public string Department { get; set; }
public string Email { get; set; }
public override string ToString()
{
return $"{Name},{Job},{Department}";
}
}
再次运行程序，结果如下
这次算是显示出一些有用信息了，但这样的UI体验，未免太差。如何让我们的数据呈现更加吸引人呢？下面就轮到数据模板大显身手了。
应用数据模板
直接上应用了数据模板的xaml代码
<Window x:Class="WpfPractice.DataTemplateDemo.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:WpfPractice.DataTemplateDemo"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<ListBox ItemsSource="{Binding Employees}"
HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate DataType="{x:Type local:Employee}">
<Border Padding="5" BorderThickness="1" BorderBrush="Gray" CornerRadius="5">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock VerticalAlignment="Center" Text="{Binding Name}" FontSize="18" FontWeight="Black"/>
<StackPanel Grid.Column="1">
<TextBlock Text="{Binding Job}"/>
<TextBlock Text="{Binding Department}"/>
<TextBlock Text="{Binding Email}"/>
</StackPanel>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Window>
其实数据模板就是把对象的属性绑定到不同的UI控件上，然后通过合理的布局，就能显示让数据显示的更加美观了。
怎么样？效果完全就不一样了，到这里，相信同学你应该能get到数据模板的作用了！当然这个只是数据模板的最基本用法，其实数据模板还有其他更强大的功能。比如可以通过数据模板让男性员工的名字显示成淡蓝色，女性的名字显示成淡绿色。这个功能下面触发器的部分会介绍。
我们还是接着数据模板定义这部分内容，我们是通过重写了ListBox.ItemTemplate来定义数据模板的，但如果在其他控件我们也要显示这样，岂不是在定义一遍这个数据模板？这样明显不符合我们代码复用的原则。还好，在wpf中，我们可以通过资源的方式来定义通用的数据模板，代码如下
<Window x:Class="WpfPractice.DataTemplateDemo.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:WpfPractice.DataTemplateDemo"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<DataTemplate DataType="{x:Type local:Employee}">
<Border Padding="5" BorderThickness="1" BorderBrush="Gray" CornerRadius="5">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock VerticalAlignment="Center" Text="{Binding Name}" FontSize="18" FontWeight="Black"/>
<StackPanel Grid.Column="1">
<TextBlock Text="{Binding Job}"/>
<TextBlock Text="{Binding Department}"/>
<TextBlock Text="{Binding Email}"/>
</StackPanel>
</Grid>
</Border>
</DataTemplate>
</Window.Resources>
<Grid>
<ListBox ItemsSource="{Binding Employees}"
HorizontalContentAlignment="Stretch">
</ListBox>
</Grid>
</Window>
此时我们发现，并不需要重新定义ListBox.ItemTemplate，但运行结果和上面保持一致！
数据触发器
前面我们提到可以通过数据模板让男性员工的名字显示成淡蓝色，女性的名字显示成淡绿色，其实就可以通过数据触发器来实现这样的功能。
这里简单说下触发器的作用，更详细的去看[微软的官方文档](DataTrigger Class (System.Windows) | Microsoft Learn)。触发器就是当绑定的数据满足某个条件时，可以去设置一些控件的属性值，或者执行一些动作（例如动画）。
基于触发器原理，实现的代码如下
<Window.Resources>
<DataTemplate DataType="{x:Type local:Employee}">
<Border Padding="5" BorderThickness="1" BorderBrush="Gray" CornerRadius="5">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="txtName" VerticalAlignment="Center" Text="{Binding Name}" FontSize="18" FontWeight="Black"/>
<StackPanel Grid.Column="1">
<TextBlock Text="{Binding Job}"/>
<TextBlock Text="{Binding Department}"/>
<TextBlock Text="{Binding Email}"/>
</StackPanel>
</Grid>
</Border>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Sex}" Value="Male">
<Setter TargetName="txtName" Property="Foreground" Value="LightBlue"/>
</DataTrigger>
<DataTrigger Binding="{Binding Sex}" Value="Female">
<Setter TargetName="txtName" Property="Foreground" Value="LightGreen"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Window.Resources>
运行结果
我们可以看到是通过修改显示名字的TextBlock的字体颜色来实现我们需求的，其实我们可以同时设置多个控件的属性来满足更复杂的需求的。
到这里，浅谈数据模板就接近尾声了，所谓浅谈，其实把数据模板的核心用法都覆盖到了，在实际项目开发中，都是基于这些知识的灵活应用！
最后
奉上源代码 https://gitee.com/liuww06/wpfpractice/tree/master/src/WpfPractice.DataTemplateDemo