Arborescence multi-colonnes dans WPF

Ce que quelqu'un sait où je peux obtenir un contrôle comme le Multi-colonne d'Arborescence dans WPF?

source d'informationauteur Micah

  1. 8

    J'ai mis en œuvre en se fondant sur l'ancien blog ici. Mais si je me souviens bien j'ai fait un peu de travail manuel pour obtenir des choses à travailler. Spécifiquement avec les barres de défilement.

    Mais qui devrait vous donner un bon départ.

  2. 9

    SharpDevelop a ListView sous-classe appelée SharpTreeView à ce que vous recherchez.

    Vous pouvez voir un exemple vivant de ce contrôle dans SharpDevelop la "Montre" de la fenêtre:

    Arborescence multi-colonnes dans WPF

    XAML utilisé dans la fenêtre d'observation (comme dans 5.1.0 bêta):

    <tv:SharpGridView x:Key="variableGridView" AllowsColumnReorder="False">
<GridView.Columns>
<GridViewColumn Header="{core:Localize MainWindow.Windows.Debug.LocalVariables.NameColumn}" Width="200">
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<tv:SharpTreeNodeView />
<local:AutoCompleteTextBox x:Name="name" Margin="-6 0 0 0"  MinWidth="100" Text="{Binding Node.Name}" IsEditable="{Binding Node.CanSetName}">
<local:AutoCompleteTextBox.ContextMenu>
<MultiBinding Converter="{StaticResource menuBuilder}">
<Binding Path="Node.ContextMenuAddInTreeEntry" />
<Binding Path="Node" />
</MultiBinding>
</local:AutoCompleteTextBox.ContextMenu>
</local:AutoCompleteTextBox>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="{core:Localize MainWindow.Windows.Debug.LocalVariables.ValueColumn}" Width="200">
<GridViewColumn.CellTemplate>
<DataTemplate>
<local:AutoCompleteTextBox
MinWidth="100"
Text="{Binding Node.Value}"
IsEditable="{Binding Node.CanSetValue}">
<local:AutoCompleteTextBox.ContextMenu>
<MultiBinding Converter="{StaticResource menuBuilder}">
<Binding Path="Node.ContextMenuAddInTreeEntry" />
<Binding Path="Node" />
</MultiBinding>
</local:AutoCompleteTextBox.ContextMenu>
</local:AutoCompleteTextBox>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="{core:Localize MainWindow.Windows.Debug.LocalVariables.TypeColumn}" Width="200">
<GridViewColumn.CellTemplate>
<DataTemplate>
<local:AutoCompleteTextBox MinWidth="100" Text="{Binding Node.Type}" IsEditable="False">
<local:AutoCompleteTextBox.ContextMenu>
<MultiBinding Converter="{StaticResource menuBuilder}">
<Binding Path="Node.ContextMenuAddInTreeEntry" />
<Binding Path="Node" />
</MultiBinding>
</local:AutoCompleteTextBox.ContextMenu>
</local:AutoCompleteTextBox>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView.Columns>
</tv:SharpGridView>

    La ressource est définie à la propriété en Vue d'un SharpTreeView de contrôle.

  3. 4

    Il y a un article sur codeproject qui pourraient vous aider:

    http://www.codeproject.com/KB/WPF/TreeListView.aspx

    Il ya tout à fait quelques autres articlesau sujet de la Wpf TreeView.

  4. 4

    Si vous n'avez pas besoin d'en-têtes de colonne, c'est assez facile. Vous pouvez simplement fournir un conteneur d'éléments de modèle, ajoutez fixe la largeur des colonnes de la grille à droite, et le lier à votre élément de données pertinentes.

    La valeur par défaut de l'élément conteneur pour un TreeView a une grille définie comme (avec des commentaires):

        <Grid>
<Grid.ColumnDefinitions>
<!--Expander--><ColumnDefinition MinWidth="19" Width="Auto"/>
<!--Item--><ColumnDefinition Width="Auto"/>
<!--Overflow--><ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<!--Current Item--><RowDefinition Height="Auto"/>
<!--Sub-items--><RowDefinition/>
</Grid.RowDefinitions>
<ToggleButton x:Name="Expander" ClickMode="Press" IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ExpandCollapseToggleStyle}"/>
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="1" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
<ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
<ItemsPresenter x:Name="ItemsHost" Grid.ColumnSpan="2" Grid.Column="1" Grid.Row="1"/>
</Grid>

    Donc tout juste d'étendre cette grille pour contenir prévisible de la largeur des colonnes à droite et vous aurez colonnes.

    • Ajouter de la définition de la colonne pour la nouvelle colonne, le rendre auto-taille
    • Mise à jour de la colonne durée de "ItemsHost" à la durée de la colonne ajoutée
    • Ajouter un prévisible-contrôle de la largeur de la colonne:

    Parties concernées:

    <Grid>
...
<ColumnDefinition Width="Auto"/>
...
<ItemsPresenter ... Grid.ColumnSpan="3" ... />
...
<Border Grid.Column="3"><!--Add column data here--></Border>
...
</Grid>

    Si l'ajout de la frontière est de la même largeur pour toutes les lignes, vous aurez une vue qui se sent comme un treeview avec des colonnes. Ce ne sera évidemment pas à l'échelle, mais si juste besoin d'un moyen rapide et sale de la solution, vous devriez être en mesure de le faire dans le mélange en quelques minutes, sans ajout de dépendances pour les contrôles externes /bibliothèques.

    Nos besoins rapidement grandi et nous avons ajouté une grille avec des étiquettes de colonne à l'extérieur de l'arbre et lié aux données de la largeur des colonnes là pour les largeurs de ces "colonnes" [en fait la largeur d'un découpage de contrôle dans les colonnes en question l'utilisation de l'auto de la taille des colonnes]. Cela fonctionne, ce qui est tout ce que je vais dire pour sa défense.

    Cette approche pourrait également être fait dans le générés élément de modèle, à la place de l'élément conteneur si vous n'avez pas l'esprit (ou l'envie) de la boîte de sélection (la "Bd" frontière) s'étendant à travers toutes les colonnes.