Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
Print
(untagged)

[Silverlight] Checkbox List within ListBox using DataTemplate

0.00/5 (No votes)
6 Dec 2012 1  
[Silverlight] Checkbox list within ListBox using DataTemplate.

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:

XML
<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:

C#
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:

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here