WPF的ComboBox 有些時候不能滿足用戶需求，需要對數據內容和樣式進行自定義，下面就簡要介紹一下用數據模板（DataTemplate）的方式對ComboBox 內容進行定制：
原型設計如下：
步驟：
1、新建一個WPF應用程序WpfAppDemo（VS2012)，並新建一個images文件夾（上傳圖片素材）;
2、在主界面MainWindow.xaml文件中添加一個Label、ComboBox 和Button控件,如下圖：
代碼如下：
1 <Window x:Class="WpfAppDemo.MainWindow"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 Title="MainWindow" Height="350" Width="525">
5 <Grid>
6 <ComboBox x:Name="myColorComBox" HorizontalAlignment="Left" Margin="110,79,0,0" VerticalAlignment="Top" Width="309" Height="48" >
7 <!--ItemTemplate-->
8 <ComboBox.ItemTemplate>
9 <!--DataTemplate開始-->
10 <DataTemplate>
11 <Grid>
12 <Grid.ColumnDefinitions>
13 <ColumnDefinition Width="36"/>
14 <ColumnDefinition Width="100*"/>
15 </Grid.ColumnDefinitions>
16 <Grid.RowDefinitions>
17 <RowDefinition Height="50*"/>
18 <RowDefinition Height="50*"/>
19 </Grid.RowDefinitions>
20 <!--綁定數據對象Image屬性-->
21 <Image Source="{Binding Image}" Width="32" Height="32" Margin="3,3,3,3" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" />
22 <!--綁定數據對象Name屬性-->
23 <TextBlock Text="{Binding Name}" FontSize="12" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center"/>
24 <!--綁定數據對象Desc屬性-->
25 <TextBlock Text="{Binding Desc}" FontSize="10" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center"/>
26 </Grid>
27 </DataTemplate>
28 <!--DataTemplate結束-->
29 </ComboBox.ItemTemplate>
30 </ComboBox>
31 <Label Content="員工: " HorizontalAlignment="Left" Margin="66,92,0,0" VerticalAlignment="Top"/>
32 <Button Content="顯示" HorizontalAlignment="Left" Margin="110,166,0,0" VerticalAlignment="Top" Width="75" Height="22" Click="Button_Click"/>
33
34 </Grid>
35
36 </Window>
3、在主界面MainWindow.xaml.cs文件中進行邏輯處理，代碼如下：
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Text; 5 using System.Threading.Tasks; 6 using System.Windows; 7 using System.Windows.Controls; 8 using System.Windows.Data; 9 using System.Windows.Documents; 10 using System.Windows.Input; 11 using System.Windows.Media; 12 using System.Windows.Media.Imaging; 13 using System.Windows.Navigation; 14 using System.Windows.Shapes; 15
16
17 namespace WpfAppDemo 18 { 19 /// <summary>
20 /// MainWindow.xaml 的交互邏輯 21 /// </summary>
22 public partial class MainWindow : Window 23 { 24 public MainWindow() 25 { 26 InitializeComponent(); 27 //初始化數據，並綁定
28 LodData(); 29 } 30
31
32 private void LodData() 33 { 34 IList<empoyee> customList = new List<empoyee>(); 35 //項目文件中新建一個images文件夾，並上傳了001.png，002.png,003.png
36 customList.Add(new empoyee() { ID ="001", Name = "Jack" ,Image="images/001.png",Desc="this is good gay!"}); 37 customList.Add(new empoyee() { ID = "002", Name = "Smith", Image = "images/002.png", Desc = "this is great gay!" }); 38 customList.Add(new empoyee() { ID = "003", Name = "Json", Image = "images/003.png", Desc = "this is the bset gay!" }); 39
40
41 this.myColorComBox.ItemsSource = customList;//數據源綁定
42 this.myColorComBox.SelectedValue = customList[1];//默認選擇項
43
44 } 45
46
47 private void Button_Click(object sender, RoutedEventArgs e) 48 { 49 //顯示選擇的員工ID信息
50 MessageBox.Show((this.myColorComBox.SelectedItem as empoyee).ID); 51 } 52
53
54
55
56
57 } 58 //定義員工類
59 public class empoyee 60 { 61 public string ID { get; set; } 62 public string Name { get; set; } 63 public string Image { get; set; } 64 public string Desc { get; set; } 65
66 } 67 }
4、編譯運行，如果運氣不錯的話，應該能看到如下的界面：
