背景图像在 Xamarin 应用程序中被挤压

Question

我的 Xamarin Forms 5 应用程序的登录页面上有一个背景图片。

我希望这张图片占据整个背景但不要被挤压，这样我可以保持其原始比例。否则，图像会失真。目前，它占据了整个页面，但它在垂直方向上被挤压了。如何确保图像保持其原始纵横比而不被挤压？

这是我在此页面上的 XAML 代码：

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="400" />
            <RowDefinition Height="200" />
        </Grid.RowDefinitions>

        <!-- Logo -->
        <Image Grid.Row="0"
               Source="my_background_image.png"
               HorizontalOptions="FillAndExpand"
               VerticalOptions="FillAndExpand"
               HeightRequest="150"/>

        <!-- Sign In Button -->
        <StackLayout Grid.Row="1" Padding="10,0,10,0" VerticalOptions="Center">
            <Button VerticalOptions="Center" Text="Sign In  /  Sign Up" Clicked="Login_Tapped"/>
        </StackLayout>
    </Grid>

Answer 1

不知您是否设置了ContentPage的属性名为BackgroundImageSource的背景图片。我试过这个，图片显示很好。

如果您已经尝试过了，但没有得到满意的效果，您可以在 Grid 中添加一个 Image 视图作为背景。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="400" />
        <RowDefinition Height="200" />
    </Grid.RowDefinitions>
    <Image
        Grid.RowSpan="3"
        Aspect="AspectFill"
        Source="background.jpg" />
    <!-- Logo -->
    <Image Grid.Row="0"
           Source="my_background_image.jpg"
           HorizontalOptions="FillAndExpand"
           VerticalOptions="FillAndExpand"
           HeightRequest="150"/>

    <!-- Sign In Button -->
    <StackLayout Grid.Row="1" Padding="10,0,10,0" VerticalOptions="Center">
        <Button VerticalOptions="Center" Text="Sign In  /  Sign Up" Clicked="Login_Tapped"/>
    </StackLayout>
</Grid>

如果你的图片宽高比太大，可以将Aspect="AspectFill"改为Aspect="AspectFit"。

背景图像在 Xamarin 应用程序中被挤压

Background image getting squeezed in Xamarin app

xamarin

xamarin.forms