美文网首页
WPF-ComboBox分组

WPF-ComboBox分组

作者: 写前端的大叔 | 来源:发表于2020-04-05 10:17 被阅读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;
    

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

    相关文章

      网友评论

          本文标题:WPF-ComboBox分组

          本文链接:https://www.haomeiwen.com/subject/udiyphtx.html