Click here to Skip to main content
13,836,792 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


6 bookmarked
Posted 16 Jun 2012
Licenced CPOL

[Silverlight] Checkbox List within ListBox using DataTemplate

, 6 Dec 2012
Rate this:
Please Sign up or sign in to vote.
[Silverlight] Checkbox list within ListBox using DataTemplate.


This article describes how to implement a checkbox list within a listbox using a DataTemplate.


DataTemplates in Silverlight are typically used for visual representation of your data. They are particularly useful when you are binding an ItemsControl such as a ListBox to a collection. In this article, I have demonstrated how to declare DataTemplates in XAML and to read and apply them at runtime. Also one more thing over here is bind a checkboxlist in a DataTemplate.

The project looks like:

Using the code

Here I declare the ListOfRecords class for the Entity and bind it to a listbox ItemSource. My MainPage.Xaml looks like:

<Grid x:Name="LayoutRoot" removed="White">
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    <ScrollViewer Grid.Row="0" BorderThickness="0" 


        <ListBox x:Name="lstTemp">
                        <CheckBox Checked="CheckBox_Checked" Unchecked="CheckBox_Unchecked"

                            IsChecked="{Binding IsSelected, Mode=TwoWay}" 

                            Content="{Binding Content}" Tag="{Binding ID}" 

                            Foreground ="{Binding BrushObj}" />
    <ScrollViewer Grid.Row="1" x:Name="scrCriteriaSummaryTemp" 

       BorderThickness="0" ScrollViewer.HorizontalScrollBarVisibility="Auto" 


The above XAML defines DataTemplates to display a ListBoxItem for the ListBox. This DataTemplate also has a checkbox element which is used to change the value for the collection. MainPage.Xaml.cs looks like:

private ObservableCollection<ListOfRecords> _objList;
public ObservableCollection<ListOfRecords> objList
    get { return _objList; }
        _objList = value;

public MainPage()
    _objList = new ObservableCollection<ListOfRecords>();
    ListOfRecords supNode = new ListOfRecords() { ID = 0, Content = "Select All", 
        IsSelected = false,  BrushObj = new SolidColorBrush(Colors.Blue) };
    for (int i = 1; i <= 10; i++)
        ListOfRecords l = new ListOfRecords() { ID = i, Content = "Content : " + 
           i.ToString(), IsSelected = false,  BrushObj = new SolidColorBrush(Colors.Black) };
    objList = _objList;
    lstTemp.ItemsSource = objList;

    Grid grd = new Grid();

    for (int i = 0; i < 15; i++)
        RowDefinition rd = new RowDefinition();
        rd.SetValue(NameProperty, i.ToString());
        rd.Height = new GridLength(25);
    scrCriteriaSummaryTemp.Content = grd;

Here one more functionality is that when the user clicks on the first check box select, all of the listbox's check boxes are checked, and when unchecked, it unchecks all checkboxes from the list box.

When user click Select all, it looks like:

When user partially selects, it looks like:


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


About the Author

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

You may also be interested in...


Comments and Discussions

Questionhow to check in code behind? Pin
ali fasihi10-Sep-14 21:22
memberali fasihi10-Sep-14 21:22 

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

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

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web06 | 2.8.190114.1 | Last Updated 6 Dec 2012
Article Copyright 2012 by Savalia Manoj M
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid