how to fill image on stacklayout xamarin forms pcl

Question

how can I put an image that adapts itself as the background of an object stackLayout?

<ContentPage.Content>
<Grid>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"></ColumnDefinition>
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition Height="1*"></RowDefinition>
    <RowDefinition Height="1*"></RowDefinition>
  </Grid.RowDefinitions>
  <StackLayout BackgroundColor="#FF1100" Grid.Row="0" Grid.Column="0" VerticalOptions="Fill" HorizontalOptions="Fill">
    <Image Aspect="Fill" x:Name="backgroundImage"
          RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
          RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}"/>
  </StackLayout>
  <StackLayout BackgroundColor="#FF7700" Grid.Row="1" Grid.Column="0" VerticalOptions="Fill" HorizontalOptions="Fill">
    <!--<Image Aspect="Fill" x:Name="backgroundImage"
          RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
          RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}"/>-->
  </StackLayout>
</Grid>

Answer 1

I think your best bet is to use a RelativeLayout and then add an Image and a StackLayout. Add the image first so it is in the background, e.g.:

<RelativeLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="Silver">
    <Image 
        Source="MyImage.png"
        Aspect="Fill" <!-- Stretches the image to fill, use AspectFill instead of Fill to enlarge the image without stretching the image -->
        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
        RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}"
        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}" 
        />
    <StackLayout
        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
        RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}"
        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}" >
        <Label
            Text="Image Stack Layout in Relative Layout"
            TextColor="Lime" />
        <Button 
            Text="I'm a button" 
            TextColor="Lime" />
    </StackLayout>
</RelativeLayout>

Answer 2

If you want to put an image that adapts itself as the background of an object StackLayout you can use the Grid control following these instructions:

• Put the elements inside the Grid
• Don't specify Grid.Row or Grid.Column to any element inside the Grid

Result: The elements within the Grid will overlap.

I use the code below for this case:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Your.Class">
    <StackLayout>
        <Grid VerticalOptions="FillAndExpand">
            <Image Source="your_image.png" Aspect="AspectFit" />
            <StackLayout Padding="20">
                <Label Text="All your page content here :)" />
            </StackLayout>
        </Grid>
    </StackLayout>
</ContentPage>