Click here to Skip to main content
Click here to Skip to main content

Add checkbox inside combobox in Silverlight

, 28 Nov 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
Add checkbox inside combobox in Silverlight.

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:

Checkbox inside Combobox

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;
    }
}

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Savalia Manoj M
Software Developer (Senior)
India India
No Biography provided

Comments and Discussions

 
SuggestionTextblock - IsHitTestVisible PinmemberTheRealSteveJudge4-Dec-14 5:01 
QuestionPlease help me! PinmemberMember 108720458-Jun-14 17:58 
QuestionPlease help me! PinmemberThái Sa Lem29-May-14 8:28 
AnswerRe: Please help me! PinmemberSavalia Manoj M2-Jun-14 0:16 
QuestionHow to make this as a control? Pinmemberzhonghuafy24-Dec-12 19:46 
AnswerRe: How to make this as a control? PinmemberSavalia Manoj M25-Dec-12 18:04 
QuestionIntegration in Lightswitch application? PinmemberMember 953543222-Oct-12 3:57 
AnswerRe: Integration in Lightswitch application? PinmemberSavalia Manoj M22-Oct-12 19:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141223.1 | Last Updated 28 Nov 2012
Article Copyright 2012 by Savalia Manoj M
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid