Xaml макет, коробка в левом углу над другой коробкой

Question

Я пытаюсь добраться до этого макета.

Я правильно понял красную часть, но не могу расположить зеленую коробку в верхней части левой части красной рамки.

Зеленая коробка должна иметь такую ​​же ширину, что и левая часть красной части. Зеленая коробка должна быть на виду сверху вниз.

Пока это мой код. Я абсолютный новичок в xaml, поэтому понятия не имею, возможно ли вообще сделать такой макет.

<?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="HOT_App.Views.ItemsPage"
              Title="{Binding Title}"
             x:Name="BrowseItemsPage">
    <StackLayout>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="80"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <BoxView BackgroundColor="red" Grid.Row="0"></BoxView>
            <BoxView BackgroundColor="red" Grid.Column="1"></BoxView>
            <BoxView WidthRequest="300" BackgroundColor="green" Grid.Row="1"></BoxView>
            <BoxView BackgroundColor="Aqua" Grid.Row="1" Grid.Column="1"></BoxView>
        </Grid>
    </StackLayout>

</ContentPage>

Answer 1

используйте RowSpan, чтобы элемент занимал несколько строк

<BoxView BackgroundColor="green" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" />