WPF的ComboBox 数据模板自定义

最新推荐文章于 2024-07-25 16:38:17 发布

JackWang-CUMT

最新推荐文章于 2024-07-25 16:38:17 发布

阅读量3.9k

点赞数

分类专栏： C# 文章标签： combo box wpf

本文链接：https://blog.csdn.net/isaboy/article/details/48267269

版权

C# 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

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

代码如下：

</pre><pre name="code" class="html"><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 ="001", Name = "Jack" ,Image="images/001.png",Desc="this is good gay!"});
            customList.Add(new empoyee() { ID = "002", Name = "Smith", Image = "images/002.png", Desc = "this is great gay!" });
            customList.Add(new empoyee() { ID = "003", Name = "Json", Image = "images/003.png", Desc = "this is the bset gay!" });


            this.myColorComBox.ItemsSource = customList;//数据源绑定
            this.myColorComBox.SelectedValue = customList[1];//默认选择项
            
        }


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