[FIXED] How can an image within a grid in xamarin.forms be centered


I’m developing a Xamarin. Form mobile apps and trying to center and image above 2 buttons, how can I center and image in a grid XAML tag, see XAML code below in which I’m using, and having difficulty place it in the center of the mobile app screen.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"


        <Grid HorizontalOptions="CenterAndExpand" >
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>

            <StackLayout Padding="10" HorizontalOptions="Center" VerticalOptions="Center" >
                <Image Grid.Row="0" Grid.Column="0" Source="RegisterUser" WidthRequest="100" HeightRequest="81"  HorizontalOptions="Center" VerticalOptions="Center"  />

            <Button  Text="Sign-In" VerticalOptions="CenterAndExpand" HorizontalOptions="Center"  TextColor="White"                              
                    Grid.Row="2" Grid.Column="0"
                    BorderRadius="4" BorderWidth="1" 
                    BackgroundColor="LightGray" />
            <Button Text="Register"  TextColor="White" 
                  Grid.Row="2" Grid.Column="1"
                    BorderRadius="4" BorderWidth="1" 
                    BackgroundColor="LightGray"   />



your grid has 2 cols, so your StackLayout needs to span them in order to be centered across the entire grid

<StackLayout Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Padding="10" HorizontalOptions="Center" VerticalOptions="Center" >
  <Image Source="RegisterUser" WidthRequest="100" HeightRequest="81" HorizontalOptions="Center" VerticalOptions="Center"  />

Answered By – Jason

Answer Checked By – Willingham (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published