Question

I have a TreeView in WPF which I have bound to a collection of categories that itself contains a collection of categories and son on and so forth. Currently, I’m binding the collection successfully and having all of my category names appearing. However, I also have an IsExpanded property on my collection objects that when all set to true only expand the first TreeViewItem but no subsequent ones.

Does anyone know what may be wrong with my TreeView styles?

<HierarchicalDataTemplate x:Key="menuHierarchicalTemplate" ItemsSource="{Binding Path=SubCategories, Mode=TwoWay}" >          
        <Border x:Name="treeViewItemBorder"
                CornerRadius="3"
                MinWidth="125" 
                BorderBrush="Silver" Background="Transparent">
                <StackPanel Orientation="Horizontal" >
                    <TextBlock Height="24" Padding="5" Text="{Binding Path=Name}" />
                </StackPanel>
            </Border>
</HierarchicalDataTemplate>

<Style x:Key="treeViewItemStyle" TargetType="TreeViewItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TreeViewItem">
                    <TreeViewItem IsExpanded="{Binding Path=IsExpanded, Mode=TwoWay}"
                                  ItemsSource="{Binding Path=SubCategories}"
                                  ItemTemplate="{StaticResource menuHierarchicalTemplate}" >                              
                        <TreeViewItem.Header>                                
                            <StackPanel Orientation="Horizontal" >
                                <TextBlock Height="24" FontSize="12" Padding="5" Text="{Binding Path=Name}" />
                            </StackPanel>                                
                        </TreeViewItem.Header>                            
                    </TreeViewItem>                        
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>

<TreeView Name="menuTreeView"
                Background="Transparent"
                BorderBrush="Transparent"
                VerticalAlignment="Stretch"
                HorizontalAlignment="Stretch"
                Margin="10"   
                ItemContainerStyle="{StaticResource treeViewItemStyle}">                
</TreeView>

Thanks,

Xam

Answer 1

You are applying the “treeViewItemStyle” only to the first level of items in the TreeView. You have to set it as well as the ItemContainerStyle of the TreeViewItems. So, in your ControlTemplate, you’ll need something like:

<ControlTemplate TargetType="TreeViewItem">
  <TreeViewItem ItemContainerStyle="{StaticResource treeViewItemStyle}".../>
</ControlTemplate>

Better yet, you can just remove the “x:Key” attribute in your Style declaration. Doing so will automatically apply the style to all TreeViewItems.

SIDE NOTE:

I would suggest that instead of overriding the ControlTemplate like what you did above, just use property Setters in the Style instead. Something like:

<Style TargetType="TreeViewItem">
    <Setter Property="IsExpanded" Value="{Binding Path=IsExpanded, Mode=TwoWay}"/>
    <Setter Property="ItemsSource" Value="{Binding Path=SubCategories}"/>
    <Setter Property="ItemTemplate" Value="{StaticResource menuHierarchicalTemplate}"/>
    <Setter Property="Header">
        <Setter.Value>
            <StackPanel Orientation="Horizontal" >
                <TextBlock Height="24" FontSize="12" Padding="5" Text="{Binding Path=Name}" />
            </StackPanel>
        </Setter.Value>
    </Setter>
</Style>

It’s quite unusual to use the same Control as part of the ControlTemplate of itself (i.e. using TreeViewItem in the ControlTemplate of a TreeViewItem).