C# 如何在页面中的网格顶部分层元素，从而有效地忽略某些元素的网格？

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

<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，并放置在最左上方栅格位置的红色矩形顶部

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

我展示的图片正是我想要的结果，我只是想知道是否有其他方法可以实现这一点，包括跨越多个行和列定义

---

谢谢

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

<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>

具有白色背景和椭圆的栅格位于外部栅格的同一单元格中

---

要了解椭圆如何覆盖矩形，请增加椭圆大小（高度/宽度）

老实说，我对您的问题有点困惑。看起来你已经达到了你想要的，但是你对你达到目的的方式不满意。为什么？网格是用来布局的……我喜欢在学习新软件和语言的同时，了解不同的做事方式和不同的代码实现，以达到相同的效果。有时候，我会不厌其烦地以一种更难、更奇怪的方式去做某件事，只是为了知道它是有效的。此外，以不同的方式完成任务，我经常会更多地了解程序的底层结构。是的，我从上面的代码中得到了我想要的结果，但是我想“嗯，一定有更好的方法来实现这一点。”谢谢，这正是我想要的。