WPF Combox實作下拉多選，可選中多個值-有解無憂

自定義多選MultiCombox，可以實作下拉串列多選

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;

namespace MES.Plugin.Report.Controls
{
    public class MultiComboBox : ComboBox
    {
        static MultiComboBox()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(MultiComboBox), new FrameworkPropertyMetadata(typeof(MultiComboBox)));
        }


        private static void OnPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            d.SetValue(e.Property, e.NewValue);
        }

        /// <summary>
        /// 選中項串列
        /// </summary>
        public ObservableCollection<MultiCbxBaseData> ChekedItems = new ObservableCollection<MultiCbxBaseData>();

        /// <summary>
        /// ListBox豎向串列
        /// </summary>
        private ListBox _ListBoxV;

        /// <summary>
        /// ListBox橫向串列
        /// </summary>
        private ListBox _ListBoxH;

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            _ListBoxV = Template.FindName("PART_ListBox", this) as ListBox;
            _ListBoxH = Template.FindName("PART_ListBoxChk", this) as ListBox;
            _ListBoxH.ItemsSource = ChekedItems;
            _ListBoxV.SelectionChanged += _ListBoxV_SelectionChanged;
            _ListBoxH.SelectionChanged += _ListBoxH_SelectionChanged;

            if (ItemsSource != null)
            {
                foreach (var item in ItemsSource)
                {
                    MultiCbxBaseData bdc = item as MultiCbxBaseData;
                    if (bdc.IsCheck)
                    {
                        _ListBoxV.SelectedItems.Add(bdc);
                    }
                }
            }
        }

        private void _ListBoxH_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            foreach (var item in e.RemovedItems)
            {
                MultiCbxBaseData datachk = item as MultiCbxBaseData;

                for (int i = 0; i < _ListBoxV.SelectedItems.Count; i++)
                {
                    MultiCbxBaseData datachklist = _ListBoxV.SelectedItems[i] as MultiCbxBaseData;
                    if (datachklist.ID == datachk.ID)
                    {
                        _ListBoxV.SelectedItems.Remove(_ListBoxV.SelectedItems[i]);
                    }
                }
            }
        }

        void _ListBoxV_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            foreach (var item in e.AddedItems)
            {
                MultiCbxBaseData datachk = item as MultiCbxBaseData;
                datachk.IsCheck = true;
                if (ChekedItems.IndexOf(datachk) < 0)
                {
                    ChekedItems.Add(datachk);
                }
            }

            foreach (var item in e.RemovedItems)
            {
                MultiCbxBaseData datachk = item as MultiCbxBaseData;
                datachk.IsCheck = false;
                ChekedItems.Remove(datachk);
            }
        }
        public class MultiCbxBaseData
        {
            private int _id;
            public int ID
            {
                get { return _id; }
                set { _id = value; }
            }
            
            private string _viewName;
            public string ViewName
            {
                get { return _viewName; }
                set
                {
                    _viewName = value;
                }
            }

            private bool _isCheck;
            /// <summary>
            /// 是否選中
            /// </summary>
            public bool IsCheck
            {
                get { return _isCheck; }
                set { _isCheck = value; }
            }
        }
    }
}

Style: ComboBox.xmal

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:MES.Plugin.Report"
                    xmlns:controls="clr-namespace:MES.Plugin.Report.Controls">
    <!--ComboBox-->
    <!--ComBoBox項選中背景色-->
    <SolidColorBrush x:Key="ComboBoxSelectdBackground" Color="#ff8c69"/>
    <!--ComBoBox項滑鼠經過背景色-->
    <SolidColorBrush x:Key="ComboBoxMouseOverBackground" Color="#ff3030"/>
    <!--ComBoBox項選中前景色-->
    <SolidColorBrush x:Key="ComboBoxSelectedForeground" Color="White"/>
    <!--ComBoBox項滑鼠經過前景色-->
    <SolidColorBrush x:Key="ComboBoxMouseOverForegrond" Color="White"/>

    <ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
        <Grid Height="25" HorizontalAlignment="Stretch">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="30"/>
            </Grid.ColumnDefinitions>
            <Border  Background="White" Grid.ColumnSpan="2" Opacity="0"/>
            <Path x:Name="Arrow" Grid.Column="1"   Data="https://www.cnblogs.com/jian-xiao-stephen/p/M 0 0  6 6 12 0 Z" VerticalAlignment="Center" HorizontalAlignment="Center" Stretch="None" Fill="#999" />
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsChecked" Value="https://www.cnblogs.com/jian-xiao-stephen/p/true">
                <Setter TargetName="Arrow" Property="RenderTransform">
                    <Setter.Value>
                        <RotateTransform   CenterX="6" CenterY="3" Angle="180"></RotateTransform>
                    </Setter.Value>
                </Setter>
                <Setter TargetName="Arrow" Property="Margin" Value="https://www.cnblogs.com/jian-xiao-stephen/p/0 0 0 2"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>



    <!--MultiComboBox普通樣式-->
    <Style  TargetType="{x:Type controls:MultiComboBox}">
        <Setter Property="Width" Value="https://www.cnblogs.com/jian-xiao-stephen/p/200" />
        <Setter Property="HorizontalContentAlignment" Value="https://www.cnblogs.com/jian-xiao-stephen/p/Stretch" />
        <Setter Property="VerticalContentAlignment" Value="https://www.cnblogs.com/jian-xiao-stephen/p/Center" />
        <Setter Property="SnapsToDevicePixels" Value="https://www.cnblogs.com/jian-xiao-stephen/p/True" />
        <Setter Property="MaxDropDownHeight" Value="https://www.cnblogs.com/jian-xiao-stephen/p/400" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type controls:MultiComboBox}">
                    <Grid>
                        <Border x:Name="Bg" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"  Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" BorderBrush="#eaeaea" BorderThickness="1"  >
                            <Grid x:Name="PART_Root">

                                <Grid x:Name="PART_InnerGrid" Margin="0">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="0.3*" MaxWidth="30" />
                                    </Grid.ColumnDefinitions>
                                    <ListBox x:Name="PART_ListBoxChk" Background="#2d2f3e"  SelectionMode="Multiple" BorderThickness="0" ScrollViewer.VerticalScrollBarVisibility="Disabled">
                                        <ListBox.ItemsPanel>
                                            <ItemsPanelTemplate>
                                                <VirtualizingStackPanel Orientation="Horizontal" VirtualizingStackPanel.IsVirtualizing="True" />
                                            </ItemsPanelTemplate>
                                        </ListBox.ItemsPanel>
                                        <ListBox.ItemContainerStyle>
                                            <Style TargetType="ListBoxItem">
                                                <Setter Property="BorderThickness" Value="https://www.cnblogs.com/jian-xiao-stephen/p/0"/>
                                                <Setter Property="IsSelected" Value="https://www.cnblogs.com/jian-xiao-stephen/p/True"/>
                                                <Setter Property="Template">
                                                    <Setter.Value>
                                                        <ControlTemplate TargetType="ListBoxItem">
                                                            <CheckBox BorderThickness="0" Background="#2d2f3e" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center"  Content="{Binding ViewName}" IsChecked="{Binding Path=IsSelected,RelativeSource={RelativeSource TemplatedParent},Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>
                                                        </ControlTemplate>
                                                    </Setter.Value>
                                                </Setter>
                                            </Style>
                                        </ListBox.ItemContainerStyle>
                                    </ListBox>

                                    <!--下拉按鈕-->
                                    <ToggleButton x:Name="PART_DropDownToggle" IsTabStop="False"  
                                         IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                         Grid.Column="1" Template="{StaticResource ComboBoxToggleButton}" />
                                </Grid>
                            </Grid>
                        </Border>
                        <!--彈出多選串列-->
                        <Popup x:Name="PART_Popup" AllowsTransparency="True"  Focusable="False" StaysOpen="False"
                               IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}"
                               PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom">
                            <Grid Width="{Binding ActualWidth, RelativeSource={RelativeSource TemplatedParent}}"  MaxHeight="{Binding MaxDropDownHeight, RelativeSource={RelativeSource TemplatedParent}}" >
                                <ListBox x:Name="PART_ListBox" SelectionMode="Multiple" BorderThickness="1 0 1 1" Background="White" ItemsSource="{Binding ItemsSource,RelativeSource={RelativeSource TemplatedParent}}"
                                             MaxHeight="{TemplateBinding MaxDropDownHeight}" BorderBrush="#eaeaea"  >
                                    <ListBox.ItemContainerStyle>
                                        <Style  TargetType="ListBoxItem">
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate TargetType="{x:Type ListBoxItem}" >
                                                        <Grid  Height="22">
                                                            <Border x:Name="bg" BorderBrush="#eaeaea" BorderThickness="0"/>
                                                            <ContentPresenter x:Name="content"  />
                                                            <Border Background="White"  Opacity="0"/>
                                                        </Grid>
                                                        <ControlTemplate.Triggers>
                                                            <Trigger Property="IsSelected" Value="https://www.cnblogs.com/jian-xiao-stephen/p/True">
                                                                <Setter  TargetName="bg"  Property="Background" Value="https://www.cnblogs.com/jian-xiao-stephen/p/#ADD6FF" />
                                                            </Trigger>
                                                            <MultiTrigger>
                                                                <MultiTrigger.Conditions>
                                                                    <Condition Property="IsMouseOver" Value="https://www.cnblogs.com/jian-xiao-stephen/p/true" />
                                                                    <Condition Property="IsSelected" Value="https://www.cnblogs.com/jian-xiao-stephen/p/false"/>
                                                                </MultiTrigger.Conditions>
                                                                <Setter TargetName="bg" Property="Background" Value="https://www.cnblogs.com/jian-xiao-stephen/p/#009BDB" />
                                                                <Setter TargetName="bg" Property="Opacity" Value="https://www.cnblogs.com/jian-xiao-stephen/p/0.7"/>
                                                                <Setter   Property="Foreground" Value="https://www.cnblogs.com/jian-xiao-stephen/p/White" />
                                                            </MultiTrigger>
                                                            <Trigger Property="IsEnabled" Value="https://www.cnblogs.com/jian-xiao-stephen/p/False">
                                                                <Setter TargetName="bg" Property="Opacity" Value="https://www.cnblogs.com/jian-xiao-stephen/p/0.3" />
                                                                <Setter   Property="Foreground" Value="https://www.cnblogs.com/jian-xiao-stephen/p/Gray" />
                                                            </Trigger>
                                                        </ControlTemplate.Triggers>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </ListBox.ItemContainerStyle>
                                    <ListBox.ItemTemplate>
                                        <DataTemplate>
                                            <Grid>
                                                <CheckBox x:Name="chk" Visibility="Hidden"  IsChecked="{Binding IsCheck,Mode=TwoWay}" VerticalAlignment="Center"/>
                                                <CheckBox VerticalAlignment="Center"  Foreground="{Binding Foreground,RelativeSource={RelativeSource AncestorType=ListBoxItem}}" IsChecked="{Binding  RelativeSource={RelativeSource AncestorType=ListBoxItem},Path=IsSelected,Mode=TwoWay}"  Content="{Binding Path=ViewName}" />
                                            </Grid>
                                            <DataTemplate.Triggers>
                                                <DataTrigger   Binding="{Binding  RelativeSource={RelativeSource AncestorType=ListBoxItem},Path=IsSelected}" Value="https://www.cnblogs.com/jian-xiao-stephen/p/true">
                                                    <Setter  TargetName="chk"  Property="IsChecked" Value="https://www.cnblogs.com/jian-xiao-stephen/p/true"/>
                                                </DataTrigger>
                                                <DataTrigger   Binding="{Binding  RelativeSource={RelativeSource AncestorType=ListBoxItem},Path=IsSelected}" Value="https://www.cnblogs.com/jian-xiao-stephen/p/false">
                                                    <Setter     TargetName="chk" Property="IsChecked" Value="https://www.cnblogs.com/jian-xiao-stephen/p/false"/>
                                                </DataTrigger>
                                            </DataTemplate.Triggers>
                                        </DataTemplate>
                                    </ListBox.ItemTemplate>
                                </ListBox>
                            </Grid>
                        </Popup>
                    </Grid>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

前端使用：

1.參考Style資源，在前端參考上面建好的ComboBox.xmal 樣式

2.控制元件使用

<controls:MultiComboBox x:Name="MultiCmb" VerticalAlignment="Center" Margin="10,0,10,0" Grid.Column="6" Grid.Row="0" 
                                    Width="Auto"/>

3.MutilComboBox 資料源系結，重繪資料源

 ObservableCollection<Controls.MultiComboBox.MultiCbxBaseData> MultiComboBoxListData = https://www.cnblogs.com/jian-xiao-stephen/p/new ObservableCollection();
            for (int i = 0; i　　　　　　　plugin.MultiCmb.OnApplyTemplate();

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/295833.html

標籤：WPF

上一篇：dotnet 讀 WPF 源代碼筆記提升除錯效率的 NamedObject 型別

下一篇：WPF上傳圖片到服務器檔案夾