Xamarin.Forms 中的布局背景图像答案

【问题标题】：Layout background image in Xamarin.FormsXamarin.Forms 中的布局背景图像
【发布时间】：2017-10-05 17:14:53
【问题描述】：

我需要具有固定高度（例如 200）和背景图像的块，它应该 AspectFill 这个块和 StackLayout 这个块底部的高度未知。

我尝试使用RelativeLayout 并将Image 和StackLayout 放入其中。图像放置完美，但我不知道如何将StackLayout 放在底部。

这个布局包含两个Labels，所以我不能将它的HeightConstrait和YConstrait硬编码为常量，因为它的文本在不同的平台和屏幕尺寸上可能有不同的高度（或者，也许，这是错了吗？）

我该怎么做？

【问题讨论】：

Xamarin forms relative layout position stacklayout at bottom的可能重复

标签： android xaml xamarin xamarin.forms

【解决方案1】：

我已经习惯了相对布局方法的另一种选择：

这基本上使用相互重叠并填充可用空间的图像和堆栈布局。然后内部堆栈布局能够从末端扩展。如果你想创建一个向上扩展的“最大”量（例如最大图像的 50%），你可以将外部布局更改为“layoutBounds 1,1,1,.5”

下面的代码使用背景颜色，因此如果复制，您可以很容易地看到它。大量的修改选项，例如使用背景图像和堆栈布局以外的项目，例如框架。

<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
    <Image BackgroundColor="Red" AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All" Aspect="AspectFill"></Image>
    <StackLayout AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All" BackgroundColor="Transparent">
        <StackLayout BackgroundColor="Blue" HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand" Orientation="Vertical">
            <Label Text="Label 1"></Label>
            <Label Text="Label 2"></Label>
        </StackLayout>
    </StackLayout>
</AbsoluteLayout>

【讨论】：

【解决方案2】：

另一种方法是使用网格。

<Grid>
    <Image Source="..." />
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <StackLayout Grid.Row="1">    
        </StackLayout>
    </Grid>
</Grid>

虽然您可以从 AbsoluteLayout 或 Grid 中进行选择，但我建议您避开 RelativeLayout。它是效率较低的布局之一。

【讨论】：