CODEWITHSUNDEEP
c#wpfxamllayout
Alex Kennedy
Alex Kennedy

Reputation: 35

How can I layer an element on top of a Grid within a Page, effectively ignoring the grid for some elements?

Here is the code that I'm working with and an image which shows the result. This final product has the look that I'm going for, but I think that there must be a better way to do this.

<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

The code in particular that I'm asking the question about is the Ellipse.

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

How can I align the ellipse to the center while ignoring the row and column definitions of the grid? By default, the ellipse goes to 0,0 and gets placed on top of the red rectangle in the top-most left-most grid position.

I tried to place within the page, rather than within the grid, but I think the page can only have one content property?

The picture I showed is exactly the result I wanted I'm just wondering if there is an alternative way to achieve this that does involve spanning multiple row and column definitions.

Thanks!

Upvotes: 0

Views: 112

Answers (1)

ASh
ASh

Reputation: 35681

To have have multiple layers over the same area introduce one more Grid:

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

Grid with White background and Ellipse are positioned in the same cell of the outer Grid.

To see how Ellipse can cover Rectangles - increase Ellipse size (Height/Width)

Upvotes: 1

Related Questions