WPF TreeView with horizontal orientation?

问题:

What would be the bast way to change the orientation of the WPF treeview. I would like to work the expand-collapse-functionality to work left to right instead of top to down. I.e. when I click on on the expand button of a treenode I would its subnode to appear right of the parent and the indent should work top-down instead. Also the vertical lines that connect the node must now be horizontal.

回答1:

Here is a great article by Josh Smith on CodeProject detaling exactly how to do this kind of thing.

回答2:

To expand on John Smith's CodeProject article, if you want to have horizontal layout on only a particular level in the tree (instead of on all levels like his article shows), then just set the ItemsPanel property on the TreeViewItem at the level you want to have a StackPanel.

It wasn't intuitive to me at first, but you can get to this property through the ItemContainerStyle property of the HierarchicalDataTemplate for the layer above the layer you want to be horizontal.

Like this:

<ItemsPanelTemplate
    x:Key="ItemsPanelForHorizontalItems">
    <StackPanel
        Orientation="Horizontal"/>
</ItemsPanelTemplate>

<HierarchicalDataTemplate
    x:Key="DataTemplateForLayerAboveHorizontalItems"
    DataType="{x:Type viewModel:ThingHavingHorizontalItems}"
    ItemsSource="{Binding HorizontalItems}"
    ItemTemplate="{StaticResource DataTemplateForLayerWithHorizontalItems}">
    <HierarchicalDataTemplate.ItemContainerStyle>
        <Style
            TargetType="TreeViewItem">
            <Setter
                Property="ItemsPanel"
                Value="{StaticResource ItemsPanelForHorizontalItems}"/>
        </Style>
    </HierarchicalDataTemplate.ItemContainerStyle>
    <ContentControl
        Content="{Binding}"
        ContentTemplate="{StaticResource DataTemplateForThingHavingHorizontalItems}"/>
</HierarchicalDataTemplate>

Following this pattern will let you set horizontal layout for any individual layer within your tree, except the root layer. And if you want the root layer to be horizontal, then just set the ItemsPanel property on the TreeView to use a horizontal StackPanel.