xamarin forms remove spacing between grid.rows not working

Question

In my Xamarin.Forms project I have a grid with 2 rows and 3 columns. In row1 I have a label, in row2 I have a stackpanel vertical. There seems to be a huge space between the label and the stackpanel, how do I remove this spacer?

I have tried using rowspacing=0 but it is not working. any ideas?

if I remove the stackpanel and just use labels in different rows the space gets removed... but I want to keep the stackpanel

this is the code...

<Grid Grid.Row="1" Grid.Column="0" RowSpacing="0"
      Margin="5"
      BackgroundColor="{StaticResource backgroundColorWhite}">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Label Grid.Row="0" Grid.Column="0" HorizontalOptions="Start"
           Margin="5,5,0,0"
           Text="{Binding MyUserSelections.SelectedClientName}" 
           TextColor="{StaticResource textColorBlack}"
           FontSize="16"
           FontAttributes="Bold"/>

    <StackLayout Grid.Row="1" Grid.Column="0" 
                 Orientation="Vertical" 
                 Padding="0" 
                 Margin="5,0,0,5"
                 Spacing="0">
        <... elements .../>
    </StackLayout>

    <StackLayout Grid.Row="1" Grid.Column="1" 
                 Padding="0" 
                 Margin="0,0,0,5"
                 Spacing="0" 
                 Orientation="Vertical" 
                 HorizontalOptions="CenterAndExpand" >
        <... elements .../>
    </StackLayout>

    <StackLayout Grid.Row="1" Grid.Column="2" 
                 Padding="0" 
                 Margin="0,0,5,0"
                 Spacing="0" 
                 Orientation="Vertical" 
                 HorizontalOptions="End" >
        <... elements .../>
    </StackLayout>
</Grid>

Exquisite

ive added the code... trying to get a screenshot – Exquisite

found the issue... it was because I was defining both rows *... should have made size auto – Exquisite

Good you've noticed! I was already writing it. Posted to further references. =) – Stypsis

Answer 1

Hard to say without the code:

The problem is that you have specified the same row height. That is why you have a big gap. Change the Height values, they are the problem.

<Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

Read the documentation: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/grid#Rows_and_Columns

I hope this helps!

Helladic

thanks for the doc... found the issue... it was because I was defining both rows *... should have made size auto. thanks!!!! – Exquisite

Answer 2

You are setting both row definitions to *. It means each one will take a half of available space of the content. You should set the first on to Auto in order to use only the space needed to show the row content. The rest of space would be occupied by the second row.

I think you'll like to set Grid.ColumnSpan="3" to the first element too. It'll give more horizontal space to it.

Like this:

<Grid Grid.Row="1" Grid.Column="0" 
      RowSpacing="0"
      Margin="5"
      BackgroundColor="{StaticResource backgroundColorWhite}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" 
           HorizontalOptions="Start"
           Margin="5,5,0,0"
           Text="{Binding MyUserSelections.SelectedClientName}" 
           TextColor="{StaticResource textColorBlack}"
           FontSize="16"
           FontAttributes="Bold"/>

    (...)

</Grid>

Stypsis