Layout background image in Xamarin.Forms

Question

I need block with fixed height (e.g. 200) with background image, which should AspectFill this block and StackLayout with unknown height at the bottom of this block.

I tried to use RelativeLayout and put Image and StackLayout in it. Image placed perfectly, but I don't know how to place StackLayout at the bottom.

This layout containes two Labels, so I can't hard-code it's HeightConstrait and YConstrait to constant, becouse it text may have different height on different platforms and screen sizes (or, maybe, this is wrong?)

How can I do this?

Possible duplicate of [Xamarin forms relative layout position stacklayout at bottom](http://stackoverflow.com/questions/42919941/xamarin-forms-relative-layout-position-stacklayout-at-bottom) — Tim Klingeleers, May 07 '17 at 20:00

score 6 · Accepted Answer · answered May 07 '17 at 21:04

An Alternative I've used to the relative layout method:

This basically uses an image and a stack layout which overlap each other and filling available space. The inner stack layout is then able to expand from the end. If you want to create a "max" amount to expand upwards (eg max 50% of image), you can change the outer layout to "layoutBounds 1,1,1,.5"

The code below uses background colours so you can easily see it if copied. Plenty of options for modification eg using background images and items other than the stacklayout, eg frame.

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

score 2 · Answer 2 · answered May 08 '17 at 02:06

An alternative way is with a Grid.

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

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

While you can choose from AbsoluteLayout or a Grid, I would recommend steering clear of the RelativeLayout. It is one of the more inefficient layouts.

Layout background image in Xamarin.Forms

2 Answers2