I'm using RelativeLayout to create covering background image. I want to place other elements into StackLayout, so I have such code:
<RelativeLayout x:Name="MainLayout">
<Image Aspect="AspectFill" Source="Images/bg.png"
RelativeLayout.WidthConstraint=
"{ConstraintExpression Type=RelativeToParent, Property=Width}"
RelativeLayout.HeightConstraint=
"{ConstraintExpression Type=RelativeToParent, Property=Height}"/>
<StackLayout BackgroundColor="Gray" VerticalOptions="Center"
RelativeLayout.WidthConstraint=
"{ConstraintExpression Type=RelativeToParent, Property=Width}"
RelativeLayout.HeightConstraint=
"{ConstraintExpression Type=RelativeToParent, Property=Height}">
<Label XAlign="Center" TextColor="White" FontSize="18" BackgroundColor="Purple">La la la:</Label>
<Grid BackgroundColor="Black">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label BackgroundColor="Red" Grid.Row="0" Grid.Column="0">Red</Label>
<Label BackgroundColor="Yellow" Grid.Row="1" Grid.Column="0">Red</Label>
<Label BackgroundColor="Blue" Grid.Row="0" Grid.Column="1">Red</Label>
<Label BackgroundColor="Green" Grid.Row="1" Grid.Column="1">Red</Label>
</Grid>
</StackLayout>
</RelativeLayout>
In this situation Label and Grid are placed at the top of the screen. When I remove RelativeLayout and Image, it works ok, Label and Grid are placed at the middle. How to fix it?