WPF中的多列树视图

Question

任何人都知道我在哪里可以像WPF中的多列树视图一样获得控件？

Answer 1

SharpDevelop有一个ListView子类叫做SharpTreeView你要找的东西.

您可以在SharpDevelop的"Watch"窗口中看到此控件的实例:

Watch窗口中使用的XAML(如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属性.

Answer 2

我已经根据这里的旧博客文章实现了这一点.但如果我没记错的话,我必须做一些手工工作才能让事情正常进行.特别是滚动条.

但这应该会给你一个良好的开端.

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>

如果添加的边框对于所有行都是相同的宽度，那么您将拥有一个看起来像带有列的树状视图的视图。这显然不能很好地扩展，但是如果只需要一个快速而肮脏的解决方案，您应该能够在几分钟内完成混合操作而无需添加外部控件/库的依赖项。

我们的需求迅速增长，我们在树外添加了一个带有列标签的网格，并将那里的列宽度数据绑定到这些“列”的宽度（实际上是使用自动调整大小的列在所涉及列中的跨距控件的宽度）。它有效，这就是我在防御中要说的。

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