WPF TreeView avec orientation horizontale?

Question

Quel serait le moyen le plus efficace pour changer l'orientation de l'arborescence de WPF. Je voudrais utiliser la fonctionnalité expand-collapse pour travailler de gauche à droite plutôt que de haut en bas. C'est à dire. Quand je clique sur le bouton d'expansion d'un treenode, je voudrais que son sous-noeud apparaisse à droite du parent et que le retrait soit de haut en bas. Les lignes verticales qui relient le nœud doivent également être horizontales.

Answer 1

Voici un excellent article de Josh Smith on CodeProject qui détaille exactement comment faire ce genre de chose.

Answer 2

développiez John Smith's CodeProject article, si vous voulez avoir la disposition horizontale seulement un niveau particulier dans l'arbre (au lieu de tous les niveaux comme son article montre), puis juste définir la propriété ItemsPanel sur le TreeViewItem au niveau que vous voulez pour avoir un StackPanel.

Ce n'était pas intuitif pour moi au début, mais vous pouvez accéder à cette propriété via la propriété ItemContainerStyle du HierarchicalDataTemplate pour le calque au-dessus du calque que vous voulez horizontal.

Comme ceci:

<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> 

Suivant ce modèle vous permettra de définir la mise en page horizontale pour une couche individuelle au sein de votre arbre, à l'exception de la couche de racine. Et si vous souhaitez que le calque racine soit horizontal, définissez simplement la propriété ItemsPanel sur le TreeView pour utiliser un StackPanel horizontal.