WPF ComboBox 数据模板-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

WPF ComboBox 数据模板

简介: WPF中的控件,有不少都是需要绑定数据的,例如ComboBox控件可以绑定数据,从下拉列表中进行选择。默认情况下,ComboBox控件绑定的数据从显示上比较单一,只能显示固定的文本信息。而为了更好的突出数据展现效果,这里需要使用到WPF中的另一种强大的功能,即数据模板(DataTemplate )

WPF中的控件,有不少都是需要绑定数据的,例如ComboBox控件可以绑定数据,从下拉列表中进行选择。默认情况下,ComboBox控件绑定的数据从显示上比较单一,只能显示固定的文本信息。而为了更好的突出数据展现效果,这里需要使用到WPF中的另一种强大的功能,即数据模板(DataTemplate )。

控件的数据模板为定义数据的展现提供了强大的灵活性。 WPF 控件具有支持自定义数据展现的内置功能。为了更好的介绍控件的数据模板功能,下面给出一个具体的示例,用数据模板来自定义ComboBox控件的UI显示效果,让其下拉框列表可以同时显示多个属性值,其中包含图片信息。

1 WPF项目结构


首先,新建一个WPF应用程序WpfAppDemo,并新建一个images文件夹,在images文件夹中上传图片素材,项目结构如下:

1.jpg

注意:其中的三个图片素材依次选中,并设置其资源输出生成操作为内容。具体如下图所示:

2.jpg

2 WPF代码实现


在主界面MainWindow.xaml文件中添加一个Label、ComboBox 和Button控件,如下图:

3.jpg

主界面MainWindow.xaml代码如下所示:

<Window x:Class="WpfAppDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfAppDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="320" Width="520">
    <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>

ComboBox.ItemTemplate标签下有一个DataTemplate标签,其中内置了数据模板的相关元素,里面用到了Grid布局,其中将图片和文本信息依次绑定到Image对象和TextBlock对象上。其中的数据绑定由后台代码进行定义,后台代码示意如下:

using System;
using System.Collections.Generic;
using System.Windows;
namespace WpfAppDemo
{
    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.jpg", Desc = "描述信息1" });
            customList.Add(new empoyee() { ID = "002", Name = "Smith", Image = "images/002.jpg", Desc = "描述信息2" });
            customList.Add(new empoyee() { ID = "003", Name = "Json", Image = "images/003.jpg", Desc = "描述信息3" });
            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; }
    }
}

其中在窗体加载过程中,调用LoadData()方法来加载数据,并通过this.myColorComBox.ItemsSource = customList进行数据源绑定。每个数据项是empoyee类的实例,有4个属性。

3 效果演示


编译运行,如果运气不错的话,应该能看到如下的界面:

5.jpg

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章