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:
