How to Center an image in each column inside one row in Xamarin forms? - xamarin

Question

I know I have already asked this question here: How to Center an image in each column inside one row in Xamarin?, but I didnt have access to an actual device that time, so I just run the emulator and it looks like this:
But now that I have a phone to run it, the page now looks like this:
This is my code for this page:
<StackLayout>
<RelativeLayout>
<Grid Margin="0,10,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="5*"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" HorizontalOptions="CenterAndExpand">
<Image x:Name="ImgSrcMale"
HeightRequest="165"
Source="male"
WidthRequest="200"
Aspect="AspectFit"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand">
<Image.GestureRecognizers>
<TapGestureRecognizer x:Name="MaleClick"
NumberOfTapsRequired="1"
Tapped="MaleClick_Tapped"/>
</Image.GestureRecognizers>
</Image>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="1" HorizontalOptions="CenterAndExpand">
<Image Source="female1"
WidthRequest ="200"
HeightRequest="165"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
Aspect="AspectFit"
x:Name="ImgSrcFemale">
<Image.GestureRecognizers>
<TapGestureRecognizer x:Name="FemaleClick"
NumberOfTapsRequired="1"
Tapped="FemaleClick_Tapped"/>
</Image.GestureRecognizers>
</Image>
</StackLayout>
</Grid>
<Grid Margin="0,178,0,0">
<ScrollView>
<StackLayout>
<Grid VerticalOptions="CenterAndExpand" Margin="20,0,20,0" RowSpacing="20">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Text="Gender"
FontSize="Title"
TextColor="WhiteSmoke"
HorizontalOptions="Center"
FontAttributes = "Bold"
Grid.Row="0"/>
<local:RoundedEntry x:Name="EntryUsername"
Placeholder="Username"
TextColor="WhiteSmoke"
PlaceholderColor="WhiteSmoke"
Grid.Row="1"/>
<local:RoundedEntry x:Name="EntryPassword"
Placeholder="Password"
IsPassword="True"
TextColor="WhiteSmoke"
PlaceholderColor="WhiteSmoke"
Grid.Row="2"/>
<local:RoundedEntry x:Name="EntryEmail"
Placeholder="Email"
Keyboard="Email"
TextColor="WhiteSmoke"
PlaceholderColor="WhiteSmoke"
Grid.Row="3"/>
<Button Text="Sign Up"
HorizontalOptions="CenterAndExpand"
TextColor="WhiteSmoke"
BackgroundColor="Coral"
WidthRequest="150"
Clicked="Button_Clicked"
CornerRadius="25"
FontAttributes = "Bold"
FontSize = "Large"
Grid.Row="4"/>
<Label x:Name="GenderLabel"
Text=""
TextColor="WhiteSmoke"
IsVisible="False"/>
</Grid>
</StackLayout>
</ScrollView>
</Grid>
</RelativeLayout>
</StackLayout>

Answer 1

You could easily create this layout with one grid. Remove the top-level StackLayout and RelativeLayout. You may want to put the whole grid inside a scrollview to allow the screen to move up with the keyboard.
I'd recommend a grid with two columns and six rows (the controls at the bottom will span both columns. Define the columns with width * (not sure why you had 5*). You don't need to wrap the images in anything, just place them in the grid directly.