如何在页面内的网格顶部分层元素，有效地忽略某些元素的网格？

Question

这是我正在使用的代码和显示结果的图像。这个最终产品具有我想要的外观，但我认为必须有更好的方法来做到这一点。

<Page
x:Class="UIFollowAlong.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UIFollowAlong"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Resources>
    <Style TargetType="Rectangle"
           x:Key="ColorButton">
        <Setter Property="Margin" Value="5"/>
        <Setter Property="RadiusX" Value="50"/>
        <Setter Property="RadiusY" Value="50"/>
    </Style>
</Page.Resources>

<Grid Background="White">
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Rectangle x:Name="RedButton"
               Grid.Row="0"
               Grid.Column="0"
               Fill="Red"
               Style="{StaticResource ColorButton}"/>
    <Rectangle x:Name="YellowButton"
               Grid.Row="0"
               Grid.Column="1"
               Fill="Yellow"
               Style="{StaticResource ColorButton}"/>
    <Rectangle x:Name="GreenButton"
               Grid.Row="1"
               Grid.Column="0"
               Fill="Green"
               Style="{StaticResource ColorButton}"/>
    <Rectangle x:Name="BlueButton"
               Grid.Row="1"
               Grid.Column="1"
               Fill="Blue"
               Style="{StaticResource ColorButton}"/>
    <Ellipse x:Name="CenterDot"
             Grid.ColumnSpan="2"
             Grid.RowSpan="2"
             Fill="Black"
             Width="50"
             Height="50"
             HorizontalAlignment="Center"
             VerticalAlignment="Center"/>
</Grid>

我特别提出问题的代码是椭圆。

<Ellipse x:Name="CenterDot"
             Grid.ColumnSpan="2"
             Grid.RowSpan="2"
             Fill="Black"
             Width="50"
             Height="50"
             HorizontalAlignment="Center"
             VerticalAlignment="Center"/>

如何在忽略网格的行和列定义的情况下将椭圆对齐到中心？默认情况下，椭圆变为 0,0 并被放置在最左上角网格位置的红色矩形顶部。

我尝试放置在页面内，而不是网格内，但我认为页面只能有一个内容属性？

我展示的图片正是我想要的结果

谢谢！

Answer 1

要在同一区域上拥有多个图层，请再引入一个网格：

<Grid>
    <!--layer 0-->
    <Grid Background="White">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Rectangle x:Name="RedButton"
                   Grid.Row="0"
                   Grid.Column="0"
                   Fill="Red"
                   Style="{StaticResource ColorButton}"/>
        <Rectangle x:Name="YellowButton"
                   Grid.Row="0"
                   Grid.Column="1"
                   Fill="Yellow"
                   Style="{StaticResource ColorButton}"/>
        <Rectangle x:Name="GreenButton"
                   Grid.Row="1"
                   Grid.Column="0"
                   Fill="Green"
                   Style="{StaticResource ColorButton}"/>
        <Rectangle x:Name="BlueButton"
                   Grid.Row="1"
                   Grid.Column="1"
                   Fill="Blue"
                   Style="{StaticResource ColorButton}"/>
    </Grid>

    <!--layer 1, covers layer 0-->
    <Ellipse x:Name="CenterDot"
             Fill="Black"
             Width="50"
             Height="50"
             HorizontalAlignment="Center"
             VerticalAlignment="Center"/>

</Grid>

白色背景的网格和椭圆位于外部网格的同一单元格中。

要查看椭圆如何覆盖矩形 - 增加椭圆大小（高度/宽度）