StackPanel 内的 ScrollViewer 的宽度会自动随其内容的宽度而变化答案

【问题标题】：Width of ScrollViewer inside StackPanel automatically change with it's Content's widthStackPanel 内的 ScrollViewer 的宽度会自动随其内容的宽度而变化
【发布时间】：2018-04-05 11:06:42
【问题描述】：

ScrollViewer 的 Width 如果这样使用，则保持“正常”：

<Grid>
    <ScrollViewer>
        <Rectangle Width="2500"/>
    </ScrollViewer>
</Grid>

说“正常”我的意思是ScrollViewer 的Width 将与Grid（在我的情况下为1500）相同，因为我自己没有提到他们的Width。至少这是我所知道的。

但是，如果上述部分是在这样的 StackPanel 中获取的：

<StackPanel Orientation="Horizontal">
    <Grid>
        <ScrollViewer>
            <Rectangle Width="2500"/>
        </ScrollViewer>
    </Grid>
</StackPanel>

然后 ScrollViewer 的 Width 变为 2500，因为它是 Content 的 Width。

什么原因？

【问题讨论】：

标签： .net xaml uwp uwp-xaml scrollviewer

【解决方案1】：

XAML 中的布局过程分为Measure和Arrange两个阶段。

在测量阶段，通常，大多数小组会问他们的孩子“你想要什么尺寸？” （这将有效地走下树）。并且孩子的父母可以根据它的孩子来决定它想要什么大小。它在其MeasureOverride 方法中返回此Size。

测量完所有内容后，就可以在屏幕上实际安排和布局内容了。这是确定元素的实际大小的时候。系统首先告诉每个元素“这是你有多少空间”。然后，每个面板从顶部开始，然后可以告诉它的孩子在其空间内的位置以及它实际需要占用多少空间（通过在父自定义的 ArrangeOverride 方法中对每个孩子调用 Arrange 来完成面板）。

您可以查看此here 的完整文档。

因此，在您的两个示例中，由于 Grids 和 StackPanels 的行为方式，结果是不同的：

以 Grid 作为根，在上面的示例中，它占用了可用空间并告诉其子级他们必须适应其中。所以 ScrollViewer 说它想要更大，因为它是子矩形，但最后 Grid 说你只有 1500 个单位的空间，因为这就是它的全部。因此，如果您打开HorizontalScrollBarVisibility，ScrollViewer 会显示一个滚动条，让您平移查看整个矩形。
以 StackPanel 作为根，它将扩展自身以适应其子项的大小。因此，当 ScrollViewer 告诉 Grid 它希望它的内容具有这个大小时，它会通过 Grid 向上传递到 StackPanel。到了 Arrange 的时候，StackPanel 告诉 Grid 它拥有它请求的所有空间，这就是 Rectangle 想要的额外空间。这个额外的空间最终会在显示时被页面/窗口剪掉。

这就是为什么有这么多不同的布局面板可用的原因，因为它们在这两个步骤中的行为都不同，以排列一个或多个内容项以获得所需的效果。这也是为什么在任何地方都使用 StackPanel 可能会很棘手，因为与其他表现得更“可预测”的面板相比，它们总是贪婪的。

【讨论】：

非常感谢您的详细回答。 :)