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

Tagged as

[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.

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:

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

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web03 | 2.8.140814.1 | Last Updated 6 Dec 2012
Article Copyright 2012 by Savalia Manoj M
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid