美文网首页
WPF-ComboBox分组多选

WPF-ComboBox分组多选

作者: 写前端的大叔 | 来源:发表于2020-04-06 18:40 被阅读0次

之前写过一篇文件,介绍的是ComboBox分组,但只能选择一个,不能进行多选,这篇文件介绍的是使用ComboBox进行分组,并且还能选择多条数据,效果如下所示:

ComboBox多选分组.png
实现原理相对简单,主要是自定义ComboBoxItemTemplate,使用一个ListBox来显示ComboBox中的每一项,在给ComboBox设置ItemsSource的时候,只需添加一条数据即可,代码如下所示:
xaml
<Window x:Class="WpfApp1.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:WpfApp1"
        mc:Ignorable="d" MouseUp="Window_MouseUp"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <ComboBox HorizontalContentAlignment="Stretch" Height="25" Name="cmb">
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <ListBox HorizontalContentAlignment="Stretch" ItemsSource="{Binding Path=List}" SelectionMode="Multiple" SelectionChanged="ListBox_SelectionChanged_1"  MouseUp="ListBox_MouseUp">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="{Binding Name}"/>
                                </StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                        <ListBox.GroupStyle>
                            <GroupStyle>
                                <GroupStyle.HeaderTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding Name}"/>
                                    </DataTemplate>
                                </GroupStyle.HeaderTemplate>
                            </GroupStyle>
                        </ListBox.GroupStyle>
                    </ListBox>
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>
    </Grid>
</Window>

.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 WpfApp1
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            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"));
            List<ComboxTiem> cbList = new List<ComboxTiem>();
            ComboxTiem cb = new ComboxTiem();
            cb.List = lcv;
            cbList.Add(cb);
            this.cmb.ItemsSource = cbList;
            
        }
        
        private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            e.Handled = true;
        }

        private void ListBox_MouseUp(object sender, MouseButtonEventArgs e)
        {
            e.Handled = true;
        }

        private void ListBox_SelectionChanged_1(object sender, SelectionChangedEventArgs e)
        {
            ListBox lb = (ListBox)sender;
            var SelectedItems = lb.SelectedItems;
            var SelectedIndex = lb.SelectedIndex;
            e.Handled = true;
        }
    }

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

    public class ComboxTiem {
        public ListCollectionView List { get; set; }
    }
}

其实现原理跟ComboBox分组差不多,只是多了一个ListBox
个人博客

相关文章

  • WPF-ComboBox分组多选

    之前写过一篇文件,介绍的是ComboBox分组,但只能选择一个,不能进行多选,这篇文件介绍的是使用ComboBox...

  • WPF-ComboBox分组

    在项目开发的时候用到了ComboBox分组的功能,开始本来想打算自己写一个自定义控件的,后来查了下相关资料,系统组...

  • element-ui 多选下拉框分组选择互斥

    在开发的时候可能会遇到这样的需求:一个多选的下拉框里有很多分组,因为业务需求导致分组之内的选项可以多选,而一旦选中...

  • 任务

    内机分组 手机表单 控疾bug 考勤人员接口 考勤人员删除接口 人员多选控件

  • swift实现分组单选,多选,标签流

    因在项目中多次遇到了单选,多选的需求,所以在这里总结下,以便下次可以有个参考或者直接可以用的。 OC版 在DEMO...

  • IOS实现分组单选,多选,标签流

    因在项目中多次遇到了单选,多选的需求,所以在这里总结下,以便下次可以有个参考或者直接可以用的。 swift版 在D...

  • vue checkbox-group的全选和反选

    场景 界面截图 界面代码 在界面中有推送分组和推送2组数据,分别可以多选。使用el-checkbox-group可...

  • Android Q ExifInterface获取图片位置

    前言 最近写一个lib,多选图片时,可以按照地理位置分组。android Q之前的版本,直接可以通过path路径的...

  • 做一个多选的select下拉框

    新功能的要求做一个select多选下拉框,如图所示~ html: 可以分组,模糊搜索,调用该插件非常方便~点击下载...

  • 正则()[]{}|?:用法

    圆括号()是组,主要应用在限制多选结构的范围/分组/捕获文本/环视/特殊模式处理方括号是单个匹配 字符集/排除字符...

网友评论

      本文标题:WPF-ComboBox分组多选

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