C# 改变Xamarin.Forms中背景图像的纵横比，同时保持内容居中_C#_.net_Xaml_Xamarin_Xamarin.forms

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

c# .net xaml xamarin xamarin.forms

C# 改变Xamarin.Forms中背景图像的纵横比，同时保持内容居中,c#,.net,xaml,xamarin,xamarin.forms,C#,.net,Xaml,Xamarin,Xamarin.forms,在Xamarin.Forms中，我有一个包含一个选择器控件和一个文本框的页面。对于该页面，我希望显示背景图像。我的问题是在Xamarin.Forms中没有专有的方法来设置页面背景图像的纵横比。初始代码如下所示： <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

在Xamarin.Forms中，我有一个包含一个选择器控件和一个文本框的页面。对于该页面，我希望显示背景图像。我的问题是在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>

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

这将导致以下布局：

现在，问题是背景图像中的汉堡只是部分显示。所以我在谷歌上搜索了几次，找到了解决这个问题的方法。它们都涉及绝对布局或相对布局。我两个都试过了，但绝对布局似乎效果更好。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"
             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>

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



正如您所看到的，背景图像现在大小适当，但以前居中的控件现在位于最顶部。如何解决此问题？
将stacklayout
的horizontalpoptions=“Center”VerticalOptions=“Center”
更改为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>

非常感谢您！