Background Image for grid in xamarin.forms

Question

I am trying to set a background image for my entire grid, not just for a single row/column. Setting BackgroundImage= "image.jpg" works on android but on iOS it appears stretched. I've attached a screenshot from the android side to be more clear of how it should be.

Code

<?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="LoyaltyWorx.GridMenu"
             Title="Main Menu"
             >

    <Grid>
        <Image Source="grid.jpg"></Image>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="2*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="2*" />
        </Grid.ColumnDefinitions>
        <Label Text="Cards" TextColor="White" FontAttributes="Bold" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="0" Grid.Column="0" BackgroundColor="#1481BA"  Opacity="0.5" x:Name="CardTile"/>
        <Label Text="Transactions" TextColor="Black" FontAttributes="Bold" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="0" Grid.Column="1" BackgroundColor="#ede890" Opacity="0.5" x:Name="TransactionTile"/>
        <Label Text="Promotions" TextColor="White" FontSize="30" FontAttributes="Bold" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="1" Grid.Column="0" BackgroundColor="#1481BA" Grid.ColumnSpan="2" Opacity="0.7" x:Name="PromoTile"/>
        <Label Text="Settings" TextColor="Black" FontAttributes="Bold" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="2" Grid.Column="0" BackgroundColor="#ede890" Opacity="0.5" x:Name="SettingsTile" />
        <Label Text="My Profile" TextColor="White" FontAttributes="Bold" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="2" Grid.Column="1" BackgroundColor="#1481BA" Opacity="0.7" x:Name="ProfileTile"/>

    </Grid>

</ContentPage>

As you can see in the above code I've tried to add but all this does is include the image on the "Cards" block. How can I set it behind the entire grid?

Answer 1

You have several options here.

The Image within the Grid

The first option is very close to what you tried: Placing the background image in the Grid.

Please note that XAML is declarative and not sequential. Just because you've placed the Grid.RowDefinitions and the Grid.ColumnDefinitions after the Image this does not mean that they don't apply to it.

You will still have to set Grid.RowSpan="3" and Grid.ColumnSpan="2" in the Image tag.

This will work as long as there is no Padding in the Grid. If you define the Grid with a Padding greater zero the Image will not stretch to the whole parent view, but only the region within the padding. This leads us to the second option: Absolute layout.

Using an AbsoluteLayout

With an AbsoluteLayout (see the docs here) you are (to some extent) a bit more flexible (but it comes with its own quirks). Basically you are wrapping the Grid in an AbsoluteLayout and place the Image behind the Grid.

<?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="LoyaltyWorx.GridMenu"
             Title="Main Menu">
    <AbsoluteLayout>
        <Image AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" Source="grid.jpg" />
        <Grid AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" BackgroundColor="Transparent" >
            <!-- Elided -->
        </Grid>
    </AbsoluteLayout>
</ContentPage>