In this article we'll talk about how to render check boxes inside a ListView. You can use this feature for example, for presenting a list of options to ends users and allowing them to select one option or multiple options. The way you do this is by using DataTemplates inside the ListView and then do some basic data binding to show the controls. In the sample below I've also added functionality to hide the headers for the ListView. The final product we'll essentially look like this:
To add the check box to each list view item, we need to change the XAML generated for the list and include and add a GridView and will contain two columns: one for the check box and one for the label. Below you can see the XAML code for this, specifically inside the tag:
<listview name="myListView">
<listview.view>
<gridview>
<gridview.columnheadercontainerstyle>
<style targettype="{x:Type GridViewColumnHeader}"><!--
<Setter Property="Visibility"
Value="Collapsed"/>
--></style>
</gridview.columnheadercontainerstyle> <gridviewcolumn> <gridviewcolumn.celltemplate> <datatemplate> <checkbox margin="0" verticalalignment="Center" ischecked="{Binding IsChecked}"></checkbox> </datatemplate> </gridviewcolumn.celltemplate> </gridviewcolumn> <gridviewcolumn> <gridviewcolumn.celltemplate> <datatemplate> <textblock margin="0" text="{Binding Text}"></textblock> </datatemplate> </gridviewcolumn.celltemplate> </gridviewcolumn> </gridview> </listview.view> </listview>
Hiding the column headers For hiding the headers we just need to style the GridView header and set the Visiblity property to Collapsed as shown in the XAML below:
<gridview.columnheadercontainerstyle>
<style targettype="{x:Type GridViewColumnHeader}"><!--
<Setter Property="Visibility"
Value="Collapsed"/>
--></style>
</gridview.columnheadercontainerstyle>
For the binding, I created a class that has two properties: Text and IsChecked. These properties hold the values to the two columns our ListView has. Text will have the actual label to show in the second column and IsChecked determines if the checkbox is checked. It actually represents the object for each row in the list view. It's also implementing the INotifyPropertyChanged that will allow the ListView to update itself when a value in the object changes. You can see the code below:
public class CheckBoxListViewItem : INotifyPropertyChanged { private bool isChecked; private string text; public bool IsChecked { get { return isChecked; } set { if (isChecked == value) return; isChecked = value; RaisePropertyChanged("IsChecked"); } } public String Text { get { return text; } set { if (text == value) return; text = value; RaisePropertyChanged("Text"); } } public CheckBoxListViewItem(string t, bool c) { this.Text = t; this.IsChecked = c; } public event PropertyChangedEventHandler PropertyChanged; private void RaisePropertyChanged(string propName) { PropertyChangedEventHandler eh = PropertyChanged; if (eh != null) { eh(this, new PropertyChangedEventArgs(propName)); } } }
Now we'll just create some test objects when the Window is created for testing:
ObservableCollection<checkboxlistviewitem> items = new ObservableCollection<checkboxlistviewitem>();
items.Add(new CheckBoxListViewItem("Red",false));
items.Add(new CheckBoxListViewItem("Green", true));
items.Add(new CheckBoxListViewItem("Blue", false));
myListView.ItemsSource = items;
</checkboxlistviewitem></checkboxlistviewitem>
This gives you the result below:
Adding a Check All button is also pretty simple. On click event for the button we just need to loop through the check boxes change the IsChecked property to true. This will automatically notify the ListView and update itself. Below you can see the code:
private void CheckAllButton_Click(object sender, RoutedEventArgs e)
{
foreach (CheckBoxListViewItem o in myListView.ItemsSource)
{
o.IsChecked = true;
}
}
