WPF中的多列树形视图

Question

有人知道在哪里可以获得类似于 WPF 中多列树视图的控件吗？

- Micah

Answer 1

SharpDevelop有一个名为SharpTreeView的ListView子类，它可以完成您要查找的功能。

您可以在SharpDevelop的“Watch”窗口中看到此控件的实时示例：

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>

该资源已设置为 SharpTreeView 控件的 View 属性。

- Paolo Moretti

---

好的截图，但是这个应该怎么使用？你的代码示例似乎显示了 tv:SharpTreeView.View 的定义，但是缺少其他父级 tv:SharpTreeView 的部分。对于那些能够使用 WPF 标准 TreeView 的人来说，它是如何工作的呢？ - ygoe

它不起作用。未知对象“local:AutoCompleteTextBox”。 - Stas BZ

@StasBZ 这段代码只是一个示例，不应该盲目地复制和粘贴。AutoCompleteTextBox 是在 SharpDevelop 中定义的用户控件。 - Paolo Moretti

这里有一个使用SharpTreeView的好例子：https://github.com/icsharpcode/SharpDevelop/tree/master/src/Libraries/SharpTreeView/ICSharpCode.TreeView.Demo - Stas BZ

Answer 2

我是基于这篇旧博客文章实现的。但是如果我没记错的话，我需要手动调整一些内容才能使它正常工作，特别是滚动条的部分。

但这应该可以为你提供一个很好的起点。

- MrSlippers

---

我使用过这个解决方案，它很有效。 - Dylan

此URL已过期。 - O. R. Mapper

Answer 3

如果您不需要列标题，则这很容易。您可以只提供一个项容器模板，在右侧添加固定宽度的网格列，并将其绑定到您的项的相关数据。

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>

如果每行添加的边框宽度都相同，您将获得一种感觉像是带有列的树状视图。显然这不会很好地扩展，但如果只需要快速且简单的解决方案，则应该能够在 Blend 中在几分钟内完成此操作，而无需添加外部控件/库的依赖项。

我们的需求迅速增长，我们添加了一个带有树形结构之外的列标签的网格，并将这些“列”的宽度数据绑定到那里使用自动大小调整的跨度控件中的“实际列”[实际上是涉及的列]的宽度。它起作用，这就是我为它辩护的全部内容。

如果您不介意（或想要）选择框（“Bd”边框）跨越所有列，则可以在生成的项模板中执行此方法，而不是在项容器中执行。

- PatrickV