Xamarin.Forms Grid with Images - Spacing doesn't work

Question

I want to implement a grid with images. In this case images are numbers and it looks like a Phone Dialer:

I want to achieve this (please do not pay attention to a red box..):

XAML Code looks like:

<ContentPage.Content>
    <ScrollView>
        <StackLayout x:Name="MainStackLayout"
                     Spacing="15"
                     Padding="{Binding MainStackSidePadding}">
            <Grid x:Name="pinGrid" 
                  HorizontalOptions="CenterAndExpand" 
                  VerticalOptions="CenterAndExpand" 
                  ColumnSpacing="2" 
                  RowSpacing="3">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Image x:Name="pinPad1" Source="pinPad01.png" HeightRequest="{Binding ButtonRadious}" WidthRequest="{Binding ButtonRadious}" Grid.Row="0" Grid.Column="0"/>

                <Image x:Name="pinPad2" Source="pinPad02.png" HeightRequest="{Binding ButtonRadious}" WidthRequest="{Binding ButtonRadious}" Grid.Row="0" Grid.Column="1" Aspect="AspectFit"/>

                <Image x:Name="pinPad3" Source="pinPad03.png" HeightRequest="{Binding ButtonRadious}" WidthRequest="{Binding ButtonRadious}" Grid.Row="0" Grid.Column="2" Aspect="AspectFit"/>

                <Image x:Name="pinPad4" Source="pinPad04.png" HeightRequest="{Binding ButtonRadious}" WidthRequest="{Binding ButtonRadious}" Grid.Row="1" Grid.Column="0"/>

                <Image x:Name="pinPad5" Source="pinPad05.png" HeightRequest="{Binding ButtonRadious}" WidthRequest="{Binding ButtonRadious}" Grid.Row="1" Grid.Column="1"/>

                <Image x:Name="pinPad6" Source="pinPad06.png" HeightRequest="{Binding ButtonRadious}" WidthRequest="{Binding ButtonRadious}" Grid.Row="1" Grid.Column="2" Aspect="AspectFit"/>

                <Image x:Name="pinPad7" Source="pinPad07.png" HeightRequest="{Binding ButtonRadious}" WidthRequest="{Binding ButtonRadious}" Grid.Row="2" Grid.Column="0"/>

                <Image x:Name="pinPad8" Source="pinPad08.png" HeightRequest="{Binding ButtonRadious}" WidthRequest="{Binding ButtonRadious}" Grid.Row="2" Grid.Column="1"/>

                <Image x:Name="pinPad9" Source="pinPad09.png" HeightRequest="{Binding ButtonRadious}" WidthRequest="{Binding ButtonRadious}" Grid.Row="2" Grid.Column="2"/>

                <Image x:Name="pinPad0" Source="pinPad00.png" HeightRequest="{Binding ButtonRadious}" WidthRequest="{Binding ButtonRadious}" Grid.Row="3" Grid.Column="1"/>

                <Image x:Name="pinPadBcksp" Source="pinPadbackspace.png" HeightRequest="{Binding ButtonRadious}" WidthRequest="{Binding ButtonRadious}" Grid.Row="3" Grid.Column="2"/>
            </Grid>
        </StackLayout>
    </ScrollView>
</ContentPage.Content>

It looks like RowSpacing and ColumnSpacing properties doesn't be implemented? I want to put some more spacing between rows (identically as spacing between columns)

Answer 1

It looks like RowSpacing and ColumnSpacing properties don't be implemented

Actually, it is implemented. I bet what's going on here is a misunderstanding of this concepts. I've taken your code (with some simplification) and printed out the screen it provides. It seemed pretty similar to what you want to achieve.

My simplified code is this:

<StackLayout x:Name="MainStackLayout"
             Spacing="15">
    <Grid x:Name="pinGrid" 
          HorizontalOptions="CenterAndExpand" 
          VerticalOptions="CenterAndExpand" 
          Margin="30,0"
          ColumnSpacing="20" 
          RowSpacing="20">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Image Source="Icon" Grid.Row="0" Grid.Column="0" Aspect="AspectFit"/>
        <Image Source="Icon" Grid.Row="0" Grid.Column="1" Aspect="AspectFit"/>
        <Image Source="Icon" Grid.Row="0" Grid.Column="2" Aspect="AspectFit"/>
        <Image Source="Icon" Grid.Row="1" Grid.Column="0" Aspect="AspectFit"/>
        <Image Source="Icon" Grid.Row="1" Grid.Column="1" Aspect="AspectFit"/>
        <Image Source="Icon" Grid.Row="1" Grid.Column="2" Aspect="AspectFit"/>
        <Image Source="Icon" Grid.Row="2" Grid.Column="0" Aspect="AspectFit"/>
        <Image Source="Icon" Grid.Row="2" Grid.Column="1" Aspect="AspectFit"/>
        <Image Source="Icon" Grid.Row="2" Grid.Column="2" Aspect="AspectFit"/>
        <Image Source="Icon" Grid.Row="3" Grid.Column="1" Aspect="AspectFill"/>
        <Image Source="Icon" Grid.Row="3" Grid.Column="2" Aspect="Fill"/>
    </Grid>
</StackLayout>

To show exactly what I mean, I changed the back color and highlight the layout bounds.

And here is the output. On the left, ColumnSpacing=2 and RowSpacing=3 , right: ColumnSpacing=20 and Grid 's Margin="30,0" :

Notice that the images I'm using almost haven't changed their dispositions. It' because of the Aspect="AspectFit" property, that make the image take the maximum size keeping its aspect, what doesn't occurs when you change it to Fill .

Unless it changes effectively the amount of space that will be used for the image it will not make big visual alterations, but it's working.

Using an Android device or emulator, you can switch on Show Layout Bounds on Developer Settings . It I'll make your job much easier when designing this kind of views.

Summarily: The spacing is working. It is set in dpi, so it can looks diffenrently on each device and the image itself will not suffer big changes using AspectFit .