WPF TreeView - Group Nodes Style

I have a list of type IList called groups and each group has a sub list of Type IList called items. Both Group and Item have property called Name. To display this hierarchy i'm using a TreeView.

I want to display each group in the hierarchy as an Expander, however it's not displaying as i want to.

So far my xaml:

<DataTemplate x:Key="NavItemTemplate">
    <TextBlock 开发者_运维问答Text="{Binding Name}"/>
</DataTemplate>

<HierarchicalDataTemplate x:Key="NavGroupTemplate" ItemsSource="{Binding Items}" ItemTemplate="{StaticResource NavItemTemplate}">
    <TextBlock Text="{Binding Name}"/>
</HierarchicalDataTemplate>

<Style x:Key="RootItemStyle" TargetType="{x:Type TreeViewItem}">
<Setter Property="IsExpanded" Value="True"/>
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="TreeViewItem">
            <Grid>
                <Expander x:Name="Exp" TextElement.FontWeight="Bold" IsExpanded="{TemplateBinding TreeViewItem.IsExpanded}">
                    <Expander.Header>
                        <ContentPresenter x:Name="ExpCP" ContentSource="Header"/>
                    </Expander.Header>
                    <ItemsPresenter/>
                </Expander>

                <Border x:Name="CP" Padding="25,0,0,0" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Visibility="Collapsed">
                    <ContentPresenter ContentSource="Header" HorizontalAlignment="Left" VerticalAlignment="Center" />
                </Border>
            </Grid>

            <ControlTemplate.Triggers>
                <Trigger Property="HasItems" Value="false">
                    <Setter TargetName="Exp" Property="Visibility" Value="Collapsed"/>
                    <Setter TargetName="CP" Property="Visibility" Value="Visible" />
                </Trigger>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Background" Value="Red"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>
</Style>

<TreeView ItemsSource="{Binding}" ItemTemplate="{StaticResource NavGroupTemplate}" ItemContainerStyle="{StaticResource RootItemStyle}">

The above style

works for:

Group1 (expander)

• Item1

Group2 (expander)

...

but doesn't work for (the goal):

Group1 (expander)

• Item1

  • SubItem1

Group2 (expander)

...

Also the above style also needs further correction. When i select the expander border side it triggers a selecteditem event, which should be prevented.

It works if you don't specify an ItemTemplate in the HierarchicalDataTemplate (left margin added to actually see the tree hierarchy):

<Grid>
    <Grid.Resources>
        <HierarchicalDataTemplate x:Key="NavGroupTemplate" ItemsSource="{Binding Items}">
            <TextBlock Text="{Binding Name}"/>
        </HierarchicalDataTemplate>

        <Style x:Key="RootItemStyle" TargetType="{x:Type TreeViewItem}">
            <Setter Property="IsExpanded" Value="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TreeViewItem">
                        <Grid Margin="16 0 0 0">
                            <Expander x:Name="Exp" TextElement.FontWeight="Bold" IsExpanded="{TemplateBinding TreeViewItem.IsExpanded}">
                                <Expander.Header>
                                    <ContentPresenter x:Name="ExpCP" ContentSource="Header"/>
                                </Expander.Header>
                                <ItemsPresenter/>
                            </Expander>

                            <Border x:Name="CP" Padding="25,0,0,0" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Visibility="Collapsed">
                                <ContentPresenter ContentSource="Header" HorizontalAlignment="Left" VerticalAlignment="Center" />
                            </Border>
                        </Grid>

                        <ControlTemplate.Triggers>
                            <Trigger Property="HasItems" Value="false">
                                <Setter TargetName="Exp" Property="Visibility" Value="Collapsed"/>
                                <Setter TargetName="CP" Property="Visibility" Value="Visible" />
                            </Trigger>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Background" Value="Red"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Grid.Resources>

    <TreeView ItemsSource="{Binding}" ItemTemplate="{StaticResource NavGroupTemplate}" ItemContainerStyle="{StaticResource RootItemStyle}">
    </TreeView>
</Grid>

I did something similar a while ago, but that was with a XmlDataProvider (not quite your IList scenario). Hopefully it helps a little bit.

<XmlDataProvider x:Key="MenuDataProvider" XPath="*">
            <x:XData>
                <MainMenu xmlns="">
                    <Admin>
                        <Facility>
                            <Test/>
                        </Facility>
                        <Carpark />
                    </Admin>

                    <Sequence>
                        <Lcd />
                    </Sequence>
                </MainMenu>
            </x:XData>
        </XmlDataProvider>

        <HierarchicalDataTemplate x:Key="NodeTemplate">

            <TextBlock x:Name="tb" />

            <HierarchicalDataTemplate.ItemsSource>
                <Binding XPath="child::node()" />
            </HierarchicalDataTemplate.ItemsSource>

            <HierarchicalDataTemplate.Triggers>

                <DataTrigger Binding="{Binding Path=NodeType}" Value="Text">
                    <Setter TargetName="tb" Property="Text" Value="{Binding Path=Value}"></Setter>
                </DataTrigger>

                <DataTrigger Binding="{Binding Path=NodeType}" Value="Element">
                    <Setter TargetName="tb" Property="Text" Value="{Binding Path=Name}"></Setter>
                </DataTrigger>
            </HierarchicalDataTemplate.Triggers>
    </HierarchicalDataTemplate>

It Looks like:

Your code is working fine for me. I have just removed unneccessary code, added margin for child elements and change to bold only group elements.

 <HierarchicalDataTemplate x:Key="NavGroupTemplate" ItemsSource="{Binding Items}">
            <TextBlock Text="{Binding Name}" />
        </HierarchicalDataTemplate>
        <Style x:Key="RootItemStyle" TargetType="{x:Type TreeViewItem}">
            <Setter Property="IsExpanded" Value="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TreeViewItem">
                        <Grid>
                            <Expander x:Name="Exp" IsExpanded="{TemplateBinding TreeViewItem.IsExpanded}">
                                <Expander.Header>
                                    <ContentPresenter x:Name="ExpCP" ContentSource="Header" TextElement.FontWeight="Bold" />
                                </Expander.Header>
                                <ItemsPresenter />
                            </Expander>
                            <Border x:Name="CP" Padding="35,0,0,0" Background="{TemplateBinding Background}" Visibility="Collapsed">
                                <ContentPresenter ContentSource="Header" HorizontalAlignment="Left" VerticalAlignment="Center" />
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="HasItems" Value="false">
                                <Setter TargetName="Exp" Property="Visibility" Value="Collapsed"/>
                                <Setter TargetName="CP" Property="Visibility" Value="Visible" />
                            </Trigger>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Background" Value="Red"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
<TreeView ItemsSource="{Binding}" ItemTemplate="{StaticResource NavGroupTemplate}" ItemContainerStyle="{StaticResource RootItemStyle}">
        </TreeView>

Can you please describe your problem in details, so I can have more idea ?