Как центрировать изображение в каждом столбце внутри одной строки в формах Xamarin?

Question

Я знаю, что уже задавал этот вопрос здесь: Как центрировать изображение в каждом столбце внутри одной строки в Xamarin? , но у меня не было доступа к реальному устройству в этот раз, поэтому я просто запускаю эмулятор, и он выглядит так:

Но теперь, когда у меня есть телефон для его запуска, страница теперь выглядит так:

Это мой код для этой страницы:

<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

Вы можете легко создать этот макет с одной сеткой. Удалите StackLayout верхнего уровня и RelativeLayout. Возможно, вы захотите поместить всю сетку в представление прокрутки, чтобы позволить экрану двигаться вверх с помощью клавиатуры.

Я бы порекомендовал сетку с двумя столбцами и шестью строками (элементы управления внизу будут охватывать оба столбца. Определите столбцы с шириной * (не знаю, почему у вас было 5 *). Вам не нужно чтобы обернуть изображения во что-нибудь, просто поместите их непосредственно в сетку.