zoukankan      html  css  js  c++  java
  • 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、编译运行,如果运气不错的话,应该能看到如下的界面:


     

  • 相关阅读:
    Effective C# 学习笔记(三十五) 了解PLINQ如何实现并行算法
    Effective C# 学习笔记(三十八)理解Dynamic的得与失
    转单例的分析
    获取系统当前音量 和 监听系统音量 ios
    (转) iphone开发资源汇总
    xcode show line numbers
    为了编程方便的效率宏定义的一些代码
    ios6下cocos2d & ipad 调用摄像头报错问题 (在竖屏情况下调用Camera 会导致转屏)
    转KVC
    不记住的
  • 原文地址:https://www.cnblogs.com/isaboy/p/cusComboBox.html
Copyright © 2011-2022 走看看