In This Article

Item CheckBoxes

CheckBox controls can be inserted into item templates to make items checkable, and default actions can be implemented to toggle checked states for double-taps and Enter key presses.

Displaying CheckBoxes

CheckBox controls aren't built into the control itself but rather are part of the DataTemplate you supply for the items.

Here's an example of a DataTemplate that includes a CheckBox. This example assumes that you are using an item type that has IsThreeState, IsChecked, and Name properties. The IsChecked property has a two-way binding so that it can update the item's property as the end user toggles the CheckBox.

<DataTemplate>
	<StackPanel Orientation="Horizontal">
		<CheckBox Margin="0,0,4,0" VerticalAlignment="Center"
				  Visibility="{Binding IsCheckable, Converter={StaticResource BooleanToVisibilityConverter}}"
				  IsThreeState="{Binding IsThreeState}" IsChecked="{Binding IsChecked, Mode=TwoWay}"
				  />

		<TextBlock Text="{Binding Name}" TextTrimming="CharacterEllipsis" VerticalAlignment="Center" />
	</StackPanel>
</DataTemplate>

Using Default Actions to Toggle Checked State

Default actions are executed when an item is double-tapped or Enter is pressed. When using CheckBox controls in item templates, it's generally good practice to handle item default actions and toggle the item's IsChecked property appropriately.

This example code shows how to handle a default action (via the TreeListBox.ItemDefaultActionExecuting event) and toggle the checked state on a CheckableTreeNodeModel item type that has IsCheckable, IsThreeState, and IsChecked properties.

private void OnTreeListBoxItemDefaultActionExecuting(object sender, TreeListBoxItemEventArgs e) {
	var model = e.Item as CheckableTreeNodeModel;
	if ((model != null) && (model.IsCheckable)) {
		e.Cancel = true;

		// Toggle the checked state
		switch (model.IsChecked) {
			case true:
				model.IsChecked = (model.IsThreeState ? (bool?)null : false);
				return;
			case null:
				model.IsChecked = false;
				return;
			default:
				model.IsChecked = true;
				return;
		}
	}
}