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