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

Question

У меня есть этот код:

             <Grid Margin="0,0,0,0" VerticalOptions="CenterAndExpand">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>

                    <!-- EACH IMAGE SHOULD BE CENTERED IN THE GRID 0 AND ROW 0-->
                    <StackLayout Grid.Row="0" Grid.Column="0" Padding="0,18,0,0">
                        <Image Source="male"
                               WidthRequest ="200"
                               HeightRequest="165"
                               TranslationX="5"
                               TranslationY="10"
                               HorizontalOptions="LayoutOptions.Center"
                               VerticalOptions="LayoutOptions.Fill"
                               Aspect="AspectFit"/>
                    </StackLayout>

                    <StackLayout Grid.Row="0" Grid.Column="1" Padding="0,15,0,0">
                        <Image Source="female"                                
                               WidthRequest ="160"
                               HeightRequest="125"
                               TranslationX="5"
                               TranslationY="31"
                               HorizontalOptions="LayoutOptions.Center"
                               VerticalOptions="LayoutOptions.Fill"
                               Aspect="AspectFit"/>
                    </StackLayout>
                </Grid>

Он выглядит по центру в моем конструкторе, но когда я запускаю код в моем эмуляторе, он не выглядит по центру. В основном это ответы, которые я нашел, когда искал, как это сделать. Я не знаю, пропустил ли я какую-то собственность.

Я все еще новичок в Xamarin и все еще учусь тому, как это работает.

Answer 1

Если вы хотите центрировать изображение, вы можете попробовать код ниже. Удалите padding, TranslationX, TranslationY, добавьте столбец и используйте CenterAndExpand для layoutoptions. Для лучшего понимания я использую backgroundcolor из stacklayout, чтобы показать результаты. Вы можете изменить ColumnDefinition на Auto, это также работает.

<Grid Margin="0,0,0,0" VerticalOptions="CenterAndExpand">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="5*" />
        <ColumnDefinition Width="5*" />
    </Grid.ColumnDefinitions>

    <!--  EACH IMAGE SHOULD BE CENTERED IN THE GRID 0 AND ROW 0  -->
    <StackLayout
        Grid.Row="0"
        Grid.Column="0"
        BackgroundColor="Accent">
        <Image
            Aspect="AspectFit"
            HeightRequest="165"
            HorizontalOptions="CenterAndExpand"
            Source="dog.jpg"
            VerticalOptions="CenterAndExpand"
            WidthRequest="200" />
    </StackLayout>
    <StackLayout
        Grid.Row="0"
        Grid.Column="1"
        BackgroundColor="Accent">
        <Image
            Aspect="AspectFit"
            HeightRequest="125"
            HorizontalOptions="CenterAndExpand"
            Source="pig.jpg"
            VerticalOptions="CenterAndExpand"
            WidthRequest="160" />
    </StackLayout>
  </Grid>