C# WPF 多选ComboBox实现
目录
- 简介
- 案例及详解
- 后记
- 参考资料
简介
C# WPF中自带Combobox(下拉列表)的控件,但是没有多选的Combobox控件。而在实际项目中,我们经常需要使用多选的Combobox。
案例及详解
效果展示
文件目录展示
Demo分为两个Project,第一个Project是自定义的多选ComboBox,第二Project则是测试代码。实际使用只需要把第一个项目中两个源文件(MultiSelectComboBox.xmal和MultiSelectComboBox.xmal.cs)放到实际项目中即可。这两个文件也是最核心的文件。具体讲解见代码注释。
详细代码
MultiSelectComboBox.xmal
<!-- MultiSelectComboBox.xmal -->
<UserControl x:Class="MultiSelectComboBox.MultiSelectComboBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<ComboBox
x:Name="MultiSelectCombo"
SnapsToDevicePixels="True"
OverridesDefaultStyle="True"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.CanContentScroll="True"
IsSynchronizedWithCurrentItem="True">
<!-- 设置ComboBox下拉列表Item的样式模板 -->
<ComboBox.ItemTemplate>
<!-- 下拉列表Item的样式数据模板绑定CheckBox -->
<DataTemplate>
<CheckBox Content="{Binding Title}" IsChecked="{Binding Path=IsSelected, Mode=TwoWay}" Tag="{RelativeSource FindAncestor, AncestorType={x:Type ComboBox}}" Click="CheckBox_Click"/>
</DataTemplate>
</ComboBox.ItemTemplate>
<!-- 设置整个ComboBox的样式模板 -->
<!-- 该样式模板由两部分组成,一个是ToggleButton,一个是Popup -->
<ComboBox.Template>
<ControlTemplate TargetType="ComboBox">
<Grid >
<!-- 设置ToggleButton的样式模板,IsChecked:该属性与Combox下拉列表是否打开的状态绑定 -->
<ToggleButton x:Name="ToggleButton" Grid.Column="2" IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
Focusable="false" ClickMode="Press" HorizontalContentAlignment="Left" >
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<Grid>
<!-- 该Grid分为两列,一列放多选的显示文本,一列放箭头图标 -->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="18"/>
</Grid.ColumnDefinitions>
<!-- Border相当于html中的Span标签, ColumnSpan:该Border跨两列,CornerRadius:设置ToggleButton圆角样式的弧度。按代码位置,该Border在最上层。-->
<Border x:Name="Border" Grid.ColumnSpan="2" CornerRadius="5" Background="White" BorderBrush="Black" BorderThickness="1,1,1,1">
</Border>
<!-- 该Border绑定了一个TextBlock(文本块),TextBlock绑定.xaml.cs文件中的Text属性。Text显示的是多选的内容 -->
<Border x:Name="BorderComp"