更改 Xamarin.Forms 中背景图像的纵横比，同时保持内容居中

在 Xamarin.Forms 中，我有一个页面，其中包含一个 Picker 控件和一个 TextBox。对于该页面，我想显示背景图像。我的问题是，没有专有的方法可以在 Xamarin.Forms 中设置页面背景图像的纵横比。初始代码如下所示：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:controls="clr-namespace:Reserve15.Controls"
             mc:Ignorable="d"
             x:Class="Reserve15.Views.Bestellen"
             Title="Bestellen"
             BackgroundImageSource="image_food">

    <ContentPage.Content>
        <StackLayout HorizontalOptions="Center" VerticalOptions="Center">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>

                    <StackLayout HorizontalOptions="Center" VerticalOptions="Center" Grid.Column="0" Grid.Row="1" Margin="20,0,20,0">
                        <controls:MaterialPicker x:Name="KategoriePicker" Title="Was möchtest du essen?" BackgroundColor="White" />
                        <controls:MaterialTextBox x:Name="OrtTextBox" Placeholder="Dein Lieferort" BackgroundColor="White" />
                    </StackLayout>
                </Grid>
            </StackLayout>
    </ContentPage.Content>
</ContentPage>

这会产生以下布局：

现在，问题实际上是背景图像中的汉堡仅部分显示。所以我用谷歌搜索并发现了一些解决这个问题的尝试。他们都参与了绝对布局 or 相对布局。 我都尝试了，但 AbsoluteLayout 似乎效果更好。 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"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:controls="clr-namespace:Reserve15.Controls"
             mc:Ignorable="d"
             x:Class="Reserve15.Views.Bestellen"
             Title="Bestellen">

    <AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <Image AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" Source="image_food" Aspect="AspectFill"/>
        <StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="1,1,1,1">
            <!--Content-->

            <StackLayout HorizontalOptions="Center" VerticalOptions="Center">

                <StackLayout HorizontalOptions="Center" VerticalOptions="Center" Grid.Column="0" Grid.Row="1">
                    <controls:MaterialPicker x:Name="KategoriePicker" Title="Was möchtest du essen?" BackgroundColor="White" />
                    <controls:MaterialTextBox x:Name="OrtTextBox" Placeholder="Dein Lieferort" BackgroundColor="White" />
                </StackLayout>
            </StackLayout>
        </StackLayout>
    </AbsoluteLayout>
</ContentPage>

结果是这样的：

正如您所看到的，背景图像现在大小正确，但以前的居中控件现在位于最顶部。我该如何解决这个问题？

改变HorizontalOptions="Center" VerticalOptions="Center" of stacklayout to CenterAndExpand将工作：

<AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
    <Image AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" Source="sample.jpg" Aspect="AspectFill"/>
    <StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="1,1,1,1">
        <!--Content-->

            <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
                <Label x:Name="KategoriePicker" Text="Was möchtest du essen?" BackgroundColor="White" />
                <Label x:Name="OrtTextBox" Text="Dein Lieferort" BackgroundColor="White" />
            </StackLayout>
        
    </StackLayout>
</AbsoluteLayout>

Result: