ScrollViewer 不能与 StackPanel 一起使用

Posted 2023-03-30

【中文标题】ScrollViewer 不能与 StackPanel 一起使用

【英文标题】：ScrollViewer not working with StackPanel

【发布时间】：2013-03-10 00:41:05

【问题描述】：

我的页面左侧有一个垂直 StackPanel，其中包含以下元素：

1 个文本块 1 个垂直 StackPanel，其中包含多个填充可用空间的元素

我正在尝试使用 ScrollViewer 元素使第二个 StackPanel 可滚动，但没有成功。如果我将 ScrollViewer Height 定义为某个值，它可以工作，但我不想这样做，因为我希望它填充所有可用的垂直空间。

我正在考虑在读取 StackPanel 计算高度的代码中应用 ScrollViewer Height，但这似乎不是正确的做法。 我还尝试将 Height 和 ActualHeight 绑定到 StackPanel Height 属性，但没有结果。

<ScrollViewer
    Grid.Row="1"
    VerticalAlignment="Top"
    VerticalScrollBarVisibility="Auto"
    HorizontalScrollBarVisibility="Disabled"
    ScrollViewer.VerticalScrollMode="Enabled"
    ScrollViewer.HorizontalScrollMode="Disabled"
    ScrollViewer.ZoomMode="Disabled">
    <StackPanel x:Name="sptest" Orientation="Vertical">
        <TextBlock Style="StaticResource PageHeaderTextStyle">test1</TextBlock>
        <TextBlock Style="StaticResource PageHeaderTextStyle">test2</TextBlock>
        <TextBlock Style="StaticResource PageHeaderTextStyle">test3</TextBlock>
        <TextBlock Style="StaticResource PageHeaderTextStyle">test4</TextBlock>
        <TextBlock Style="StaticResource PageHeaderTextStyle">test5</TextBlock>
        <TextBlock Style="StaticResource PageHeaderTextStyle">test6</TextBlock>
        <TextBlock Style="StaticResource PageHeaderTextStyle">test7</TextBlock>
        <TextBlock Style="StaticResource PageHeaderTextStyle">test8</TextBlock>
        <TextBlock Style="StaticResource PageHeaderTextStyle">test9</TextBlock>
        <TextBlock Style="StaticResource PageHeaderTextStyle">test10</TextBlock>
        <TextBlock Style="StaticResource PageHeaderTextStyle">test11</TextBlock>
        <TextBlock Style="StaticResource PageHeaderTextStyle">test12</TextBlock>
    </StackPanel>
</ScrollViewer>

除了我还有一个 GridView 填充水平可用空间，它自动有滚动条。我没有定义它，它会在必要时出现。奇怪的是 StackPanel 的行为不像我想要的那样。我做错了什么？

编辑

我找到了这个SO question。这是关于 WPF 而不是 WinRT 但可能是同样的问题。它说：

您不能不固定 StackPanel 的高度。它旨在无限期地朝一个方向发展。我建议使用不同的面板

我将 StackPanel 更改为 Grid（由于行定义，我不想这样做，因为我只想要一列）但 ScrollViewer 也不起作用。

【问题讨论】：

我试过你提供的代码，它工作正常。你能解释一下你遇到的确切问题吗？或者你能提供整个页面的代码吗？

@Sach 感谢您抽出宝贵时间。我睡着了，今天早上醒来，并设法通过使用 Grid 更改其父元素（垂直 StackPanel）来解决它（我的代码现在充满了网格......）

@Sach 在我的问题中，我说我有一个有两行的网格，但我弄错了，它是一个 StackPanel，答案在我的问题中 -.- 我应该编辑问题并回答它还是删除它？

您可以随时回答自己的问题，它会帮助遇到同样问题的其他人。 :) 我认为你应该这样做。很高兴你自己解决了。 :)

@Sach 完成。我仍然不知道为什么它与 Grid 作为父级而不是 StackPanel 一起使用，所以我觉得这不是答案。无论如何，谢谢。

【参考方案1】：

经过一夜长眠，我通过将 父 StackPanel 更改为 Grid 解决了这个问题。我将第二个 StackPanel 保留在 ScrollViewer 元素中，它可以工作。

我不知道为什么当它的父级是 StackPanel 而不是 Grid 时 ScrollViewer 不起作用。如果有人知道为什么，请向我解释。我不想制作一个只有一列和两行的 Grid，因为这似乎是垂直 StackPanel 的目的。

即使我在不​​知道原因的情况下解决了它，但我希望这个问题可以帮助其他有同样问题的人，如果你正在阅读这篇文章并且你可以解释这个问题，请告诉我......我很想知道。

【讨论】：

这里有一些关于主题***.com/questions/802821/…

高度/宽度设置为自动不符合 StackPanel 方向垂直/水平。手动设置宽度/高度可以解决问题（作为 PoC）。这就是使用 Grid 更容易的原因。

【参考方案2】：

堆栈面板是一种容器，它可以随着您添加到其中的子项而不断增长，并为其每个子项提供相等的空间，因此滚动查看器需要一个高度来告诉父项定义空间限制；因此它可以在其指定的区域内运行。

希望有帮助。

【讨论】：

所以将Height 属性添加到父StackPanel 将使ScrollViewer 工作？

【参考方案3】：

我只是给了 ScrollViewer 一个 MaxHeight。我猜 ScrollViewer 需要知道它的最大高度是多少，以便确定何时显示滚动条（如果您将它们设置为自动可见性）。 我只是在 ScrollViewer 的 MaxHeight 和没有 MaxHeight 的情况下进行了尝试，它只适用于 MaxHeight 属性。 如果我不得不冒险猜测，我会说 Grid 从您设置的属性中知道它的 MaxHeight，但我不确定，这只是一个猜测。

【参考方案4】：

我通过使 StackPanel 成为 ScrollViewer 的子级并设置 StackPanel 的高度来完成我的工作