WPF-ComboBox分组

2020-04-05  本文已影响0人  写前端的大叔

在项目开发的时候用到了ComboBox分组的功能,开始本来想打算自己写一个自定义控件的,后来查了下相关资料,系统组件中已经支持ComboBox的分组功能,如下所示为分组后的效果图,下面来简单介绍下怎么实现的。

ComboBox.png

1.添加ComboBox控件

首先在XAML文件中添加一个ComboBox控件,并添加ComboBox.GroupStyle,分组主要使用的是这个节点,然后再通过TextBlock来显示分组的名称。

<ComboBox x:Name="comboBox" >
            <ComboBox.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Name}"/>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                </GroupStyle>
            </ComboBox.GroupStyle>
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Name}"/>
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>

2.添加数据

定义实体类
首先定义一个实体类,定义NameCategory两个属性,分别用于显示列表上的名称和组名。

public class Item
    {
        public string Name { get; set; }
        public string Category { get; set; }
    }

添加数据
定义一个List,再往数组中添加测试数据,然后再使用ListCollectionView来组装列表数据,最后将ListCollectionView对象赋值给ComboBoxItemsSource,如下所示:

List<Item> items = new List<Item>();
items.Add(new Item() { Name = "Item1", Category = "A"  });
items.Add(new Item() { Name = "Item2", Category = "A" });
items.Add(new Item() { Name = "Item3", Category = "A" });
items.Add(new Item() { Name = "Item4", Category = "B" });
items.Add(new Item() { Name = "Item5", Category = "B" });
ListCollectionView lcv = new ListCollectionView(items);
lcv.GroupDescriptions.Add(new PropertyGroupDescription("Category"));
this.comboBox.ItemsSource = lcv;

只需简单的两步,就可以实现一个下拉分组的列表。
个人博客

上一篇 下一篇

猜你喜欢

热点阅读