启用WPF Treeview的滚动功能

Question

启用WPF Treeview的滚动功能

31

有谁能帮我解决如何启用树形视图的滚动条问题吗？一定有一个简单的方法，但是我在我的代码中无法让它起作用。在多次尝试失败后，我目前有类似于以下内容：

        <ScrollViewer CanContentScroll="True">
           <TreeView ...>
           </TreeView>
        </ScrollViewer>

我看到了一个“禁用”的滚动条，但是当树形视图的注释超过屏幕高度时，没有激活滚动。

- Ronald

6个回答

10

TreeView包含一个ScrollViewer，但正如@Carlo所说，TreeView或其容器需要具有高度。或者，应该将TreeView托管在不为其子元素提供无限高度的容器中（即@Kent可能是指的StackPanel）。因此，将其放置在Grid内，不需要为Grid或TreeView指定显式高度，您应该会得到滚动条。

- drjeks

我在StackPanel中使用TreeView时遇到了同样的问题。我只是用Grid替换了StackPanel，然后它就可以工作了。对我来说，设置固定高度不是一个选项，因为整个窗口应该可以动态地调整大小。 - chrmue

4

您的窗口是否明确设置了高度？如果要看到滚动条，则必须定义TreeView或其容器的高度，否则它将不知道何时需要显示滚动条。

示例：

<Window x:Class="StackOverflowTests.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" x:Name="window1" Height="300" Width="300">
    <Grid>
        <TreeView  Name="treeView1" Height="150" VerticalAlignment="Top">
            <TreeViewItem Header="Root" IsExpanded="True">
                <TreeViewItem Header="Item 1"></TreeViewItem>
                <TreeViewItem Header="Item 2"></TreeViewItem>
                <TreeViewItem Header="Item 3"></TreeViewItem>
                <TreeViewItem Header="Item 4"></TreeViewItem>
                <TreeViewItem Header="Item 5"></TreeViewItem>
                <TreeViewItem Header="Item 6"></TreeViewItem>
                <TreeViewItem Header="Item 7"></TreeViewItem>
                <TreeViewItem Header="Item 8"></TreeViewItem>
                <TreeViewItem Header="Item 9"></TreeViewItem>
                <TreeViewItem Header="Item 10"></TreeViewItem>
                <TreeViewItem Header="Item 11"></TreeViewItem>
                <TreeViewItem Header="Item 12"></TreeViewItem>
                <TreeViewItem Header="Item 13"></TreeViewItem>
                <TreeViewItem Header="Item 14"></TreeViewItem>
                <TreeViewItem Header="Item 15"></TreeViewItem>
                <TreeViewItem Header="Item 16"></TreeViewItem>
                <TreeViewItem Header="Item 17"></TreeViewItem>
                <TreeViewItem Header="Item 18"></TreeViewItem>
                <TreeViewItem Header="Item 19"></TreeViewItem>
                <TreeViewItem Header="Item 20"></TreeViewItem>
                <TreeViewItem Header="Item 21"></TreeViewItem>
                <TreeViewItem Header="Item 22"></TreeViewItem>
                <TreeViewItem Header="Item 23"></TreeViewItem>
                <TreeViewItem Header="Item 24"></TreeViewItem>
                <TreeViewItem Header="Item 24"></TreeViewItem>
            </TreeViewItem>
        </TreeView>
    </Grid>
</Window>

- Carlo

1

抱歉，尝试将高度添加到treeview及其容器中，但没有成功。 - Ronald

嗯，我确实得到了滚动条，我会将我的示例添加到我的回答中，看看它是否有效。基本上，窗口的高度设置为300，树视图的高度设置为150，所以树视图的高度是窗口的一半，如果其项超出高度，则会出现滚动条。 - Carlo

2

只需要给TreeView设置固定的高度和宽度，也许放在一个边框里会更好看。此外，我的项内容中有最大宽度。例如，在我的主窗口下面有两个堆栈面板，以下是使用MahApps Metro控件的示例代码：

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
        <Border BorderThickness="2" BorderBrush="DarkGoldenrod" Margin="4">
        <TreeView x:Name="TreeView" Width="400" Height="800" Focusable="True" VerticalAlignment="Top">
        </TreeView>            
    </Border>
</StackPanel>

- Rubarb

0

不必使用树形视图，可以使用展开器。它可以与滚动视图一起正常滚动，与树形视图的功能相同。

- Dipesh Bagdi

-1

把高度和宽度都设置为固定值怎么样？我知道这可能不是每个人的答案。

- I will get there some day

1

据我所知，这根本没有回答问题。固定什么的高度和宽度？那又如何启用滚动条呢？ - Hermann Döppes

请再次阅读问题。"我确实看到了一个'disabled'滚动条，但当树视图的注释大于屏幕高度时，没有激活滚动。"在treeview上设置高度和宽度。这实际上在我的帖子上面提到过。如果我记得正确，一旦在treeview上固定高度和宽度，当主窗口调整大小时，滚动条就会出现。 - I will get there some day

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kent Boogaart · Accepted Answer

48

TreeView 控件本身在其模板中包含一个 ScrollViewer。您应该能够直接在适当的宿主（而不是 StackPanel！）中使用 TreeView。

- Kent Boogaart

9

什么是合适的宿主？我的 TreeView 确实在 StackPanel 中。 - Ronald

34

当 StackPanel 的方向为水平时，它会给其内容提供任何宽度；当方向为垂直时，则提供任何高度。因此，如果你将一个 TreeView（或 ListBox 或其他控件）放在 StackPanel 中，TreeView 将认为它有足够的高度来显示所有项，而不需要滚动条。事实上，由于屏幕空间的限制，TreeView 将被裁剪。请改用 Grid。 - Kent Boogaart

我能够独立解决这个问题，完全归功于Kent Boogaart的评论，+1。只需将您的树形视图包装在网格括号中。 <Grid> <TreeView /> </Grid> - mwjohnson

1

即使您将TreeView包装在ScrollViewer中，并设置ScrollViewer的宽度和高度，StackPanel仍会混乱滚动。我本以为子元素上的宽度/高度约束会满足StackPanel。但事实并非如此。像瘟疫一样避免在StackPanels下使用TreeViews。正如其他人所证实的那样，一个简单的Grid，其中设置了宽度/高度并在其下方放置TreeView可以正确滚动。 - Gabe Halsmer

@KentBoogaart 我刚刚用 StackPanel 让它工作了。我只需要为我的 TreeView 设置一个 Height，现在滚动条就像预期的那样出现了。在过去的十年中，这个特性发生了什么变化，现在它可以与 StackPanel 一起使用了吗？ - Stan1k

显示剩余3条评论