当另一个元素部分遮挡它时，包装VariableSizedWrapGrid

Question

我有以下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>

Answer 1

最初，当您开始调整页面大小时，WrapPanel的宽度根本不会发生变化，这就是为什么您看不到绿色矩形的原因到第二排。

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

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