xamarin.forms XAML CODE TO MINIMIZE DISTANCE BETWEEN Label and button

Question

I am developing a xamarin.forms app and here as shown in the images I am getting wide vertical spacing between label field and buttons, so I need to decrease them and align them in proper order, here is the XAML code so please suggest me what changes do I need to make?

<ScrollView>
            <StackLayout Padding="5">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width=".3*"></ColumnDefinition>
                        <ColumnDefinition Width=".5*"></ColumnDefinition>
                        <ColumnDefinition Width=".2*"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                      <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                    </Grid.RowDefinitions>
                    >

                    <Label Text="Name" Grid.Column="0" Grid.Row="4" Style=" 
             {DynamicResource SizedLabel}" TextColor="Black" 
      VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" 
         HorizontalTextAlignment="Start"/>
                    <Entry x:Name="name" Grid.Column="1" Grid.Row="4" 
   Placeholder="" WidthRequest="100" FontAttributes="None" FontSize="Small" 
   BackgroundColor="Transparent" VerticalOptions="CenterAndExpand" 
     HorizontalOptions="FillAndExpand"></Entry>


                    <Label x:Name="qty_lbl" Text=" Quantity" 
   Grid.Column="0" Grid.Row="5" Style="{DynamicResource SizedLabel}" 
   TextColor="Black" VerticalOptions="CenterAndExpand" 
   HorizontalOptions="StartAndExpand" HorizontalTextAlignment="Start"/>


                    **<Entry x:Name="quantity" Grid.Column="1" Grid.Row="6" 
       Keyboard="Numeric" Placeholder="" WidthRequest="100" 
     FontAttributes="None" FontSize="Small" BackgroundColor="Transparent" 
        VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand"> 
          </Entry>

                </Grid>

                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width=".1*"></ColumnDefinition>
                        <ColumnDefinition Width=".1*"></ColumnDefinition>
                        <ColumnDefinition Width=".1*"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition></RowDefinition>
                    </Grid.RowDefinitions>
                    <Button x:Name="save_btn" BackgroundColor="DodgerBlue" 
        Grid.Column="0" Grid.Row="1" TextColor="White" Text="Next/Save" 
     Clicked="OnSave" BorderColor="Black"/>
                    <Button x:Name="cancel_btn" BackgroundColor="DodgerBlue" 
   Grid.Column="1" Grid.Row="1" TextColor="White" Text="Cancel" 
         Clicked="OnCancel" BorderColor="Black"/>
                    <Button x:Name="close_btn" BackgroundColor="DodgerBlue" 
   Grid.Column="2" Grid.Row="1" TextColor="White" Text="Close" 
      Clicked="OnClose" BorderColor="Black"/>
                </Grid>**

                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition></RowDefinition>
                    </Grid.RowDefinitions>
                    <StackLayout Orientation="Horizontal" HeightRequest="40" 
        HorizontalOptions="FillAndExpand" Grid.Column="0" Grid.Row="0" 
       BackgroundColor="LightGray">
                        <Label x:Name="count_label"  Text="" Style=" 
           {DynamicResource SizedLabel}" TextColor="Gray" 
     HorizontalTextAlignment="Start" VerticalOptions="CenterAndExpand" 
             HorizontalOptions="FillAndExpand"></Label>
                    </StackLayout>
                </Grid>
            </StackLayout>

    </ScrollView>
    </StackLayout>

To make the buttons move up what changes do I need to make? thanks

Answer 1

The problem lays in the use you make of the Grid.Row attached property. In the first grid, you define 2 rows but, then, you assign to some of its children controls the property Grid.Row to 4, 5 and 6. This implicitly force the creation of additional rows, and you end up with a grid with 7 rows (because of course rows are 0 based). When the rows aren't given an explicit height, they are given "*", which means "equally proportional", that is, all of the same size. That's alone create a lot of extra space.

Also, in the second Grid, the one with the buttons, you define it with only one row, but assign Grid.Row = "1" to all the three buttons, this way forcing the creation of a second row. Again, because you don't specify an height, the newly created row has the same size of the row containing the buttons.

To fix all this you have to:

• Assign Grid.Row = "0" to the first Label and the first Entry.
• Assign Grid.Row="1" to the second Label and the second Entry.
• Assign Grid.Row="0" to all the three buttons.

If you instead want the labels to appear over the relative entry, then assign Grid.Row = "0" to the first Label, Grid.Row = "1" to the first Entry, Grid.Row = "2" to the second Label and Grid.Row = "3" to the second Entry. Also, for clarity, define four Rows in the Grid, with Height="Auto" or Height="*" .

To make your code more concise, please note:

• 0 is the default for both Grid.Row and Grid.Column, so you can get rid of such assignments;
• You don't have to define a Grid.RowDefinitions property if your Grid has only one row. The same, you don't have to define a Grid.ColumnDefinitions property if your Grid has only one column.
• There is no use in using decimal notation when expressing height or width with "*" values. Star values indicate a proportion between rows (or columns), so for example if a row is "2*" and a second row is "*", the first row will be twice as tall than the second. The sum of the stars assigned to the rows (or the columns) can be any number, because it has no particular meaning, what is important is only the relative proportions between rows (or columns). To clarify even more, in the example made before, you could have assigned "100*" to the first row and "50* to the second: the result would have been the same.