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

Question

I have this code:

             <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>

It looks centered in my designer, but when I run the code in my emulator it does not look centered. This is mostly the answers that I have found when I was searching on how to do it. I dont know If I have missed a certain property.

I am still new in Xamarin and I am still learning on how this works.

Answer 1

If you want to center the image, you could try the code below. Delete padding, TranslationX, TranslationY, add a column, and use the CenterAndExpand for layoutoptions. For better understanding, I use the backgroundcolor of stacklayout to show the results. You could change the ColumnDefinition to Auto, it works as well.

<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>