Multi Select Combobox in WPF

Introduction:

Recently, in our project we wanted to allow the user to select multiple values in a list. But the list should be populated inside a grid row. So we don't want to use a listbox and also we are not interested in third-party tools. Instead of that, we wanted to use a multiselect combobox. When I browsed through various blogs, forums, etc. I got some good code, but none of them are easy for me to understand and implement so I decided to move with something bit tricky but easy for you. In short, below you will find a MultiSelect Combobox with Search feature on elements.

Using the code:

In the the below screen shots you will see I used a Listbox control to demonstrate the selected elements in Multiselect ComboBox.

main

In the below image you will see how the search feature is working; it doesn’t affect the selected elements but will manage the display of the elements; when search text was removed all Selected elements will come back into the List.

list

For better understanding I am going to split the article into two parts now :

XML or designing Part
C# part

To define the design part I used two controls, Dropdown for selection, and one Listbox just to display selected countries.

<ComboBox Height="30" TextBoxBase.TextChanged="ddlCountry_TextChanged" HorizontalAlignment="Left" VerticalAlignment="Top" Name="ddlCountry" IsEditable="True" IsTextSearchEnabled="True" StaysOpenOnEdit="True" Width="165" SelectionChanged="ddlCountry_SelectionChanged" Margin="78,139,0,0">
<ComboBox.ItemTemplate>
<DataTemplate>
<CheckBox Name="chkCountry" Width="220" Checked="AllCheckbocx_CheckedAndUnchecked" Unchecked="AllCheckbocx_CheckedAndUnchecked" Content="{Binding Country_Name}" IsChecked="{Binding Check_Status}" CommandParameter="{Binding Country_ID}">
</CheckBox>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<ListBox Name="testListbox" HorizontalAlignment="Left" Height="161" Margin="370,80,0,0" VerticalAlignment="Top" Width="100" />

To Bind the Multiselect Combobox ddlCountry I created a class with three properties. In the the Check_Status is basically used to identify selected items.

public class DDL_Country
{
public int Country_ID
{
get;
set;
}
public string Country_Name
{
get;
set;
}
public Boolean Check_Status
{
get;
set;
}
}

To Bind country list in Dropdown I created one method.

private void AddElementsInList()
{
// 1 element
DDL_Country obj = new DDL_Country();
obj.Country_ID = 10;
obj.Country_Name = "India";
objCountryList.Add(obj);
obj = new DDL_Country();
obj.Country_ID = 11;
obj.Country_Name = "Pakistan";
objCountryList.Add(obj);
obj = new DDL_Country();
obj.Country_ID = 12;
obj.Country_Name = "America";
objCountryList.Add(obj);
obj = new DDL_Country();
obj.Country_ID = 13;
obj.Country_Name = "U.K";
objCountryList.Add(obj);
obj = new DDL_Country();
obj.Country_ID = 14;
obj.Country_Name = "Arab";
objCountryList.Add(obj);
}

Please Find below the whle CS page code.

using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Linq;
namespace MultiSelectCombobox
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow: Window
{
List < DDL_Country > objCountryList;
public MainWindow()
{
InitializeComponent();
objCountryList = new List < DDL_Country > ();
AddElementsInList();
BindCountryDropDown();
}
private void BindCountryDropDown()
{
ddlCountry.ItemsSource = objCountryList;
}
private void ddlCountry_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
}
private void ddlCountry_TextChanged(object sender, TextChangedEventArgs e)
{
ddlCountry.ItemsSource = objCountryList.Where(x => x.Country_Name.StartsWith(ddlCountry.Text.Trim()));
}
private void AllCheckbocx_CheckedAndUnchecked(object sender, RoutedEventArgs e)
{
BindListBOX();
}
private void BindListBOX()
{
testListbox.Items.Clear();
foreach(var country in objCountryList)
{
if (country.Check_Status == true)
{
testListbox.Items.Add(country.Country_Name);
}
}
}
private void AddElementsInList()
{
// 1 element
DDL_Country obj = new DDL_Country();
obj.Country_ID = 10;
obj.Country_Name = "India";
objCountryList.Add(obj);
obj = new DDL_Country();
obj.Country_ID = 11;
obj.Country_Name = "Pakistan";
objCountryList.Add(obj);
obj = new DDL_Country();
obj.Country_ID = 12;
obj.Country_Name = "America";
objCountryList.Add(obj);
obj = new DDL_Country();
obj.Country_ID = 13;
obj.Country_Name = "U.K";
objCountryList.Add(obj);
obj = new DDL_Country();
obj.Country_ID = 14;
obj.Country_Name = "Arab";
objCountryList.Add(obj);
}
}
public class DDL_Country
{
public int Country_ID
{
get;
set;
}
public string Country_Name
{
get;
set;
}
public Boolean Check_Status
{
get;
set;
}
}
}

10 Comments

Join the conversation! Your thoughts help the community grow.

R Ward4y ago
So, this isn't exactly a solution for the selected items showing up in the combobox text, but it's a workaround at least... I just added a text box on top of the combobox covering all but the drop-down arrow, and then added code to handle when the checkbox state changes to add the selected items as a comma delimited string. private void AllCheckbox_CheckedAndUnchecked(object sender, RoutedEventArgs e) { string cusers = ""; foreach (var usr in cu) { if (usr.check_state == true) { if (cusers == "") cusers = usr.user_name; else cusers = cusers + ", " + usr.user_name; } } txtCurrentOwner.Text = cusers; }
rajesh4y ago
How to show selected item or items in combo box in same combo box above ?if anyone has solution please respond.
WDW LLC7y ago
Hey, Great article! Thanks! But I am having a problem... When I click on the whitespace, to the right of the ComboBox item text, the name of the control: "Path.To.Classes.ComboBoxClient", rather than the Country Name, ex: "India"... I have tried many things to stop this, and I cannot figure it out -- any ideas?
- Harshil Savaliya4y ago
  You can resolved, if you give one property to your combobox TextSearch.TextPath. Value would be same as you put in Content of checkbox. like this TextSearch.TextPath="Value" and Content="{Binding Value}"
- Thomas Stekovits5y ago
  Hi, did you find any solution for this issue. for me the same behavior happens.
- Thomas Stekovits5y ago
  Found a solution: I used a ToggleButton to sorround the Checkbox in the Template, the height and the width are using the size from the grid and I setted the Margins and Paddings to - values <ComboBox.ItemTemplate> <DataTemplate> <ToggleButton Height="{Binding ElementName=grdMain, Path=ActualHeight, Mode=OneWay}" Width="{Binding ElementName=grdMain, Path=ActualWidth, Mode=OneWay}" Margin="-5,-2,-6,-2" Padding="5,0,0,0" Background="Transparent" BorderBrush="Transparent" > <CheckBox Name="chkObject" Checked="AllCheckbocx_CheckedAndUnchecked" Unchecked="AllCheckbocx_CheckedAndUnchecked" Height="{Binding ElementName=grdMain, Path=ActualHeight, Mode=OneWay}" Width="{Binding ElementName=grdMain, Path=ActualWidth, Mode=OneWay}" HorizontalContentAlignment="Left" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalContentAlignment="Center" Content="{Binding ObjectName}" IsChecked="{Binding ObjectStatus}" CommandParameter="{Binding ObjectId}" Margin="0,-1,0,-1" Padding="0,-2,0,-2" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" Grid.IsSharedSizeScope="False" > </CheckBox> </ToggleButton> </DataTemplate> </ComboBox.ItemTemplate>
Ashok Kumar Ganga8y ago
How to diplay selected items whenever we click that data
Khumana Ram9y ago
Great post with nice explanation....
Sonu Chaudhary10y ago
good one
Kapi Shivhare10y ago
nice blog...