Creating an overlapping circle in the center of a 2x2 grid

I am working on a business dictated layout that includes a 2x2 grid with an overlaid (clickable) circle. This is what I have so far:

Here is an edited version of the above to show an ideal state (the blue circle is what I'm trying to achieve):

This is my current markup:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="" xmlns:x="" x:Class="Kobol.Features.HomePage">
        <StackLayout VerticalOptions="FillAndExpand" Spacing="0">
            <StackLayout Orientation="Horizontal" HeightRequest="50" BackgroundColor="Blue">
                <StackLayout HorizontalOptions="Start" WidthRequest="80" BackgroundColor="Lime">
                <StackLayout HorizontalOptions="FillAndExpand" />
                <StackLayout HorizontalOptions="End" WidthRequest="80" BackgroundColor="Lime">
            <StackLayout VerticalOptions="FillAndExpand" BackgroundColor="yellow">
            <StackLayout VerticalOptions="End" HeightRequest="300" BackgroundColor="Red">
                 <Grid VerticalOptions="FillAndExpand">
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    <Label Text="Top Left" Grid.Row="0" Grid.Column="0" VerticalOptions="Center" HorizontalOptions="Center" />
                    <Label Text="Top Right" Grid.Row="0" Grid.Column="1" VerticalOptions="Center" HorizontalOptions="Center" />
                    <Label Text="Bottom Left" Grid.Row="1" Grid.Column="0" VerticalOptions="Center" HorizontalOptions="Center" />
                    <Label Text="Bottom Right" Grid.Row="1" Grid.Column="1" VerticalOptions="Center" HorizontalOptions="Center" />

Can I achieve this within the grid itself?


Best Answers

  • RyanMendozaRyanMendoza US ✭✭
    Accepted Answer

    @JoeManke I was able to take that approach with a Frame for now


  • RyanMendozaRyanMendoza USMember ✭✭
    Accepted Answer

    @JoeManke I was able to take that approach with a Frame for now

Sign In or Register to comment.