Как я могу наложить элемент поверх сетки на странице, эффективно игнорируя сетку для некоторых элементов?

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>

Сетка с белым фоном и эллипс расположены в одной ячейке внешней Сетки.

Чтобы увидеть, как эллипс может покрывать прямоугольники - увеличьте размер эллипса (высота / ширина)