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="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Kobol.Features.HomePage">
    <ContentPage.Content>
        <StackLayout VerticalOptions="FillAndExpand" Spacing="0">
            <StackLayout Orientation="Horizontal" HeightRequest="50" BackgroundColor="Blue">
                <StackLayout HorizontalOptions="Start" WidthRequest="80" BackgroundColor="Lime">
                </StackLayout>
                <StackLayout HorizontalOptions="FillAndExpand" />
                <StackLayout HorizontalOptions="End" WidthRequest="80" BackgroundColor="Lime">
                </StackLayout>
            </StackLayout>
            <StackLayout VerticalOptions="FillAndExpand" BackgroundColor="yellow">
            </StackLayout>
            <StackLayout VerticalOptions="End" HeightRequest="300" BackgroundColor="Red">
                 <Grid VerticalOptions="FillAndExpand">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <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" />
                </Grid>         
            </StackLayout>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Can I achieve this within the grid itself?

Tagged:

Best Answers

  • RyanMendozaRyanMendoza US ✭✭
    Accepted Answer

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

Answers

  • RyanMendozaRyanMendoza USMember ✭✭
    Accepted Answer

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

Sign In or Register to comment.