WPF的ComboBox 数据模板自定义

WPF的ComboBox 有些时候不能满足用户需求，需要对数据内容和样式进行自定义，下面就简要介绍一下用数据模板（DataTemplate）的方式对ComboBox 内容进行定制：
原型设计如下：

步骤：
1、新建一个WPF应用程序WpfAppDemo（VS2012)，并新建一个images文件夹（上传图片素材）;
2、在主界面MainWindow.xaml文件中添加一个Label、ComboBox 和Button控件,如下图：

代码如下：

 <Window x:Class="WpfAppDemo.MainWindow"

         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

         Title="MainWindow" Height="350" Width="525">

     <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>

3、在主界面MainWindow.xaml.cs文件中进行逻辑处理，代码如下：

 using System;

 using System.Collections.Generic;

 using System.Linq;

 using System.Text;

 using System.Threading.Tasks;

 using System.Windows;

 using System.Windows.Controls;

 using System.Windows.Data;

 using System.Windows.Documents;

 using System.Windows.Input;

 using System.Windows.Media;

 using System.Windows.Media.Imaging;

 using System.Windows.Navigation;

 using System.Windows.Shapes;

 namespace WpfAppDemo

 {

     /// <summary>

     /// MainWindow.xaml 的交互逻辑

     /// </summary>

     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 ="", Name = "Jack" ,Image="images/001.png",Desc="this is good gay!"});

             customList.Add(new empoyee() { ID = "", Name = "Smith", Image = "images/002.png", Desc = "this is great gay!" });

             customList.Add(new empoyee() { ID = "", Name = "Json", Image = "images/003.png", Desc = "this is the bset gay!" });

             this.myColorComBox.ItemsSource = customList;//数据源绑定

             this.myColorComBox.SelectedValue = customList[];//默认选择项

         }

         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; }

     }

 }

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