你的位置:首页 > ASP.net教程

[ASP.net教程]WPF的ComboBox 数据模板自定义


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

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

代码如下:

 1 <Window x:Class="WpfAppDemo.MainWindow" 2     ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3     ="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 WpfAppDemo18 {19   /// <summary>20   /// MainWindow.xaml 的交互逻辑21   /// </summary>22   public partial class MainWindow : Window23   {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.png36       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 empoyee60   {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、编译运行,如果运气不错的话,应该能看到如下的界面: