Multi Select Combobox in WPF

In this article you will learn Multiselect 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.



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.



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

1. XML or designing Part
2. 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;
        }
    }
}