Changing aspect ratio of background image in Xamarin.Forms while keeping contents centered

Question

In Xamarin.Forms, I have a page which contains one Picker control and one TextBox. For that page, I want to display a background image. My problem is that there is no proprietary way to set an aspect ratio for page background images in Xamarin.Forms. The initial code looks like the following:

<?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>

This results in the following layout:

Now, the problem is actually that the burger in the background image is only displayed partially. So I googled and found several attempts to fix this. They all involved AbsoluteLayout or RelativeLayout. I tried both, but AbsoluteLayout seemed to work better. XAML is the following:

<?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>

And it results in this:

As you can see, the background image is now properly sized but the former centered controls are at the very top now. How can I fix that?

Answer 1

Change the HorizontalOptions="Center" VerticalOptions="Center" of stacklayout to CenterAndExpand will work:

<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: