WPF TreeView with horizontal orientation?

Question

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

Answer 1

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.

Answer 2

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