How to Fill Stacklayout with Image

Question

I want to have a background image like the following for the header section of my navigation panel

I currently have an image to display the profile picture in a StackLayout. Instead of setting the BackgroundColor property to the StackLayout tag how can I add a background image?

<StackLayout>
     <Image Source="profile.png" WidthRequest="75" HeightRequest="75" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
</Stacklayout>

Answer 1

You'll need to switch from Stacklayout to a something that allows it's views to overlap, like a Grid or Absolute layout.

To use a grid, simply put your image and your content in the same row:

<Grid>
    <Image Grid.Row="0"
           Aspect="AspectFill"
           Source="airplane" />
    <Label Grid.Row="0"
           FontAttributes="Bold"
           FontSize="Large"
           HorizontalOptions="Center"
           Text="Welcome to Xamarin.Forms!"
           VerticalOptions="CenterAndExpand" />
</Grid>

Result:

: