WPF中的控件，有不少都是需要绑定数据的，例如ComboBox控件可以绑定数据，从下拉列表中进行选择。默认情况下，ComboBox控件绑定的数据从显示上比较单一，只能显示固定的文本信息。而为了更好的突出数据展现效果，这里需要使用到WPF中的另一种强大的功能，即数据模板（DataTemplate ）。
控件的数据模板为定义数据的展现提供了强大的灵活性。 WPF 控件具有支持自定义数据展现的内置功能。为了更好的介绍控件的数据模板功能，下面给出一个具体的示例，用数据模板来自定义ComboBox控件的UI显示效果，让其下拉框列表可以同时显示多个属性值，其中包含图片信息。
1 WPF项目结构
首先，新建一个WPF应用程序WpfAppDemo，并新建一个images文件夹，在images文件夹中上传图片素材，项目结构如下：
注意：其中的三个图片素材依次选中，并设置其资源输出生成操作为内容。具体如下图所示：
2 WPF代码实现
在主界面MainWindow.xaml文件中添加一个Label、ComboBox 和Button控件,如下图：
主界面MainWindow.xaml代码如下所示：
<Window x:Class="WpfAppDemo.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:WpfAppDemo" mc:Ignorable="d" Title="MainWindow" Height="320" Width="520"> <Grid> <ComboBox x:Name="myColorComBox" HorizontalAlignment="Left" Margin="110,79,0,0" VerticalAlignment="Top" Width="309" Height="48" > <!--ItemTemplate--> <ComboBox.ItemTemplate> <!--DataTemplate开始--> <DataTemplate> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="36"/> <ColumnDefinition Width="100*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="50*"/> <RowDefinition Height="50*"/> </Grid.RowDefinitions> <!--绑定数据对象Image属性--> <Image Source="{Binding Image}" Width="32" Height="32" Margin="3,3,3,3" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" /> <!--绑定数据对象Name属性--> <TextBlock Text="{Binding Name}" FontSize="12" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center"/> <!--绑定数据对象Desc属性--> <TextBlock Text="{Binding Desc}" FontSize="10" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center"/> </Grid> </DataTemplate> <!--DataTemplate结束--> </ComboBox.ItemTemplate> </ComboBox> <Label Content="员工: " HorizontalAlignment="Left" Margin="66,92,0,0" VerticalAlignment="Top"/> <Button Content="显示" HorizontalAlignment="Left" Margin="110,166,0,0" VerticalAlignment="Top" Width="75" Height="22" Click="Button_Click"/> </Grid> </Window>
ComboBox.ItemTemplate标签下有一个DataTemplate标签，其中内置了数据模板的相关元素，里面用到了Grid布局，其中将图片和文本信息依次绑定到Image对象和TextBlock对象上。其中的数据绑定由后台代码进行定义，后台代码示意如下：
using System; using System.Collections.Generic; using System.Windows; namespace WpfAppDemo { public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); //初始化数据，并绑定 LodData(); } private void LodData() { IList<empoyee> customList = new List<empoyee>(); //项目文件中新建一个images文件夹，并上传了001.png，002.png,003.png customList.Add(new empoyee() { ID = "001", Name = "Jack", Image = "images/001.jpg", Desc = "描述信息1" }); customList.Add(new empoyee() { ID = "002", Name = "Smith", Image = "images/002.jpg", Desc = "描述信息2" }); customList.Add(new empoyee() { ID = "003", Name = "Json", Image = "images/003.jpg", Desc = "描述信息3" }); this.myColorComBox.ItemsSource = customList;//数据源绑定 this.myColorComBox.SelectedValue = customList[1];//默认选择项 } private void Button_Click(object sender, RoutedEventArgs e) { //显示选择的员工ID信息 MessageBox.Show((this.myColorComBox.SelectedItem as empoyee).ID); } } //定义员工类 public class empoyee { public string ID { get; set; } public string Name { get; set; } public string Image { get; set; } public string Desc { get; set; } } }
其中在窗体加载过程中，调用LoadData()方法来加载数据，并通过this.myColorComBox.ItemsSource = customList进行数据源绑定。每个数据项是empoyee类的实例，有4个属性。
3 效果演示
编译运行，如果运气不错的话，应该能看到如下的界面：