当另一个元素部分遮盖 VariableSizedWrapGrid 时，包装 VariableSizedWrapGrid答案

【问题标题】：Wrap VariableSizedWrapGrid when another element obscures it partly当另一个元素部分遮盖 VariableSizedWrapGrid 时，包装 VariableSizedWrapGrid
【发布时间】：2017-06-26 15:43:22
【问题描述】：

我有以下 XAML 代码。

<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VariableSizedWrapGrid Orientation="Horizontal">
        <Rectangle Width="400" Height="400" Fill="Green"/>
        <Rectangle Width="400" Height="400" Fill="Blue"/>
    </VariableSizedWrapGrid>
    <Rectangle Width="600" MinWidth="600" Height="600" Fill="Pink" RelativePanel.AlignRightWithPanel="True"/>
</RelativePanel>

代码生成以下页面。

当应用窗口的宽度变暗时，应用窗口看起来像这样。

当粉色方块部分遮住蓝色方块时，我如何使蓝色方块包裹（低于绿色方块）？

当我使用社区工具包的 WrapPanel 而不是 VariableSizedWrapGrid 时，会发生完全相同的事情。下面的代码显示了它的外观。

<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Rectangle Width="600" MinWidth="600" Height="600" Fill="Pink" RelativePanel.AlignRightWithPanel="True"/>
    <wrapPanel:WrapPanel Orientation="Horizontal" >
        <Rectangle Width="400" Height="400" Fill="Green"/>
        <Rectangle Width="400" Height="400" Fill="Blue"/>
    </wrapPanel:WrapPanel>
</RelativePanel>

【问题讨论】：

您是说当您使用WrapPanel 并调整应用程序窗口大小时，里面的控件不会回流到正确的位置？
@JustinXL 没错。我添加了显示我如何使用 WrapPanel 的代码。请注意，我只为 WrapPanel 交换了 VariableSizedWrapGrid。没有进行其他更改。对 WrapPanel 的任何其他更改可能会产生影响吗？

标签： xaml uwp

【解决方案1】：

最初，当您开始调整页面大小时，WrapPanel 的宽度根本没有变化，这就是为什么您看不到绿色矩形进入第二行。

诀窍是给WrapPanel 一个右边距，它等于粉红色的宽度。

<wrapPanel:WrapPanel Orientation="Horizontal" Margin="0,0,600,0">

【讨论】：