WPF ComboBox 数据模板-阿里云开发者社区

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">
        <ComboBox x:Name="myColorComBox" HorizontalAlignment="Left" Margin="110,79,0,0" 
                  VerticalAlignment="Top" Width="309" Height="48"  >
            <!--ItemTemplate-->
            <ComboBox.ItemTemplate>
                <!--DataTemplate开始-->
                <DataTemplate>
                        <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 效果演示

编译运行，如果运气不错的话，应该能看到如下的界面：