Multi-column Tree-View в WPF

Ответ 1

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

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

Ответ 2

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

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

XAML, используемый в окне Watch (как в версии 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>

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

Ответ 3

Существует статья о кодепероте, которая может помочь:

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

Существует еще несколько полезных статей о Wpf TreeView.

Ответ 4

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

Контейль для элементов по умолчанию для 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" ), проходящее по всем столбцам.