将 AbsoluteLayout 用于背景图像，但某些元素未正确定位 Xamarin Forms答案

【问题标题】：Using AbsoluteLayout for a background image but some elements are not correctly positioned Xamarin Forms将 AbsoluteLayout 用于背景图像，但某些元素未正确定位 Xamarin Forms
【发布时间】：2018-12-20 20:07:03
【问题描述】：

我有一个背景图像，我必须将其设置为我的 ContentPage，但是图像被放大了。我需要它位于 Aspect="Fill" 以使其正确显示。我在网上查看，解决方案是使用带有图像的 AbsoluteLayout 或 RelativeLayout。但是当添加这个时，应该在页面底部的图像不再存在。

<RelativeLayout Parent="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

    <Image Source="Background.jpg" Aspect="Fill" RelativeLayout.WidthConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width}"
            RelativeLayout.HeightConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Height}"></Image>

    <StackLayout>

        <Label Text="Timetable" TextColor="Silver" HorizontalOptions="EndAndExpand" Margin="0, 10, 20, 0">
        </Label>

        <Image Margin="15, 20" HorizontalOptions="Center" WidthRequest="350" Source="subtle-logo.png"></Image>

        <Image HorizontalOptions="Center" x:Name="PlayPauseButton" Source="play.png" WidthRequest="75">
        </Image>

        <Image HorizontalOptions="Center" x:Name="shareButton" Source="share-button.png" WidthRequest="50" 
               VerticalOptions="End" Margin="0, 0, 0, 20">
        </Image>

    </StackLayout>

   </RelativeLayout>

但是，由于 VerticalOptions="End" 属性，该共享按钮应该位于页面底部。我该如何解决这个问题？

【问题讨论】：

标签： c# xaml xamarin xamarin.forms

【解决方案1】：

AbsoluteLayout 出于性能原因更好。另外，您询问的是AbsoluteLayout，但在您共享的代码中使用了RelativeLayout。

无论如何，您需要将最后一张图像的VerticalOptions 设为VerticalOptions="EndAndExpand"，这将扩大区域以填充可用空间，然后将图像放置在该区域的垂直端。

基本上Start、Center、End 和Fill 布局选项表示将元素放置在可用空间的什么位置或是否放大元素以填充可用空间，其中StartAndExpand, CenterAndExpand、EndAndExpand 和 FillAndExpand 将尽可能扩大可用空间，然后将该空间中的项目设置为 Start、Center 等。AndExpand 选项仅适用于 @ 987654338@

如果您想改用 AbsoluteLayout (recommended by the Forms engineering team)，请查看以下代码：

<AbsoluteLayout>

    <Image Source="Background.jpg" Aspect="AspectFill" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" />

    <StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">

        <Label Text="Timetable" TextColor="Silver" HorizontalOptions="EndAndExpand" Margin="0, 10, 20, 0">
        </Label>

        <Image Margin="15, 20" HorizontalOptions="Center" WidthRequest="350" Source="subtle-logo.png"></Image>

        <Image HorizontalOptions="Center" x:Name="PlayPauseButton" Source="play.png" WidthRequest="75">
        </Image>

        <Image HorizontalOptions="Center" x:Name="shareButton" Source="share-button.png" WidthRequest="50" 
               VerticalOptions="EndAndExpand" Margin="0, 0, 0, 20">
        </Image>

    </StackLayout>

</AbsoluteLayout>

【讨论】：