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