美文网首页
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分组多选

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