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