Disable treeview root node when using hierarchicaldatatemplate

Question

im using WPF/MVVM to fool around with a treeview control

<TreeView HorizontalAlignment="Left" 
                  Height="319" 
                  VerticalAlignment="Top" 
                  Width="517"
                  ItemsSource="{Binding Tree}"
                  >
            <TreeView.ItemTemplate>
                <HierarchicalDataTemplate ItemsSource="{Binding Children}">
                    <StackPanel Orientation="Horizontal">
                        <Button Width="100" Height="20" IsEnabled="{Binding IsEnabled}" Content="{Binding Name}" />
                    </StackPanel>
                </HierarchicalDataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>

And this is my viewmodel with the node class

public partial class MainWindow : Window
    {
        class TreeNode
        {
            public string Name { get; set; }
            public bool IsEnabled { get; set; }
            public List<TreeNode> Children { get; set; }
            public TreeNode()
            {
                Children = new List<TreeNode>();
                IsEnabled = true;
            }
        }

        class ViewModel
        {
            public List<TreeNode> Tree { get; private set; }
            public ViewModel()
            {
                Tree = new List<TreeNode>();
            }
        }

        public MainWindow()
        {
            InitializeComponent();

            var viewModel = new ViewModel
                {
                    Tree =
                        {
                            new TreeNode
                                {
                                    Name = "Root 1",
                                    IsEnabled = false,
                                    Children = {
                                        new TreeNode { Name = "Child 1" },
                                        new TreeNode { Name = "Child 2" },
                                        new TreeNode { Name = "Child 3", 
                                            Children =
                                                {
                                                    new TreeNode { Name = "Child 3-1" },
                                                    new TreeNode { Name = "Child 3-2" },
                                                    new TreeNode { Name = "Child 3-3" }, 
                                                }
                                        },
                                    }
                                }
                        }
                };

            DataContext = viewModel;
        }
    }

As you can see, i bind the property "IsEnabled" to the button, this is all good, but i actually want to bind the "IsEnabled" property to the actual root node element, not a object within the node.

What would i need to do to disable the entire root node based on this property value?

Answer 1

To do this, you actually need to affect the ItemContainerStyle for the TreeView. This sets the style for the ItemContainer (TreeViewItem) that is generated for each node of the Tree.

<TreeView HorizontalAlignment="Left" Height="319" VerticalAlignment="Top" Width="517" ItemsSource="{Binding Tree}">
    <TreeView.ItemTemplate>
        <!-- Leave this the same, except for the IsEnabled binding on the button -->
    </TreeView.ItemTemplate>
    <TreeView.ItemContainerStyle>
        <Style TargetType="{x:Type TreeViewItem}">
            <Setter Property="IsEnabled" Value="{Binding IsEnabled}"/>
        </Style>
    </TreeView.ItemContainerStyle>
</TreeView>