更改 Xamarin.Forms 中背景图像的纵横比，同时保持内容居中 [英] Changing aspect ratio of background image in Xamarin.Forms while keeping contents centered

问题描述

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

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>

这会导致以下布局:

现在，问题实际上是背景图像中的汉堡只显示了一部分.所以我用谷歌搜索并找到了几次解决这个问题的尝试.它们都涉及AbsoluteLayout 或RelativeLayout.我两个都试过了，但 AbsoluteLayout 似乎效果更好.XAML 如下:

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>

结果如下:

如您所见，背景图像现在大小合适，但以前居中的控件现在位于最顶部.我该如何解决?

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?

推荐答案

更改 Horizo​​ntalOptions=Center"stacklayout 到 CenterAndExpand 的 VerticalOptions=Center" 将起作用:

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>

结果:

这篇关于更改 Xamarin.Forms 中背景图像的纵横比，同时保持内容居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！