Add checkbox inside combobox in Silverlight

• Download source code - 41 KB

Introduction

This article helps you to create a combobox with a checkboxlist in Silverlight. In this article I use DependencyProperty, INotifyPropertyChanged, and ItemTemplate for checkbox check/uncheck.

The control looks like:

Background 

In this article I used DependencyProperty for changing the checkbox value in the ComboBox control. A DependencyProperty is a static method that changes the value of an instanced object property. Also I used INotifyPropertyChanged for changing property value in the custom user control.

Anyone can use this control in his/her Silverlight project. Also ItemTemplate is particularly useful when you bind the ItemsSource to data, it binds to a checkbox in a combobox. In this example, when the user checks the checkbox, time is updated in the combobox selected value and also when unchecking any checkbox, the time reflects in the selected value.

In this example, I create a Model class which contains NotifyProperty and returns the list for binding it in the control.

In this example I also use ItemTemplate for displaying a checkbox inside a combobox. When page loads that time assigns the result to an ItemsSource. Also I add a PropertyChanged event for notifying when checkbox is checked or unchecked. When the PropertyChanged event is called, the time binds the selected checkbox value to the combobox selected value.

My MainPage.xaml looks like:

<grid removed="White" x:name="LayoutRoot">
    <stackpanel margin="10">
        <combobox horizontalalignment="Left" width="200" 
              height="25" name="cmbDepartment">
            <combobox.itemtemplate>
                <datatemplate>
                    <checkbox ischecked="{Binding IsChecked,Mode=TwoWay}" 
                       content="{Binding DepartmentName}">
                </checkbox></datatemplate>
            </combobox.itemtemplate>
        </combobox>
        <textblock margin="5,-20,0,0" horizontalalignment="Left" 
           width="Auto" height="20" x:name="tbDepartment">
    </textblock></stackpanel>
</grid>

My MainPage.xaml.cs looks like:

public partial class MainPage : UserControl
{

    public MainPage()
    {
        InitializeComponent();
        ObservableCollection<department> objDeploymentList = new ObservableCollection<department>();
        cmbDepartment.SelectionChanged += new SelectionChangedEventHandler(cmbDepartment_SelectionChanged);
        DepartmentList obj = new DepartmentList();
        objDeploymentList = obj.LoadDepartmentList();
        cmbDepartment.ItemsSource = objDeploymentList;
        foreach (Department item in objDeploymentList)
        {
            item.PropertyChanged += new PropertyChangedEventHandler(item_PropertyChanged);
        }
        if (cmbDepartment.ItemsSource != null)
        {
            SetString();
        }
    }

    void cmbDepartment_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        cmbDepartment.SelectedItem = null;
    }

    void item_PropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        if (e.PropertyName == "IsChecked")
        {
            SetString();
        }
    }
    //Function for Bind Selected Value in Combobox
    public void SetString()
    {
        string str = "";
        foreach (Department item in cmbDepartment.ItemsSource)
        {
            if (item.IsChecked)
            {
                str = str + item.DepartmentName + ",";
            }
        }
        if (str != "")
            str = str.Substring(0, str.Length - 1);
        tbDepartment.Text = str;
    }
}