hit tracker

MultiSelect Combobox

Home » MultiSelect Combobox

MultiSelectComboBox.XAMLWay

in WPF by Selva Kumar Comments are off

In WPF we have lot of controls which we can customize to achieve our desired result. It can be done either through XAML or by creating custom library file also by combining both the way. Here I’m going to customize a ComboBox to accept multiple values only by using XAML file.

https://github.com/IncRevCorp/MultiSelectComboBox.XAMLWay

Idea behind it

“General idea of this to change the default ItemsPresenter control in the ComboBox to ListBox control which is having the option to accept multiple values”.

The initial code will look like this:

Now we are going to start customizing the look like this:

Screen1

Screen2

It will modify the intial Xaml page like this

And also in App.Xaml we will have code like

In this template we need to modify the ItemsPresenter control inside the ControlTemplate to ListBox

Here SelectionMode is the property which helps us to accept multiple values. It accepts three values Single, Multiple & Extended. As the name implies Single will accept single value, Multiple will accept multiple values & Extended will accept values based on ctrl & shift buttons as in Windows default functionality.

Screen3

Now we will be able to accept multiple values & the next step is to display the selected values in the ComboBox selection. We can achieve this by modifying the ContentPresenter found in the template to ItemsControl.

ItemsControl.ItemsPanel is added to display the selected items in horizontal way.

Screen4

But again here we need to separate the selected items by some means, so that we can easily distinguish it. For that purpose we can still customize the ItemsControl’s ItemTemplate like this to show and hide a “Comma” block base on the condition.

Screen5

Now it looks perfect. We have done with the customization.Cheers!!!