[Silverlight] Checkbox List within ListBox using DataTemplate

• Download demo project

Introduction

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

Background

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">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <ScrollViewer Grid.Row="0" BorderThickness="0" 
             ScrollViewer.HorizontalScrollBarVisibility="Auto" 
             ScrollViewer.VerticalScrollBarVisibility="Auto">
        <ListBox x:Name="lstTemp">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <CheckBox Checked="CheckBox_Checked" Unchecked="CheckBox_Unchecked"
                            IsChecked="{Binding IsSelected, Mode=TwoWay}" 
                            Content="{Binding Content}" Tag="{Binding ID}" 
                            Foreground ="{Binding BrushObj}" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </ScrollViewer>
    <ScrollViewer Grid.Row="1" x:Name="scrCriteriaSummaryTemp" 
       BorderThickness="0" ScrollViewer.HorizontalScrollBarVisibility="Auto" 
       ScrollViewer.VerticalScrollBarVisibility="Auto">
    </ScrollViewer>
</Grid>

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; }
    set
    {
        _objList = value;

    }
}
public MainPage()
{
    InitializeComponent();
    _objList = new ObservableCollection<ListOfRecords>();
    ListOfRecords supNode = new ListOfRecords() { ID = 0, Content = "Select All", 
        IsSelected = false,  BrushObj = new SolidColorBrush(Colors.Blue) };
    _objList.Add(supNode);
    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.Add(l);
    }
    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);
        grd.RowDefinitions.Add(rd);
    }
    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: