C# WPF 多选ComboBox实现

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"