如何在WPF中实现ComboBox多选

在前面我介绍过WPFDevelopers这个项目

https://blog.csdn.net/zhaotianff/article/details/142941026

WPFDevelopers是一个优秀的WPF UI库。

它里面包含了一个MultiSelectComboBox控件，可以支持多选。

使用方法如下：

1、首先我们使用nuget引入 WPFDevelopers 0.0.0.2

2、然后修改App.xaml如下

复制代码

 1 <Application x:Class="WDMultiSelectComboBoxDemo.App"
 2              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4              xmlns:local="clr-namespace:WDMultiSelectComboBoxDemo"
 5              xmlns:wd="https://github.com/WPFDevelopersOrg/WPFDevelopers"
 6              StartupUri="MainWindow.xaml">
 7     <Application.Resources>
 8         <ResourceDictionary>
 9             <ResourceDictionary.MergedDictionaries>
10                 <ResourceDictionary Source="pack://application:,,,/WPFDevelopers;component/Themes/Theme.xaml" />
11                 <wd:Resources />
12             </ResourceDictionary.MergedDictionaries>
13         </ResourceDictionary>
14     </Application.Resources>
15 </Application>

3、在界面上放置MultiSelectComboBox

复制代码

 1 <Window x:Class="WDMultiSelectComboBoxDemo.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 5         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 6         xmlns:local="clr-namespace:WDMultiSelectComboBoxDemo"
 7         mc:Ignorable="d"
 8         Title="MainWindow" Height="450" Width="800"   
 9         xmlns:wd="https://github.com/WPFDevelopersOrg/WPFDevelopers">
10     <StackPanel>
11         <wd:MultiSelectComboBox Name="combox">
12 
13         </wd:MultiSelectComboBox>
14     </StackPanel>
15 </Window>

4、设置多选项显示时的分隔符

默认是 ;，我们可以设置为其它字符，例如|

复制代码

1 <wd:MultiSelectComboBox Name="combox" Delimiter="|">
2 
3 </wd:MultiSelectComboBox>

5、设置显示类型

通过MultiSelectComboBox.ShowType属性可以设置MultiSelectComboBox的显示类型

可选Tag和Text（默认）

Text显示效果

Tag显示效果

6、启用/禁用搜索

通过MultiSelectComboBox.IsSearch属性可以设置MultiSelectComboBox是否显示搜索框

IsSearch = true

IsSearch = false

7、增加多列显示

这里我们可以通过数据模板来控制显示，

这个功能不过多介绍，跟其它列表控件的数据模板使用方法一致。

如果对数据模板功能不了解，可以参考下面的链接

https://learn.microsoft.com/zh-cn/dotnet/desktop/wpf/data/data-templating-overview

复制代码

 1 <wd:MultiSelectComboBox
 2     Name="cbbb"
 3     Width="150"
 4     Height="60"
 5     IsSearch="False"
 6     ItemsSource="{Binding Students}"
 7     SelectedItemsExt="{Binding Selectitems, Mode=TwoWay}">
 8     <wd:MultiSelectComboBox.ItemContainerStyle>
 9         <Style BasedOn="{StaticResource WD.DefaultMultiSelectComboBoxItem}" TargetType="wd:MultiSelectComboBoxItem">
10             <Setter Property="IsSelected" Value="{Binding IsChecked}" />
11         </Style>
12     </wd:MultiSelectComboBox.ItemContainerStyle>
13     <wd:MultiSelectComboBox.ItemTemplate>
14         <DataTemplate>
15             <Grid>
16                 <Grid.ColumnDefinitions>
17                     <ColumnDefinition Width="*" SharedSizeGroup="Col1" />
18                     <ColumnDefinition
19                         Width="Auto"
20                         MinWidth="200"
21                         SharedSizeGroup="Col2" />
22                     <ColumnDefinition
23                         Width="Auto"
24                         MinWidth="100"
25                         SharedSizeGroup="Col3" />
26                 </Grid.ColumnDefinitions>
27                 <TextBlock
28                     Grid.Column="0"
29                     Padding="10"
30                     VerticalAlignment="Center"
31                     Text="{Binding Name}" />
32                 <TextBlock
33                     Grid.Column="1"
34                     Padding="10"
35                     VerticalAlignment="Center"
36                     Text="{Binding Description}" />
37                 <TextBlock
38                     Grid.Column="2"
39                     Padding="10"
40                     VerticalAlignment="Center"
41                     Text="{Binding Age}" />
42             </Grid>
43         </DataTemplate>
44     </wd:MultiSelectComboBox.ItemTemplate>
45 </wd:MultiSelectComboBox>

运行效果

8、添加项

我们先创建一个实体Student

复制代码

 1  public class Student
 2  {
 3      public int Id { get; set; }
 4 
 5      public string Name { get; set; }
 6 
 7      public override string ToString()
 8      {
 9          return $"{Id}-{Name}";
10      }
11  }

然后创建一个实体列表并绑定到MultiSelectComboBox上

复制代码

1 ObservableCollection<Student> students = new ObservableCollection<Student>();
2 students.Add(new Student() { Id = 1, Name = "张三" });
3 students.Add(new Student() { Id = 2, Name = "李四" });
4 students.Add(new Student() { Id = 3, Name = "王五" });
5 
6  //设置数据源
7 this.combox.ItemsSource = students;

也可以直接使用系统提供的基础类型，如string、int等

对于系统提供的基础类型，下位项和选中项会显示实际值。

对于对象，如果我们需要控制它的下位项和选中项的显示值，可以通过重写ToString()函数（不指定字段）或者通过DisplayMemberPath属性指定字段。

9、手动设置选中项

复制代码

1  //假设选中1，3项
2  var student1 = students.ElementAt(0);
3  var student3 = students.ElementAt(2);
4  var selectedList = new ObservableCollection<Student>() { student1, student3 };
5 
6  //设置选中项
7  this.combox.SelectedItemsExt = selectedList;

10、全选/取消全选

复制代码

1 //全选
2 this.combox.SelectAll();
3 
4 //取消全选
5 UnselectAll

11、获取选中项

复制代码

1  var selectedItems = this.combox.SelectedItems;
2 
3  foreach (Student student in selectedItems)
4  {
5      MessageBox.Show(student.Id.ToString() + "-" + student.Name);
6  }

运行效果：

示例代码

下载