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>

result

我要询问的代码特别是Ellipse。

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

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

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

我显示的图片恰好是我想要的结果，我只是想知道是否有另一种方法来实现这一目标，而这涉及跨多个行和列的定义。

谢谢！

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>

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

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

如何在页面内的网格顶部放置元素，从而有效地忽略某些元素的网格？

1 个答案: