Xamarin forms page layout with relative layout and background image - xaml

Question

I am new to Xamarin forms and Xaml, trying to design a page layout with a background image, I found out that using Relative layout, I can get the image expand to whole screen using aspect property. However, When I put a grid or layout after the image inside RelativeLayout, It does not expand to whole area, It only covers the given content.
I have tried to achieve this using relative layout. I am using an Image tag with aspect property and then my stacklayout on top of image.
<RelativeLayout>
<Image Aspect="AspectFill" Source="c1.jpg" />
<StackLayout>
<Button Text="Meha" TextColor="White"/>
</StackLayout>
</RelativeLayout>
I want the button to cover whole width and align it vertically center.

Answer 1

This is how i normally solve this situation:
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="White">
<Image Source="c1.jpg" Aspect="AspectFill" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="Center">
<Button Text="Meha" TextColor="Black" HorizontalOptions="FillAndExpand"/>
</StackLayout>
</Grid>

Answer 2

Another way you can try is to use a grid strategy instead of a relative layout. like this example of a welcome page that i use in my app with a bg image:
<Grid
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<!---BG IMAGE -->
<Image
Source="yourimage"
Aspect="AspectFill"
Opacity="0.5"
/>
<Grid>
<Grid.RowDefinitions>
<RowDefinition
Height="Auto"/>
<RowDefinition
Height="Auto"/>
<RowDefinition
Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="*" />
<ColumnDefinition
Width="100" />
<ColumnDefinition
Width="*" />
</Grid.ColumnDefinitions>
<!--TEXT-->
<StackLayout
Grid.Row="1"
Grid.ColumnSpan="3"
Spacing="10"
Orientation="Vertical"
VerticalOptions="Center"
TranslationY="-20"
Padding="20">
<Label
LineBreakMode="WordWrap"
Text="Welcome!"
TextColor="White"
VerticalTextAlignment="Center"
FontAttributes="Bold"
>
<Label.FontSize>
<OnIdiom
x:TypeArguments="x:Double"
Phone="26"
Tablet="36" />
</Label.FontSize>
</Label>
<Setter
Property="HeightRequest"
Value="4" />
<Setter
Property="VerticalOptions"
Value="End" />
<Setter
Property="WidthRequest"
Value="40" />
<Setter
Property="BackgroundColor"
Value="{ DynamicResource AccentColor }"
<!-- ACCENT LINE -->
<BoxView VerticalOptions= "End"
HeightRequest = "4"
BackgroundColor="Green" />
</StackLayout>
</Grid>
</Grid>