WPF的ComboBox 数据模板自定义

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、编译运行，如果运气不错的话，应该能看到如下的界面：

转载于:https://www.cnblogs.com/jinxiaobao7n/p/4793708.html