WPF/Silverlight: Expanding root tree node

Question

Yeah, at first glance this seems basic. But here's the problem: I'm using MVVM and hierarchical data binding to populate the tree.

What I'm having a hard time doing is getting the first node to expand. The reasons are:

1. I don't have a direct reference to the tree since I'm in the view-model code. (MVVM is driving me nuts).

2. I've actually figured out how to expand all nodes by using Styles in my view's xaml, but I just want to expand the first node now and I can't figure it out.

Any ideas?

Answer 1

Josh Smith has an article on CodeProject which explains how to use the TreeView with ViewModels. Simplifying the WPF TreeView by Using the ViewModel Pattern

A key part of the example shows how to bind the IsExpanded and IsSelected properties in your ViewModel.

So, if all of your ViewModels have IsExpanded and IsSelected properties you will be able to expand a specific node by setting its ViewModel's IsExpanded property to true.

  <TreeView.ItemContainerStyle>
    <!-- 
    This Style binds a TreeViewItem to a ViewModel. 
    -->
    <Style TargetType="{x:Type TreeViewItem}">
      <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
      <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
      <Setter Property="FontWeight" Value="Normal" />
      <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
          <Setter Property="FontWeight" Value="Bold" />
        </Trigger>
      </Style.Triggers>
    </Style>
  </TreeView.ItemContainerStyle>

Answer 2

There's a difference here if you're using Silverlight, in addition to Josh Smith's article you will need to look at the SetterValueBindingHelper explained in David Anson's blog.

Answer 3

The easiest way I've been able to achieve this is with styles (you can keep everything in XAML and you don't need any special MVVM properties). You can set a top-level ItemContainerStyle on the actual TreeView element to style the root TreeViewItem and show it as expanded. Then set an ItemContainerStyle on your HierarchicalDataTemplate element as your default TreeViewItem style for all of the nodes on other levels. The BasedOn attribute will make it easy to inherit the entire TreeViewItem style and only change the IsExpanded property.

The main TreeView XAML:

<TreeView x:Name="Tree" ItemContainerStyle="{StaticResource RootTreeViewItemStyle}">
    <TreeView.ItemTemplate>
        <common:HierarchicalDataTemplate ItemContainerStyle="{StaticResource TreeViewItemStyle}">
            <!-- rest of your template... -->
        </common:HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

Your base TreeViewItem style:

<Style x:Key="TreeViewItemStyle" TargetType="TreeViewItem">
    <!-- your normal or default TreeViewStyle... -->
</Style>

The root TreeViewItem style:

<Style x:Key="RootTreeViewItemStyle" TargetType="TreeViewItem" BasedOn="{StaticResource TreeViewItemStyle}">
    <Setter Property="IsExpanded" Value="True"/>
</Style>