原生C1ComboBox控件非常强大且使用,如支持自动完成、下拉单选、下拉方向、下拉框可定义大小等。

image21_10

但未支持多选:如点击下拉可出现CheckList,以方便用户多选。如下图所示的需求:

MuliCheckCombox 

虽不直接支持,然既然基于WPF,故提供了模板供我们扩展的接口:TemplatesItem Templates

image21_26

image21_1

下面我们开始定义可下拉多选的C1Combox:

首先,定义Node用于存储选择数据,有2个属性:Title、IsSelected, 为了可绑定要继承,必须从INotifyPropertyChanged接口继承。

  1:  public class Node : INotifyPropertyChanged
  2:  {
  3:         ...
  4:         public string Title
  5:         {
  6:             get
  7:             {
  8:                 return _title;
  9:             }
 10:             set
 11:             {
 12:                 _title = value;
 13:                 NotifyPropertyChanged("Title");
 14:             }
 15:         }
 16:         public bool IsSelected
 17:         {
 18:             get
 19:             {
 20:                 return _isSelected;
 21:             }
 22:             set
 23:             {
 24:                 _isSelected = value;
 25:                 NotifyPropertyChanged("IsSelected");
 26:             }
 27:         }
 28:        ...
 29:    }

然后,定义ViewModel,用于存储下拉列表的多个Node。

最后,定义主角:MultiSelectComboBox类

它继承自C1.WPF.C1ComboBox,我们重写OnItemsSourceChangedOnApplyTemplate,并新增了依赖属性DependencyProperty SelectedItemsProperty用于输出选择的下拉项。

OnItemsSourceChanged: 初始化Node列表。

OnApplyTemplate:      获得C1Combox的子元素“ComboHeader”、“DropDown”,注册点击、选择事件

SelectedItems:       选择项变化后,逐个判断Node节点,设置IsSelected属性,同时在C1Combox上当前选择的项的Title字符串,多个项用逗号分隔。

调用方法,在XMAL中添加调用即可:

  1:       <local:MultiSelectComboBox x:Name="multiSelectCombo1" Height="23" Width="150" 
  2:                                    ItemsSource="{Binding Path=Items}"
  3:                                    SelectedItems="{Binding SelectedItems, Mode=TwoWay}">
  4:             <c1:C1ComboBox.ItemTemplate>
  5:                 <DataTemplate>
  6:                     <CheckBox Name="templateCheckbox" 
  7:                               Content="{Binding Title}"                               
  8:                               IsChecked="{Binding IsSelected}" 
  9:                               Checked="templateCheckbox_Checked"
 10:                               Unchecked="templateCheckbox_UnChecked"
 11:                               />
 12:                 </DataTemplate>
 13:             </c1:C1ComboBox.ItemTemplate>           
 14:         </local:MultiSelectComboBox>

 

源码下载: