數(shù)據(jù)模板有什么用
簡而言之罚斗，數(shù)據(jù)模板能讓你更方便跺株、更靈活的顯示你的各類數(shù)據(jù)。只有你想不到府喳，沒有它做不到的（感覺有點夸張蒲肋，實踐之后，你就覺得一點不夸張 :sunglasses:）钝满。
直接對比下效果：
無數(shù)據(jù)模板
應(yīng)用了數(shù)據(jù)模板
好了兜粘，下面我們一步一步來看看數(shù)據(jù)模板如何做到化腐朽為神奇的！
一些前置條件
假設(shè)你已了解了MVVM設(shè)計模式
假設(shè)你已了解了一些數(shù)據(jù)綁定知識
假設(shè)你已了解了一些樣式知識
代碼準備
-
首先準備一個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="技術(shù)售后部",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="研發(fā)部",Job="高級軟件工程師",Sex=Sex.Male,Email="Wang.Xiaowei@wpf.com"}, }; } }
沒有數(shù)據(jù)模板
準備好沒有使用數(shù)據(jù)模板的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>
運行下程序，就會出現(xiàn)這樣的界面
熟悉.Net的同學(xué)碎捺，應(yīng)該看出來每一項顯示的是對象的ToString方法返回的值路鹰。因為我們集合中存放的是復(fù)雜類型的對象，如果沒有數(shù)據(jù)模板收厨，ListBox默認就會用ToString去顯示晋柱。而ToString方法默認返回的就是對象的類型限定名潦牛。
既然了解到這個原理鹏控，那我們重載實現(xiàn)下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}";
}
}
再次運行程序以故，結(jié)果如下
這次算是顯示出一些有用信息了间影，但這樣的UI體驗肖油，未免太差输钩。如何讓我們的數(shù)據(jù)呈現(xiàn)更加吸引人呢反镇？下面就輪到數(shù)據(jù)模板大顯身手了奋蔚。
應(yīng)用數(shù)據(jù)模板
直接上應(yīng)用了數(shù)據(jù)模板的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>
其實數(shù)據(jù)模板就是把對象的屬性綁定到不同的UI控件上势腮，然后通過合理的布局联贩，就能顯示讓數(shù)據(jù)顯示的更加美觀了。
怎么樣捎拯？效果完全就不一樣了泪幌，到這里，相信同學(xué)你應(yīng)該能get到數(shù)據(jù)模板的作用了署照！當(dāng)然這個只是數(shù)據(jù)模板的最基本用法祸泪，其實數(shù)據(jù)模板還有其他更強大的功能。比如可以通過數(shù)據(jù)模板讓男性員工的名字顯示成淡藍色建芙，女性的名字顯示成淡綠色没隘。這個功能下面觸發(fā)器的部分會介紹。
我們還是接著數(shù)據(jù)模板定義這部分內(nèi)容禁荸，我們是通過重寫了ListBox.ItemTemplate來定義數(shù)據(jù)模板的右蒲，但如果在其他控件我們也要顯示這樣阀湿，豈不是在定義一遍這個數(shù)據(jù)模板？這樣明顯不符合我們代碼復(fù)用的原則瑰妄。還好陷嘴，在wpf中，我們可以通過資源的方式來定義通用的數(shù)據(jù)模板间坐，代碼如下
<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>
此時我們發(fā)現(xiàn)灾挨，并不需要重新定義ListBox.ItemTemplate，但運行結(jié)果和上面保持一致竹宋！
數(shù)據(jù)觸發(fā)器
前面我們提到可以通過數(shù)據(jù)模板讓男性員工的名字顯示成淡藍色涨醋，女性的名字顯示成淡綠色，其實就可以通過數(shù)據(jù)觸發(fā)器來實現(xiàn)這樣的功能逝撬。
這里簡單說下觸發(fā)器的作用，更詳細的去看[微軟的官方文檔](DataTrigger Class (System.Windows) | Microsoft Learn)乓土。觸發(fā)器就是當(dāng)綁定的數(shù)據(jù)滿足某個條件時宪潮，可以去設(shè)置一些控件的屬性值，或者執(zhí)行一些動作（例如動畫）趣苏。
基于觸發(fā)器原理狡相，實現(xiàn)的代碼如下
<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>
運行結(jié)果
我們可以看到是通過修改顯示名字的TextBlock的字體顏色來實現(xiàn)我們需求的，其實我們可以同時設(shè)置多個控件的屬性來滿足更復(fù)雜的需求的食磕。
到這里尽棕，淺談數(shù)據(jù)模板就接近尾聲了，所謂淺談彬伦，其實把數(shù)據(jù)模板的核心用法都覆蓋到了滔悉，在實際項目開發(fā)中，都是基于這些知識的靈活應(yīng)用单绑！
最后
奉上源代碼 https://gitee.com/liuww06/wpfpractice/tree/master/src/WpfPractice.DataTemplateDemo
