如何根据级别不同地设置TreeViewItem的样式

时间:2016-02-22 20:35:13

标签: c# .net wpf xaml treeview

我有一个TreeView,我已经创建了三个级别的深度。当我将这三个级别与我的自定义样式硬编码时,它的工作方式与预期一致。当我尝试绑定到TreeView时,级别无法正确呈现。

硬编码TreeView

<TreeView>
    <TreeViewItem Header="First Level" Style="{StaticResource TreeViewItemGroup}">
        <TreeViewItem Header="Second Level (a)" Style="{StaticResource TreeViewItemSubGroup}">
            <TreeViewItem Style="{StaticResource TreeViewItemItem}" />
            <TreeViewItem Style="{StaticResource TreeViewItemItem}" />
            <TreeViewItem Style="{StaticResource TreeViewItemItem}" />
        </TreeViewItem>
        <TreeViewItem Header="Second Level (b)" Style="{StaticResource TreeViewItemSubGroup}">
        </TreeViewItem>
    </TreeViewItem>
</TreeView>

硬编码TreeView图像 enter image description here

当我尝试绑定到列表并使用HierarchicalDataTemplate时,每个子项都不会像在硬编码图像中那样呈现在父项内部。也许我不会以正确的方式解决这个问题?有人有任何线索吗?

的DataTemplates

<DataTemplate x:Key="MenuItemTemplate">
    <TreeViewItem Style="{StaticResource TreeViewItemItem}" />
</DataTemplate>

<HierarchicalDataTemplate x:Key="MenuSubGroupTemplate"
                          ItemsSource="{Binding MenuItems}"
                          ItemTemplate="{StaticResource MenuItemTemplate}">
    <TreeViewItem Header="{Binding Header}" Style="{StaticResource TreeViewItemSubGroup}" />
</HierarchicalDataTemplate>

<HierarchicalDataTemplate x:Key="MenuGroupTemplate"
                          ItemsSource="{Binding MenuSubGroups}"
                          ItemTemplate="{StaticResource MenuSubGroupTemplate}">
    <TreeViewItem Header="{Binding Header}" Style="{StaticResource TreeViewItemGroup}" />
</HierarchicalDataTemplate>

带有绑定的TreeView

<TreeView Grid.Row="1" ItemsSource="{Binding MenuGroups}" ItemTemplate="{StaticResource MenuGroupTemplate}"/>

带有绑定图像的TreeView

enter image description here

===== EDIT =====

我的大部分都在工作,但我仍然坚持造型顶级。为了使TreeViewItem的第二和第三级工作,我必须将样式添加到HierarchicalDataTemplate。现在,我在哪里指定最顶层TreeViewItem级别的样式?

<DataTemplate x:Key="MenuItemTemplate">
    <TreeViewItem Style="{StaticResource TreeViewItemItem}" />
</DataTemplate>

<HierarchicalDataTemplate x:Key="MenuSubGroupTemplate"
                          ItemsSource="{Binding MenuItems}"
                          ItemTemplate="{StaticResource MenuItemTemplate}">
    <TextBlock Text={Binding Header} />
    <HierarchicalDataTemplate.ItemContainerStyle>
        <Style><!-- 3rd STYLE HERE --></Style>
    </HierarchicalDataTemplate.ItemContainerStyle>
</HierarchicalDataTemplate>

<HierarchicalDataTemplate x:Key="MenuGroupTemplate"
                          ItemsSource="{Binding MenuSubGroups}"
                          ItemTemplate="{StaticResource MenuSubGroupTemplate}">
    <TextBlock Text={Binding Header} />
    <HierarchicalDataTemplate.ItemContainerStyle>
        <Style><!-- 2nd STYLE HERE --></Style>
    </HierarchicalDataTemplate.ItemContainerStyle>
</HierarchicalDataTemplate>

1 个答案:

答案 0 :(得分:1)

我必须将每个样式放在HierarchicalDataTemplateTreeView

<DataTemplate x:Key="MenuItemTemplate"> <TreeViewItem Style="{StaticResource TreeViewItemItem}" /> </DataTemplate> <HierarchicalDataTemplate x:Key="MenuSubGroupTemplate" ItemsSource="{Binding MenuItems}" ItemTemplate="{StaticResource MenuItemTemplate}"> <TextBlock Text={Binding Header} /> <HierarchicalDataTemplate.ItemContainerStyle> <Style><!-- 3rd STYLE HERE --></Style> </HierarchicalDataTemplate.ItemContainerStyle> </HierarchicalDataTemplate> <HierarchicalDataTemplate x:Key="MenuGroupTemplate" ItemsSource="{Binding MenuSubGroups}" ItemTemplate="{StaticResource MenuSubGroupTemplate}"> <TextBlock Text={Binding Header} /> <HierarchicalDataTemplate.ItemContainerStyle> <Style><!-- 2nd STYLE HERE --></Style> </HierarchicalDataTemplate.ItemContainerStyle> </HierarchicalDataTemplate> <TreeView ItemsSource="{Binding MenuGroups}" ItemTemplate="{StaticResource MenuGroupTemplate}"> <TreeView.ItemContainerStyle> <Style><!-- 1st Level Style --></Style> </TreeView.ItemContainerStyle> </TreeView>
{{1}}

enter image description here