Многоколоночное древовидное представление в WPF

Я реализовал это на основе старого сообщения в блоге здесь. Но если я правильно помню, мне пришлось немного поработать вручную, чтобы все заработало. В частности, с полосами прокрутки.

Но это должно дать вам хорошее начало.

SharpDevelop имеет подкласс ListView под названием SharpTreeView, который делает то, что вы ищете.

Вы можете увидеть живой пример этого элемента управления в окне «Watch» SharpDevelop:

XAML, используемый в окне Watch (как в бета-версии 5.1.0):

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

Для ресурса установлено свойство View элемента управления SharpTreeView.

Если вам не нужны заголовки столбцов, это довольно просто. Вы можете просто предоставить шаблон контейнера элемента, добавить столбцы сетки фиксированной ширины справа и привязать его к соответствующим данным вашего элемента.

Контейнер элементов по умолчанию для TreeView имеет сетку, определенную как (с некоторыми добавленными комментариями):

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

Так что просто расширьте эту сетку, чтобы она содержала столбцы предсказуемой ширины вправо, и у вас будут столбцы.

• Добавить определение столбца для нового столбца, сделать его автоматическим
• Обновите диапазон столбца ItemsHost, чтобы охватить добавленный столбец.
• Добавьте в этот столбец элемент управления предсказуемой ширины:

Затронутые части:

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

Если добавленная граница имеет одинаковую ширину для всех строк, вы получите представление, похожее на древовидную структуру со столбцами. Очевидно, что это не будет хорошо масштабироваться, но если вам просто нужно быстрое и грязное решение, вы сможете сделать это в смеси за несколько минут, не добавляя зависимости для внешних элементов управления / библиотек.

Наши потребности быстро росли, и мы добавили сетку с метками столбцов за пределами дерева и привязали ширину столбцов к ширине этих «столбцов» [на самом деле ширину охватывающего элемента управления в столбцов, о которых идет речь, с использованием столбцов с автоматическим размером]. Он работает, и это все, что я скажу в его защиту.

Этот подход также может быть реализован в сгенерированном шаблоне элемента вместо контейнера элемента, если вы не возражаете (или хотите), чтобы поле выбора (граница «Bd») распространялось на все столбцы.