ScrollViewer与StackPanel不配合使用的问题

Question

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

• 1个TextBlock
• 1个垂直StackPanel，其中包含多个元素并填充了可用空间

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

我想在代码中应用ScrollViewer高度，读取StackPanel计算出的高度，但这似乎不是正确的方法。 我还尝试将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 也不起作用。

- letiagoalves

---

我尝试了您提供的代码，它可以正常工作。您能否解释一下您遇到的确切问题？或者您能提供整个页面的代码吗？ - SachiraChin

@Sach 谢谢你抽出时间来看。我睡觉了，早上醒来后通过将父元素(垂直StackPanel)更改为Grid来解决了它(我的代码现在充满了Grid...)。 - letiagoalves

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

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

@Sach 已完成。我仍然不知道为什么它可以使用 Grid 作为父级而不是 StackPanel，所以对我来说它不是答案。无论如何，谢谢。 - letiagoalves

Answer 1

经过一个漫长的夜晚，我通过将父StackPanel更改为Grid来解决了问题。 我在ScrollViewer元素内保留了第二个StackPanel，并且它工作正常。

我不知道为什么当ScrollViewer的父类是StackPanel而不是Grid时，ScrollViewer无法工作。 如果有人知道原因，请告诉我。 我不想创建只有一列和两行的网格，因为这似乎是垂直StackPanel的作用。

即使我在不知道原因的情况下解决了它，我希望这个问题能帮助其他遇到同样问题的人，如果您正在阅读此内容并且能够解释这个问题，请告诉我...我会很高兴知道。

- letiagoalves

---

在这里，我们对这个主题进行一些解释：https://dev59.com/nXRA5IYBdhLWcg3w2xwI - Boris Ivanov

将高度/宽度设置为自动不随着StackPanel垂直/水平方向而变化。手动设置宽度/高度可以解决此问题（作为PoC）。这就是为什么使用Grid要容易得多的原因。 - GeorgiG

Answer 2

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

希望这有所帮助。

- Kundan Vuppala

---

那么在父级StackPanel中添加“Height”属性会使ScrollViewer正常工作吗？ - letiagoalves

Answer 3

我刚给ScrollViewer设置了MaxHeight。我猜测，为了确定何时显示滚动条（如果您将其设置为自动可见性），ScrollViewer需要知道其最大高度。
我尝试过使用和不使用ScrollViewer的MaxHeight属性，只有在使用MaxHeight属性时才有效。
如果我要猜测，我会说Grid从您设置的属性中知道其MaxHeight，但我不确定，这只是一个猜测。

- Boldi

Answer 4

我通过将StackPanel设置为ScrollViewer的子元素并设置StackPanel的高度来使其正常工作。

- anagpuyol