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代码如下所示:

<Windowx: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><ComboBoxx:Name="myColorComBox"HorizontalAlignment="Left"Margin="110,79,0,0"VerticalAlignment="Top"Width="309"Height="48"><!--ItemTemplate--><ComboBox.ItemTemplate><!--DataTemplate开始--><DataTemplate><Grid><Grid.ColumnDefinitions><ColumnDefinitionWidth="36"/><ColumnDefinitionWidth="100*"/></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinitionHeight="50*"/><RowDefinitionHeight="50*"/></Grid.RowDefinitions><!--绑定数据对象Image属性--><ImageSource="{Binding Image}"Width="32"Height="32"Margin="3,3,3,3"Grid.Row="0"Grid.Column="0"Grid.RowSpan="2"/><!--绑定数据对象Name属性--><TextBlockText="{Binding Name}"FontSize="12"Grid.Row="0"Grid.Column="1"HorizontalAlignment="Left"VerticalAlignment="Center"/><!--绑定数据对象Desc属性--><TextBlockText="{Binding Desc}"FontSize="10"Grid.Row="1"Grid.Column="1"HorizontalAlignment="Left"VerticalAlignment="Center"/></Grid></DataTemplate><!--DataTemplate结束--></ComboBox.ItemTemplate></ComboBox><LabelContent="员工: "HorizontalAlignment="Left"Margin="66,92,0,0"VerticalAlignment="Top"/><ButtonContent="显示"HorizontalAlignment="Left"Margin="110,166,0,0"VerticalAlignment="Top"Width="75"Height="22"Click="Button_Click"/></Grid></Window>

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

usingSystem;
usingSystem.Collections.Generic;
usingSystem.Windows;
namespaceWpfAppDemo{
publicpartialclassMainWindow : Window    {
publicMainWindow()
        {
InitializeComponent();
//初始化数据,并绑定LodData();
        }
privatevoidLodData()
        {
IList<empoyee>customList=newList<empoyee>();
//项目文件中新建一个images文件夹,并上传了001.png,002.png,003.pngcustomList.Add(newempoyee() { ID="001", Name="Jack", Image="images/001.jpg", Desc="描述信息1" });
customList.Add(newempoyee() { ID="002", Name="Smith", Image="images/002.jpg", Desc="描述信息2" });
customList.Add(newempoyee() { ID="003", Name="Json", Image="images/003.jpg", Desc="描述信息3" });
this.myColorComBox.ItemsSource=customList;//数据源绑定this.myColorComBox.SelectedValue=customList[1];//默认选择项        }
privatevoidButton_Click(objectsender, RoutedEventArgse)
        {
//显示选择的员工ID信息MessageBox.Show((this.myColorComBox.SelectedItemasempoyee).ID);
        }
    }
//定义员工类publicclassempoyee    {
publicstringID { get; set; }
publicstringName { get; set; }
publicstringImage { get; set; }
publicstringDesc { get; set; }
    }
}

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

3 效果演示


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

5.jpg

相关文章
|
5月前
|
算法 C# UED
浅谈WPF之控件模板和数据模板
WPF不仅支持传统的Windows Forms编程的用户界面和用户体验设计,同时还推出了以模板为核心的新一代设计理念。在WPF中,通过引入模板,将数据和算法的“内容”和“形式”进行解耦。模板主要分为两大类:数据模板【Data Template】和控件模板【Control Template】。
94 8
|
8月前
|
C# 索引
WPF技术之ComboBox控件
WPF ComboBox控件是一个下拉列表框,它允许用户从列表中选择一个或多个项。它提供了一种简洁和交互性强的方式来选择数据。
159 0
WPF 点击 Datagrid 中的TextBox 控件获取其所在行的数据
WPF 点击 Datagrid 中的TextBox 控件获取其所在行的数据
WPF中如何获取选中行/单元格所在行的数据
WPF中如何获取选中行/单元格所在行的数据
|
前端开发 C#
WPF 之 数据与命令绑定 (MVVM方式)
WPF 之 数据与命令绑定 (MVVM方式)
160 0
WPF 之 数据与命令绑定 (MVVM方式)
|
C#
关于WPF的ComboBox中Items太多而导致加载过慢的问题
原文:关于WPF的ComboBox中Items太多而导致加载过慢的问题                                     【WFP疑难】关于WPF的ComboBox中Items太多而导致加载过慢的问题                                      ...
1291 0
|
C#
WPF关于控件 父级控件,子级控件,控件模板中的控件,等之间的相互访问
原文:WPF关于控件 父级控件,子级控件,控件模板中的控件,等之间的相互访问 1,在菜单中访问 弹出菜单的控件 var mi = sender as MenuItem;//菜单条目 MenuItem var cm = mi.
938 0
|
前端开发 测试技术 C#
WPF MVVM UI分离之《交互与数据分离》
原文:WPF MVVM UI分离之《交互与数据分离》 在我们使用WPF过程中,不可避免并且超级喜欢使用MVVM框架。 那么,使用MVVM的出发点是视觉与业务逻辑分离,即UI与数据分离 诸如下面的问题: 删除操作,假如需要先执行一部分数据的处理,然后删除界面列表中的子项,之后再执行其它数据的处理。
1060 0
|
14天前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库