如何使用RelativePanel指定以下布局？

Question

+--+---+--+
|  |RED|  |
+------+  |
| BLUE |  |
+------+--+

我已经尝试了几种不同的RelativePanel.Align...附加属性组合，但我似乎不能完全按照我想要的方式工作。

<!-- this version overlays Red beneath Blue, but aligned on the right -->
<Rectangle x:Name="Red" RelativePanel.AlignRightWith="Blue" />
<Rectangle x:Name="Blue" />

<!-- this version shoves Blue half off-screen -->
<Rectangle x:Name="Red" />
<Rectangle x:Name="Blue" RelativePanel.AlignRightWith="Red" RelativePanel.Below="Red" />

<!-- this version is a circular dependency -->
<Rectangle x:Name="Red" RelativePanel.AlignRightWith="Blue" />
<Rectangle x:Name="Blue" RelativePanel.Below="Red" />

Answer 1

如果我是你，我会用Grid。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <Rectangle Fill="Red" Grid.Column="1" ... />
    <Rectangle Fill="Blue" Grid.Row="1" Grid.ColumnSpan="2" ... />
</Grid>