Vista ad albero a più colonne in WPF [chiuso]

Question

Qualcuno sa dove posso ottenere un controllo come la visualizzazione ad albero multi-colonna in WPF?

Answer 1

L'ho implementato in base al vecchio post sul blog qui . Ma se ricordo bene, dovevo fare un po 'di lavoro manuale per far funzionare bene le cose. In particolare con le barre di scorrimento.

Ma questo dovrebbe darti un buon inizio.

Answer 2

SharpDevelop ha una sottoclasse ListView chiamata SharpTreeView che fa ciò che stai cercando.

Puoi vedere un esempio live di questo controllo in " Guarda " di SharpDevelop finestra:

XAML utilizzato nella finestra Watch (come nella versione 5.1.0 beta):

<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 risorsa è impostata sulla proprietà Visualizza di un controllo SharpTreeView.

Answer 3

C'è un articolo su codeproject che potrebbe aiutare:

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

Ci sono molti altri utili articoli lì sul Wpf TreeView.

Answer 4

Se non hai bisogno di intestazioni di colonna, questo è abbastanza facile. Puoi semplicemente fornire un modello contenitore articolo, aggiungere colonne della griglia a larghezza fissa a destra e associarlo ai dati rilevanti dell'articolo.

Il contenitore di elementi predefinito per un TreeView ha una griglia definita come (con alcuni commenti aggiunti):

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

Quindi basta estendere questa griglia per contenere le colonne di larghezza prevedibile a destra e si avranno le colonne.

• Aggiungi la definizione di colonna per la nuova colonna, rendila ridimensionata automaticamente
• Aggiorna l'intervallo di colonne di " ItemsHost " per estendere la colonna aggiunta
• Aggiungi un controllo di larghezza prevedibile a quella colonna:

Parti interessate:

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

Se il bordo aggiunto ha la stessa larghezza per tutte le righe, avrai una vista che sembra un treeview con colonne. Questo ovviamente non si ridimensionerà bene, ma se hai solo bisogno di una soluzione rapida e sporca, dovresti essere in grado di farlo in pochi minuti senza aggiungere dipendenze per controlli / librerie esterne.

Le nostre esigenze sono cresciute rapidamente e abbiamo aggiunto una griglia con le etichette delle colonne all'esterno dell'albero e abbiamo analizzato la larghezza delle colonne lì alla larghezza di queste "colonne". [in realtà le larghezze di un controllo spanning in le colonne in questione utilizzando colonne con ridimensionamento automatico]. Funziona, il che è tutto ciò che dirò a sua difesa.

Questo approccio potrebbe anche essere fatto nel modello di elemento generato invece che nel contenitore di articoli se non ti dispiace (o vuoi) la casella di selezione (il bordo "Bd") che si estende su tutte le colonne.