WPF TreeView and Checkbox

Question

How would someone go about adding check boxes to only the children of a tree view in XAML? My goal is to have a tree view where the parent is just a text block and all the children are check boxes but only one child can be checked at a time. I have no problem making the whole the tree view check boxes but I am not sure how to get what I really want Any suggestions?

Thanks.

Answer 1

Try this Working with Checkboxes in the WPF TreeView.

Answer 2

The easiest way to do this is to shape your data so that the tree view can represent it in the way you've described. Here is an example of a minimal data structure that corresponds to your type of tree:

public class CheckedList
{
    public string Title { get; set; }

    public ObservableCollection<CheckedItem> Items { get; private set; }

    public CheckedList()
    {
        Items = new ObservableCollection<CheckedItem>();

        //DEBUG: Test data
        Title = "Test Title";
        Items.Add(new CheckedItem("Item 1", true));
        Items.Add(new CheckedItem("Item 2", false));
    }
}

public class CheckedItem : DependencyObject
{
    public static readonly DependencyProperty StateProperty =
        DependencyProperty.Register("StateProperty", typeof(bool), typeof(CheckedItem), new UIPropertyMetadata(false));

    public static readonly DependencyProperty TextProperty =
        DependencyProperty.Register("TextProperty", typeof (string), typeof (CheckedItem), new UIPropertyMetadata(string.Empty));

    public bool State
    {
        get { return (bool)GetValue(StateProperty); }
        set { SetValue(StateProperty, value); }
    }

    public string Text
    {
        get { return (string) GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }

    public CheckedItem(string text, bool state)
    {
        Text = text;
        State = state;
    }
}

Here is XAML and code-behind for a window and tree view with data templates to represent the data as text headers with check box items:

<Window x:Class="TestApp.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TestApp"
Title="Window1" Height="300" Width="300" Loaded="Window_Loaded">

<Window.Resources>
    <HierarchicalDataTemplate DataType="{x:Type  local:CheckedList}" ItemsSource="{Binding Items}">
        <TextBlock Text="{Binding Title}" />
    </HierarchicalDataTemplate>

    <DataTemplate DataType="{x:Type local:CheckedItem}">
        <CheckBox Content="{Binding Text}" IsChecked="{Binding State, Mode=TwoWay}"></CheckBox> 
    </DataTemplate>
</Window.Resources>

<Grid>
    <TreeView x:Name="ExampleTree"></TreeView>
</Grid>

The code-behind:

public partial class Window1 : Window
{
    ObservableCollection<CheckedList> _lists = new ObservableCollection<CheckedList>();

    public Window1()
    {
        InitializeComponent();
    }

    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        //DEBUG: Test data
        _lists.Add(new CheckedList());
        _lists.Add(new CheckedList());
        ExampleTree.ItemsSource = _lists;
    }
}

Using ObservableCollection and DependencyObject allows the tree and data structure to stay in sync. As the user clicks on items in the tree, you should be able to look at your lists and see the modifications. Alternately, if you modify the data, it should be reflected in the tree.