Sdl.MultiSelectComboBox (WPF Custom Control)

Overview

The multi selection combo box is a WPF custom control with multiple item selection capabilities, along with customizable features to group, sort and filter items in the collection.

Components and Features

Selected Items Panel

The selected items are displayed like tags with a remove button They can be added or removed from the selected items collection, by selecting them from the items present in the Dropdown Menu list. Additionally, items can also be removed by interacting with them directly from the Selected Items Panel, as follows:

Device	Action	Description
Keyboard	Backspace or Delete key	If the Filter Criteria is empty, then the last item in the selected items collection is removed.
Mouse	Remove Item Button	The item is removed from the selected items collection

Visual States

The control has two visual states, Readonly and EditMode, which is identified by the IsEditMode property. When the control is in readonly mode, the items cannot be edited from the view. To switch to edit mode, select the control in the view or hit (F2) when the control has focus. Once the control is in edit mode, the items can be filtered, selected or removed. To switch back to readonly, move focus away from the control by selecting any other control in the view or by deactivating the parent window.

Visual state	Description	Example
Readonly	The Dropdown Menu is collapsed and items present in the Selected Items Panel cannot be edited.
EditMode	The Dropdown Menu can be expanded or collapsed when the button is clicked and items present in the Selected Items Panel can be edited.

Filter Criteria

When you type a character in the text area, the control applies a filter on the collection and suggests a list of items matching that criteria in the Dropdown Menu list. The developer can override the default filter service, based on their own business logic requirements, that implements IFilterService.

Depending on whether or not the ClearFilterOnDropdownClosing property is set to true and Dropdown Menu list as keyboard focus, the Filter Criteria is cleared automatically as the Dropdown Menu is closing.

Keyboard focus	Action
True	The Filter Criteria is cleared as the Dropdown Menu is closing.
False	No attempt is made to change the current filter.

Dropdown Menu

Presents a list of suggestions that can be selected by the user. If no Filter Criteria is applied, then all items in the collection are displayed

Visibility

The Dropdown Menu can be expanded only when the control is in EditMode.

Visibility	Actions
Expand	Left mouse click anywhere within the control area, with exception to the Remove Item Button of the item. Down arrow key on the keyboard when the control has focus. Change the *Filter Criteria*, by typing characters in the text area.
Collapse	Left mouse click anywhere within the control area, with exception to the Remove Item Button of the item. Return key. The item that has focus in the list is selected The *Filter Criteria* is removed Esc key Move focus away from the control by selecting any other control in the view or by deactivating the parent window.

Item Group

The items in the collection can be grouped by implementing IItemGroupAware. In addition to the header name, this interface exposes a property to manage the order in which the group headers are displayed.

Item Sorting

The sort order is based on the order of the items in the collection that was received when the ItemsSource is set.

Item Selection

Items can be added or removed from the selected items collection, by selecting them from the items present in the Dropdown Menu list.

Device	Actions	Description
Mouse	Left mouse click	The item that has selection focus in the list is selected/unselected.
Mouse	Shift + Left mouse click	All items between the previous and current item that has focus are selected.
Keyboard	Return key	- The item that has focus in the list is selected. - The Filter Criteria is removed. - The Dropdown Menu is closed
Keyboard	Space key	The item that has focus in the list is selected/unselected.
Keyboard	Shift + Up or Down key	The item that has focus in the list is selected/unselected.

Disabled Item

Implement IItemEnabledAware to identify whether or not the items are enabled. When an item is not enabled, then it will not be selectable from the Dropdown Menu list and removed from the Selected Items Panel automatically.

Selected Item

Items in the Dropdown Menu list can be selected/unselected via the Mouse or Keyboard. When the item is selected, the style is updated to reflect a selected state.

Example Project

The example project demonstrates how to implement the Sdl.MultiSelectComboBox custom control to your project, and provides good examples in understanding the controls behaviours.

Examples

The following example creates an Sdl.MultiSelectComboBox. The example populates the control by binding the ItemsSource property to a collection of type object, that implements IItemEnabledAware and IItemGroupAware. The example also binds the SelectedItemsChangedBehaviour to a command to receive a notification of SelectedItemsChangedEventArgs whenever the selected items collection changes and then display those results in a TextBlock on the view. Additionally, both the selected and dropdown list item templates are customized to display an image along with the item name.

Example.xaml

<Windowx:Class="MultiSelectComboBoxExample.Example"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:sdl="http://schemas.sdl.com/xaml"xmlns:models="clr-namespace:MultiSelectComboBoxExample.Models"d:DataContext="{d:DesignInstance {x:Type models:LanguageItems}}"mc:Ignorable="d"Title="Example"Height="250"Width="400"><Window.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><ResourceDictionary Source="Resources/MultiSelectComboBox.Resources.xaml"/></ResourceDictionary.MergedDictionaries></ResourceDictionary></Window.Resources><Grid><StackPanel Orientation="Vertical"><sdl:MultiSelectComboBox Height="100"ItemsSource="{Binding Items}"IsEditable="true"SelectionMode="Multiple"SelectedItemTemplate="{StaticResource MultiSelectComboBox.SelectedItems.ItemTemplate}"DropdownItemTemplate="{StaticResource MultiSelectComboBox.Dropdown.ListBox.ItemTemplate}"
sdl:SelectedItemsChangedBehaviour.SelectedItemsChanged="{Binding SelectedItemsChangedCommand}"/><TextBlock Text="{Binding Path=EventLog}"Height="100"/></StackPanel></Grid></Window>

DataTemplate: MultiSelectComboBox.Dropdown.ListBox.ItemTemplate

<DataTemplatex:Key="MultiSelectComboBox.Dropdown.ListBox.ItemTemplate" DataType="models:LanguageItem"><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/><ColumnDefinition Width="*"/><ColumnDefinition Width="30"/></Grid.ColumnDefinitions><Image Grid.Column="0"Style="{StaticResource MultiSelectComboBox.Image.Style}"/><TextBlock Grid.Column="1"Text="{Binding Path=Name}"Style="{StaticResource MultiSelectComboBox.DefaultTextBlock.Style}"/><TextBlock Grid.Column="2"Text="{Binding Path=SelectedOrder}"Margin="5,0"Foreground="{DynamicResource MultiSelectComboBox.DropDown.ListBoxItem.SelectedOrder.Foreground}"VerticalAlignment="Center"HorizontalAlignment="Center"><TextBlock.Style><Style TargetType="TextBlock"><Style.Triggers><DataTrigger Binding="{Binding Path=SelectedOrder}"Value="-1"><Setter Property="Visibility"Value="Hidden"/></DataTrigger></Style.Triggers></Style></TextBlock.Style></TextBlock></Grid></DataTemplate>

DataTemplate: MultiSelectComboBox.SelectedItems.ItemTemplate

<DataTemplatex:Key="MultiSelectComboBox.SelectedItems.ItemTemplate" DataType="models:LanguageItem"><StackPanel Orientation="Horizontal"Margin="0,-4"><Image Style="{StaticResource MultiSelectComboBox.Image.Style}"Margin="2,0,4,-1"/><TextBlock Text="{Binding Path=Name}"Style="{DynamicResource MultiSelectComboBox.DefaultTextBlock.Style}"Margin="2,0"/></StackPanel></DataTemplate>

Style: MultiSelectComboBox.Image.Style

<Stylex:Key="MultiSelectComboBox.Image.Style" TargetType="Image"><Setter Property="Stretch"Value="Fill"/><Setter Property="Source" Value="{Binding Path=Image}"/><Setter Property="RenderOptions.BitmapScalingMode"Value="NearestNeighbor"/><Setter Property="VerticalAlignment" Value="Center"/><Setter Property="RenderOptions.EdgeMode"Value="Aliased"/><Setter Property="Margin" Value="0,0,4,0"/><Setter Property="Width" Value="{Binding Path=ImageSize.Width}"/><Setter Property="Height" Value="{Binding Path=ImageSize.Height}"/></Style>

Style: MultiSelectComboBox.DefaultTextBlock.Style

<Stylex:Key="MultiSelectComboBox.DefaultTextBlock.Style" TargetType="TextBlock"><Setter Property="FontFamily"Value="{StaticResource MultiSelectComboBox.Text.FontFamily}"/><Setter Property="FontSize" Value="11"/><Setter Property="HorizontalAlignment" Value="Stretch"/><Setter Property="VerticalAlignment" Value="Center"/><Setter Property="Control.VerticalContentAlignment"Value="Center"/><Setter Property="TextWrapping" Value="NoWrap"/><Setter Property="TextTrimming" Value="CharacterEllipsis"/><Setter Property="Padding" Value="1"/><Setter Property="Margin" Value="1"/><Setter Property="Foreground" Value="{DynamicResource MultiSelectComboBox.Text.Foreground}"/><Setter Property="TextAlignment" Value="Left"/><Style.Triggers><DataTrigger Binding="{Binding IsEnabled, RelativeSource={RelativeSource AncestorType={x:Type ToggleButton}}}"Value="False"><Setter Property="Foreground"Value="{DynamicResource MultiSelectComboBox.Text.Disabled.Foreground}"/></DataTrigger></Style.Triggers></Style>

The following example defines the data context (i.e. models:LanguageItems) that the Sdl.MultiSelectComboBox binds to from the previous example.

LanguageItems : INotifyPropertyChanged

publicclassLanguageItems:INotifyPropertyChanged{privateList<LanguageItem>_items;publicLanguageItems(){SelectedItemsChangedCommand=newSelectedItemsChangedCommand(UpdateEventLog,UpdateSelectedItems);vargroup=newLanguageItemGroup(0,"All Items");Items=newList<LanguageItem>{newLanguageItem{Id="en-US",Name="English (United States)",Group=group},newLanguageItem{Id="it-IT",Name="Italian (Italy)",Group=group},newLanguageItem{Id="de-DE",Name="German (Germany)",Group=group}};}publicICommandSelectedItemsChangedCommand{get;}publicList<LanguageItem>Items{get=>_items??(_items=newList<LanguageItem>());set=>_items=value;}publicstringEventLog{get;set;}privatevoidUpdateEventLog(stringaction,stringtext){EventLog+=action+" => "+text+"\r\n";OnPropertyChanged(nameof(EventLog));}privatevoidUpdateSelectedItemsCount(intcount){SelectedItemsCount=count;OnPropertyChanged(nameof(SelectedItemsCount));}privatevoidUpdateSelectedItems(ICollectionselected){foreach(varitemin_items){varselectedItemIndex=selected.Cast<LanguageItem>().ToList().IndexOf(item);item.SelectedOrder=selectedItemIndex>-1?selectedItemIndex+1:-1;}UpdateSelectedItemsCount(selected.Count);}publiceventPropertyChangedEventHandlerPropertyChanged;protectedvirtualvoidOnPropertyChanged([CallerMemberName]stringpropertyName=null){PropertyChanged?.Invoke(this,newPropertyChangedEventArgs(propertyName));}}

LanguageItem : IItemEnabledAware, IItemGroupAware, INotifyPropertyChanged

publicclassLanguageItem:IItemEnabledAware,IItemGroupAware,INotifyPropertyChanged{privatestring_id;privatestring_name;privatebool_isEnabled;privateint_selectedOrder;privateIItemGroup_group;privateBitmapImage_image;privateSize_imageSize;publicLanguageItem(){_isEnabled=true;_selectedOrder=-1;}/// <summary>/// Unique id in the collection/// </summary>publicstringId{get=>_id;set{if(_id!=null&&string.Compare(_id,value,StringComparison.InvariantCulture)==0){return;}_id=value;OnPropertyChanged(nameof(Id));}}/// <summary>/// The item name.////// The filter criteria is applied on this property when using the default filter service./// </summary>publicstringName{get=>_name;set{if(_name!=null&&string.Compare(_name,value,StringComparison.InvariantCulture)==0){return;}_name=value;OnPropertyChanged(nameof(Name));}}/// <summary>/// Identifies whether the item is enabled or not.////// When the item is not enabled, then it will not be selectable from the dropdown list and removed/// from the selected items automatically./// </summary>publicboolIsEnabled{get=>_isEnabled;set{if(_isEnabled.Equals(value)){return;}_isEnabled=value;OnPropertyChanged(nameof(IsEnabled));}}/// <summary>/// The order in which the items are added to the selected collection. /// /// This order is independent to the group and sort order of the items in the collection. This selected/// order is visible in each of the selected items from the dropdown list and visually represented by/// the order of the items in the Selected Items Panel./// </summary>publicintSelectedOrder{get=>_selectedOrder;set{if(_selectedOrder.Equals(value)){return;}_selectedOrder=value;OnPropertyChanged(nameof(SelectedOrder));}}/// <summary>/// Identifies the name and order of the group header/// </summary>publicIItemGroupGroup{get=>_group;set{if(_group!=null&&_group.Equals(value)){return;}_group=value;OnPropertyChanged(nameof(Group));}}/// <summary>/// The item Image.////// Use the ImageSize to identify the space required to display the image in the view./// </summary>publicBitmapImageImage{get=>_image;set{_image=value;OnPropertyChanged(nameof(Image));}}/// <summary>/// The image size.////// Measures the width and height that is required to display the image./// </summary>publicSizeImageSize{get=>_imageSize;set{if(_imageSize.Equals(value)){return;}_imageSize=value;OnPropertyChanged(nameof(ImageSize));}}publicCultureInfoCultureInfo{get;set;}publicoverridestringToString(){returnName;}publiceventPropertyChangedEventHandlerPropertyChanged;protectedvirtualvoidOnPropertyChanged([CallerMemberName]stringpropertyName=null){PropertyChanged?.Invoke(this,newPropertyChangedEventArgs(propertyName));}}

SelectedItemsChangedCommand : ICommand

publicclassSelectedItemsChangedCommand:ICommand{privatereadonlyAction<string,string>_updateEventLog;privatereadonlyAction<ICollection>_updateSelectedItems;publicSelectedItemsChangedCommand(Action<string,string>updateEventLog,Action<ICollection>){_updateEventLog=updateEventLog;_updateSelectedItems=updateSelectedItems;}publicboolCanExecute(objectparameter){returnparameterisSelectedItemsChangedEventArgs&&_updateEventLog!=null;}publicvoidExecute(objectparameter){if(parameterisSelectedItemsChangedEventArgsargs){_updateSelectedItems?.Invoke(args.Selected);varaddedItems=GetAggregatedText(args.Added);varremovedItems=GetAggregatedText(args.Removed);varselectedItems=GetAggregatedText(args.Selected);varreport="Added - "+args.Added?.Count+(!string.IsNullOrEmpty(addedItems)?" ("+TrimToLength(addedItems,100)+") ":string.Empty)+", Removed - "+args.Removed?.Count+(!string.IsNullOrEmpty(removedItems)?" ("+TrimToLength(removedItems,100)+") ":string.Empty)+", Selected - "+args.Selected?.Count+(!string.IsNullOrEmpty(selectedItems)?" ("+TrimToLength(selectedItems,100)+") ":string.Empty);_updateEventLog?.Invoke("Selected Changed",report);}}publiceventEventHandlerCanExecuteChanged;privatestringTrimToLength(stringtext,intlength){if(text?.Length>length){text=text.Substring(0,length)+"...";}returntext;}privatestaticstringGetAggregatedText(ICollectionitems){varitemsText=string.Empty;returnitems?.Cast<LanguageItem>().Aggregate(itemsText,(current,item)=>current+((!string.IsNullOrEmpty(current)?", ":string.Empty)+item.Id));}}

LanguageItemGroup : IItemGroup

publicclassLanguageItemGroup:IItemGroup{publicintOrder{get;set;}publicstringName{get;}publicLanguageItemGroup(intindex,stringname){Order=index;Name=name;}publicoverridestringToString(){returnName;}}

Remarks

The Sdl.MultiSelectComboBox allows the user to select an item from a Dropdown Menu list and optionally apply a filter on the list by typing text in the text box of the Selected Items Panel. The SelectionMode and IsEditable properties specify how the Item Selection behaves, especially when the user is interacting with items from the Selected Items Panel, as follows:

	SelectionMode.Multiple(default)	SelectionMode.Single
IsEditable is true(default)	Multiple items can be selected/unselected from the Dropdown Menu list The Remove Item Button is displayed in each of the selected items in the Selected Items Panel. Items in the Selected Items Panel can be removed when the user hits the Delete or Back key	A single item can be selected from the Dropdown Menu list. When a new item is selected, it substitutes the previously selected item in the Selected Items Panel. The Remove Item Button is displayed in each of the selected items in the Selected Items Panel. Items in the Selected Items Panel can be removed when the user hits the Delete or Back key
IsEditable is false	Multiple items can be selected/unselected from the Dropdown Menu list. The Remove Item Button is not displayed in each of the selected items in the Selected Items Panel. Items in the Selected Items Panelcannot be removed when the user hits the Delete or Back key	A single item can be selected from the Dropdown Menu list. When a new item is selected, it substitutes the previously selected item in the Selected Items Panel. The Remove Item Button is not displayed in each of the selected items in the Selected Items Panel. Items in the Selected Items Panelcannot be removed when the user hits the Delete or Back key

Customizing the Style and template

You can modify the default Style and ControlTemplate to give the control a unique appearance. For information about modifying a controls style and template, see Customizing the Appearance of an Existing Control by Creating a ControlTemplate and Styling controls. The default style, template, and resources that define the look of the control are included in the generic.xaml file.

This table shows the resources used by the Sdl.MultiSelectComboBox control.

Resource key	Description
MultiSelectComboBox.DropDown.Button.Background	Drop down button background color at rest
MultiSelectComboBox.DropDown.Button.Border	Drop down button border brush at rest
MultiSelectComboBox.DropDown.Button.Disabled.Background	Drop down button background color when disabled
MultiSelectComboBox.DropDown.Button.Disabled.Border	Drop down button border brush when disabled
MultiSelectComboBox.DropDown.Button.Disabled.Foreground	Drop down button foreground color when disabled
MultiSelectComboBox.DropDown.Button.MouseOver.Background	Drop down button background color when the mouse is hovering
MultiSelectComboBox.DropDown.Button.MouseOver.Border	Drop down button border brush when the mouse is hovering
MultiSelectComboBox.DropDown.Button.Pressed.Background	Drop down button background color when the button is pressed
MultiSelectComboBox.DropDown.Button.Pressed.Border	Drop down button border brush when the button is pressed
MultiSelectComboBox.DropDown.ListBox.GroupHeader.Background	Drop down list group header background color
MultiSelectComboBox.DropDown.ListBox.GroupHeader.Foreground	Drop down list group header foreground color
MultiSelectComboBox.DropDown.ListBoxItem.Selector.Background	Drop down list item background color of the item when it has selection focus
MultiSelectComboBox.DropDown.ListBoxItem.Selector.Border	Drop down list item border brush of the item when it has selection focus
MultiSelectComboBox.DropDown.ListBoxItem.Selected.Background	Drop down list item background color of the item when it is selected
MultiSelectComboBox.DropDown.ListBoxItem.Selected.Border	Drop down list item border brush of the item when it is selected
MultiSelectComboBox.SelectedItem.Border	Selected item border brush that surrounds the selected item in the Selected Items Panel
MultiSelectComboBox.SelectedItem.Button.Foreground	Selected Item button foreground color
MultiSelectComboBox.SelectedItem.Button.Hover.Background	Selected Item button foreground when the mouse if hovering over it
MultiSelectComboBox.SelectedItem.Button.Light.Foreground	Selected Item button light foreground color
MultiSelectComboBox.SelectedItemsPanel.Border	Selected Items Panel border brush
MultiSelectComboBox.Text.Disabled.Foreground	Default text foreground color when disabled
MultiSelectComboBox.Text.FontFamily	Default FontFamily for all text in the control
MultiSelectComboBox.Text.Foreground	Default text foreground color

The sample project includes an example of a customized version of control template style for the Sdl.MultiSelectComboBox control, where the item selection styles are modified and a popup control is displayed with the CultureInfo properties when hovering over the language items in the Selected Items Panel. Make reference to the following.

API

interface IFilterService

/// <summary>/// The filter service that is used to apply a custom filter on the items that are displayed/// from the collection./// </summary>publicinterfaceIFilterService{/// <summary>/// The filter criteria should be set before applying the Filter/// </summary>/// <param name="criteria">The filter criteria that is applied</param>voidSetFilter(stringcriteria);/// <summary>/// Gets or sets a callback used to determine if an item is suitable for inclusion in the view./// </summary>Predicate<object>Filter{get;set;}}

interface IItemEnabledAware

/// <summary>/// IEnabledAware - Identifies whether the item is enabled or not./// </summary>publicinterfaceIItemEnabledAware{/// <summary>/// Identifies whether the item is enabled or not./// /// When the item is not enabled, then it will not be selectable from the dropdown list and removed/// from the selected items automatically./// </summary>boolIsEnabled{get;set;}}

interface IItemGroup

/// <summary>/// Identifies the name and order of the group header/// </summary>publicinterfaceIItemGroup{/// <summary>/// The group name./// </summary>stringName{get;}/// <summary>/// The display order of the group headers./// </summary>intOrder{get;set;}}

interface IItemGroupAware

/// <summary>/// IGroupAware - provides support for grouping the items/// </summary>publicinterfaceIItemGroupAware{/// <summary>/// Used to identify the name and order of the group header/// </summary>IItemGroupGroup{get;set;}}

EventArgs

FilterTextChangedEventArgs : RoutedEventArgs

/// <summary>/// Raised when the filter criteria has changed/// </summary>publicclassFilterTextChangedEventArgs:RoutedEventArgs{/// <summary>/// The filter critera applied on the collection of items/// </summary>publicstringText{get;}/// <summary>/// The filtered list of items/// </summary>publicICollectionItems{get;}}

SelectedItemsChangedEventArgs : RoutedEventArgs

/// <summary>/// Raised when the selected items collection is modified/// </summary>publicclassSelectedItemsChangedEventArgs:RoutedEventArgs{/// <summary>/// Items added to the collection/// </summary>publicICollectionAdded{get;}/// <summary>/// Items removed from the collection/// </summary>publicICollectionRemoved{get;}/// <summary>/// The selected items/// </summary>publicICollectionSelected{get;}}

Fields

Dependency Property	Description
AutoCompleteBackgroundProperty	Identified the AutoCompleteBackground dependency property.
AutoCompleteForegroundProperty	Identified the AutoCompleteForeground dependency property.
AutoCompleteMaxLengthProperty	Identified the AutoCompleteMaxLength dependency property.
ClearFilterOnDropdownClosingProperty	Identifies the ClearFilterOnDropdownClosing dependency property.
DropdownItemTemplateProperty	Identifies the DropdownItemTemplate dependency property.
EnableAutoCompleteProperty	Identified the EnableAutoComplete dependency property.
EnableFilteringProperty	Identifies the EnableFiltering dependency property.
EnableGroupingProperty	Identifies the EnableGrouping dependency property.
FilterServiceProperty	Identifies the FilterService dependency property.
IsDropDownOpenProperty	Identifies the IsDropDownOpen dependency property.
IsEditableProperty	Identifies the IsEditable dependency property.
IsEditModeProperty	Identifies the IsEditMode dependency property.
ItemsSourceProperty	Identifies the ItemsSource dependency property.
MaxDropDownHeightProperty	Identifies the MaxDropDownHeight dependency property.
SelectedItemsProperty	Identifies the SelectedItems dependency property.
SelectedItemTemplateProperty	Identifies the SelectedItemTemplate dependency property.
SelectionModeProperty	Identified the SelectionMode dependency property.

Properties

Property	Description
AllowDrop	Gets or sets a value indicating whether this element can be used as the target of a drag-and-drop operation. This is a dependency property. (Inherited from FrameworkElement)
AutoCompleteBackground	Gets or sets background brush used when displaying the autocomplete content for the Filter Criteria
AutoCompleteForeground	Gets or sets foreground brush used when displaying the autocomplete content for the Filter Criteria
AutoCompleteMaxLength	Gets or sets the maximum length of autocomplete content displayed for the Filter Criteria
Background	Gets or sets a brush that describes the background of a control. (Inherited from Control)
BindingGroup	Gets or sets the BindingGroup that is used for the element. (Inherited from FrameworkElement)
BorderBrush	Gets or sets a brush that describes the border background of a control. (Inherited from Control)
BorderThickness	Gets or sets the border thickness of a control. (Inherited from Control)
ClearFilterOnDropdownClosing	Gets or sets whether the Filter Criteria is cleared as the Dropdown Menu is closing while it has keyboard focus. (default) true
Clip	Gets or sets the geometry used to define the outline of the contents of an element. This is a dependency property. (Inherited from UIElement)
ClipToBounds	Gets or sets a value indicating whether to clip the content of this element (or content coming from the child elements of this element) to fit into the size of the containing element. This is a dependency property. (Inherited from UIElement)
CommandBindings	Gets a collection of CommandBinding objects associated with this element. A CommandBinding enables command handling for this element, and declares the linkage between a command, its events, and the handlers attached by this element. (Inherited from UIElement)
ContextMenu	Gets or sets the context menu element that should appear whenever the context menu is requested through user interface (UI) from within this element. (Inherited from FrameworkElement)
Cursor	Gets or sets the cursor that displays when the mouse pointer is over this element. (Inherited from FrameworkElement)
DataContext	Gets or sets the data context for an element when it participates in data binding. (Inherited from FrameworkElement)
DropdownItemTemplate	Gets or sets the DataTemplate used to display each item in the Dropdown Menu list
EnableAutoComplete	Gets or sets whether autocomplete feature is enabled for the Filter Criteria
EnableFiltering	Gets or sets whether filtering is enabled
EnableGrouping	Gets or sets whether grouping is enabled
Effect	Gets or sets the bitmap effect to apply to the UIElement. This is a dependency property. (Inherited from UIElement)
FilterService	Gets or sets a custom filter service that is used when filtering items in the collection. If the filter service is null, then a default service is used that applies a filter on the override string ToString()
FlowDirection	Gets or sets the direction that text and other user interface (UI) elements flow within any parent element that controls their layout. (Inherited from FrameworkElement)
Focusable	Gets or sets a value that indicates whether the element can receive focus. This is a dependency property. (Inherited from UIElement)
FocusVisualStyle	Gets or sets a property that enables customization of appearance, effects, or other style characteristics that will apply to this element when it captures keyboard focus. (Inherited from FrameworkElement)
FontFamily	Gets or sets the font family of the control. (Inherited from Control)
FontSize	Gets or sets the font size. (Inherited from Control)
FontStretch	Gets or sets the degree to which a font is condensed or expanded on the screen. (Inherited from Control)
FontWeight	Gets or sets the weight or thickness of the specified font. (Inherited from Control)
ForceCursor	Gets or sets a value that indicates whether this FrameworkElement should force the user interface (UI) to render the cursor as declared by the Cursor property. (Inherited from FrameworkElement)
Foreground	Gets or sets a brush that describes the foreground color. (Inherited from Control)
Height	Gets or sets the suggested height of the element. (Inherited from FrameworkElement)
HorizontalAlignment	Gets or sets the horizontal alignment characteristics applied to this element when it is composed within a parent element, such as a panel or items control. (Inherited from FrameworkElement)
HorizontalContentAlignment	Gets or sets the horizontal alignment of the control's content. (Inherited from Control)
InputBindings	Gets the collection of input bindings associated with this element. (Inherited from UIElement)
InputScope	Gets or sets the context for input used by this FrameworkElement. (Inherited from FrameworkElement)
IsDropDownOpen	Gets or sets a value that indicates whether the Dropdown Menu is currently open.
IsEditable	Gets or sets a value that indicates whether the user can edit items in the Selected Items Panel. The default value is true.
IsEditMode	Gets the value identifying the Visual State of the control (i.e. Readonly or EditMode)
IsEnabled	Gets or sets a value indicating whether this element is enabled in the user interface (UI). This is a dependency property. (Inherited from UIElement)
IsFocused	Gets a value that determines whether this element has logical focus. This is a dependency property. (Inherited from UIElement)
IsHitTestVisible	Gets or sets a value that declares whether this element can possibly be returned as a hit test result from some portion of its rendered content. This is a dependency property. (Inherited from FrameworkElement)
IsTabStop	Gets or sets a value that indicates whether a control is included in tab navigation. (Inherited from Control)
ItemsSource	Gets or sets the collection used to generate the content of the listbox ItemsControl.
Language	Gets or sets localization/globalization language information that applies to an element. (Inherited from FrameworkElement)
LayoutTransform	Gets or sets a graphics transformation that should apply to this element when layout is performed. (Inherited from FrameworkElement)
Margin	Gets or sets the outer margin of an element. (Inherited from FrameworkElement)
MaxDropDownHeight	Gets or sets the maximum height of the Sdl.MultiSelectComboBox dropdown menu
MaxHeight	Gets or sets the maximum height constraint of the element. (Inherited from FrameworkElement)
MaxWidth	Gets or sets the maximum width constraint of the element. (Inherited from FrameworkElement)
MinHeight	Gets or sets the minimum height constraint of the element. (Inherited from FrameworkElement)
MinWidth	Gets or sets the minimum width constraint of the element. (Inherited from FrameworkElement)
Name	Gets or sets the identifying name of the element. The name provides a reference so that code-behind, such as event handler code, can refer to a markup element after it is constructed during processing by a XAML processor. (Inherited from FrameworkElement)
Opacity	Gets or sets the opacity factor applied to the entire UIElement when it is rendered in the user interface (UI). This is a dependency property. (Inherited from UIElement)
OpacityMask	Gets or sets an opacity mask, as a Brush implementation that is applied to any alpha-channel masking for the rendered content of this element. This is a dependency property. (Inherited from UIElement)
OverridesDefaultStyle	Gets or sets a value that indicates whether this element incorporates style properties from theme styles. (Inherited from FrameworkElement)
Padding	Gets or sets the padding inside a control. (Inherited from Control)
RenderSize	Gets (or sets) the final render size of this element. (Inherited from UIElement)
RenderTransform	Gets or sets transform information that affects the rendering position of this element. This is a dependency property. (Inherited from UIElement)
RenderTransformOrigin	Gets or sets the center point of any possible render transform declared by RenderTransform, relative to the bounds of the element. This is a dependency property. (Inherited from UIElement)
Resources	Gets or sets the locally-defined resource dictionary. (Inherited from FrameworkElement)
SelectedItems	Gets or sets the selected items.
SelectedItemTemplate	Gets or sets the DataTemplate used to display each item in the Selected Items Panel
SelectionMode	Gets or sets the SelectionMode value. The SelectionMode property determines how many items a user can select at one time. You can set the property to Multiple (the default) or Single
SnapsToDevicePixels	Gets or sets a value that determines whether rendering for this element should use device-specific pixel settings during rendering. This is a dependency property. (Inherited from UIElement)
Style	Gets or sets the style used by this element when it is rendered. (Inherited from FrameworkElement)
TabIndex	Gets or sets a value that determines the order in which elements receive focus when the user navigates through controls by using the TAB key.(Inherited from Control)
Tag	Gets or sets an arbitrary object value that can be used to store custom information about this element. (Inherited from FrameworkElement)
Template	Gets or sets a control template. (Inherited from Control)
ToolTip	Gets or sets the tool-tip object that is displayed for this element in the user interface (UI). (Inherited from FrameworkElement)
Triggers	Gets the collection of triggers established directly on this element, or in child elements. (Inherited from FrameworkElement)
UseLayoutRounding	Gets or sets a value that indicates whether layout rounding should be applied to this element's size and position during layout. (Inherited from FrameworkElement)
VerticalAlignment	Gets or sets the vertical alignment characteristics applied to this element when it is composed within a parent element such as a panel or items control. (Inherited from FrameworkElement)
VerticalContentAlignment	Gets or sets the vertical alignment of the control's content. (Inherited from Control)
Visibility	Gets or sets the user interface (UI) visibility of this element. This is a dependency property. (Inherited from UIElement)
Width	Gets or sets the width of the element. (Inherited from FrameworkElement)

Events

Property	Description
FilterTextChanged	Occurs when the criteria of the filter text has changed. The FilterTextChangedEventArgs are passed with the event, identifying the filter criteria and list of items currently filtered.
SelectedItemsChanged	Occurs when items in the selected items collection has changed. The SelectedItemsChangedEventArgs are passed with the event, identifying the added, removed and currently selected items.

Event Behaviours

We have introduced the following event behaviors to accommodate binding events to a command. This way, the bound command is invoked like an event handler when the event is raised.

Property	Description
FilterTextChangedBehaviour.FilterTextChanged	Occurs when the criteria of the filter text has changed. The FilterTextChangedEventArgs are passed with the event, identifying the filter criteria and list of items currently filtered.
SelectedItemsChangedBehaviour.SelectedItemsChanged	Occurs when items in the selected items collection has changed. The SelectedItemsChangedEventArgs are passed with the event, identifying the added, removed and currently selected items.