uwp UniformGrid has unwanted vertical spacing between rows

Question

I have multiple textboxes which I want fill in a proper flow from left to right in fixed 2 columns, because there is runtime logic in code behind where any of the textboxes visibility can be changed so I want all visible boxes at any given time to be aligned properly so that is why I am using UniformGrid from community toolkit, but there is some Unwanted vertical spacing between all the rows.

sample project to reproduce the issue : https://github.com/touseefbsb/UniformGridIssue

sample code

<Grid>
    <controls:UniformGrid
        x:Name="CommonPanel"
        Background="Brown"
        Columns="2"
        Orientation="Horizontal">
        <TextBox Height="112" HorizontalAlignment="Stretch" />
        <TextBox Height="112" HorizontalAlignment="Stretch" />
        <TextBox Height="112" HorizontalAlignment="Stretch" />
        <TextBox Height="112" HorizontalAlignment="Stretch" />
        <TextBox Height="112" HorizontalAlignment="Stretch" />
        <TextBox Height="112" HorizontalAlignment="Stretch" />
        <TextBox Height="112" HorizontalAlignment="Stretch" />
        <TextBox Height="112" HorizontalAlignment="Stretch" />
        <TextBox Height="112" HorizontalAlignment="Stretch" />
        <TextBox Height="112" HorizontalAlignment="Stretch" />
        <TextBox Height="112" HorizontalAlignment="Stretch" />
    </controls:UniformGrid>
</Grid>

There seems to be some sort of margin about 27 both up and down of each item, I am not sure where it is coming from though.

Update 1

this was a sample project,my original project has each textbox with 112 height and some have double that and we also might generate some of them dynamically so I guess I might need to separate the big height textboxes but is there a way I can set same height for all rows? Considering I won't know exact number of rows?

I tried following but it gave me 112 height just for 1st row.

Answer 1

There are two components at play, the space between the TextBoxes (the 27px) and the border.

If you select in any of those TextBoxes, you'll see the border color changes to Blue. If you hover over them, you'll see the visual state of those same borders change.

To remove it, set BorderThickness to 0:

<TextBox Height="112"
         HorizontalAlignment="Stretch"
         BorderThickness="0"/>

Or make this easier for yourself and create an Implicit TextBox Style:

<controls:UniformGrid x:Name="CommonPanel"
                      Background="Brown"
                      Columns="2"
                      Orientation="Horizontal">
    <controls:UniformGrid.Resources>
        <Style TargetType="TextBox">
            <Setter Property="Height"
                    Value="112" />
            <Setter Property="HorizontalAlignment"
                    Value="Stretch" />
            <Setter Property="BorderThickness"
                    Value="0" />
        </Style>
    </controls:UniformGrid.Resources>
    <TextBox />
    <TextBox />
    <TextBox />
    <TextBox />
    <TextBox />
    <TextBox />
    <TextBox />
    <TextBox />
    <TextBox />
    <TextBox />
    <TextBox />
</controls:UniformGrid>

Now, let's discuss the remaining pixel padding. You've hard coded the Height of the TextBox, this restricts how much it can fill the space. To remove that padding, take it out of the style:

<Style TargetType="TextBox">
     <Setter Property="HorizontalAlignment" Value="Stretch" />
     <Setter Property="VerticalAlignment" Value="Stretch" />
     <Setter Property="BorderThickness" Value="0" />
</Style>

Understanding Layout

I wanted to add some addition information in case you're trying to force the rows to fit into 112 pixels.

You can think of the UniformGrid as manually adding RowDefinition and ColumnDefinition yourself.

<Grid>
    <Grid.RowDefinitions>
        <!-- One of these is created for every row needed  -->
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <!-- One of these is created for every column needed  -->
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
</Grid>

Since you have 11 children in the UniformGrid and set the columns 2, it is virtually identical to this:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <TextBox Grid.Row="0" 
             Grid.Column="0"/>
    <TextBox Grid.Row="0"
             Grid.Column="1" />
    <TextBox Grid.Row="1"
             Grid.Column="0" />
    <TextBox Grid.Row="1"
             Grid.Column="1" />
    <TextBox Grid.Row="2"
             Grid.Column="0" />
    <TextBox Grid.Row="2"
             Grid.Column="1" />
    <TextBox Grid.Row="3"
             Grid.Column="0" />
    <TextBox Grid.Row="3"
             Grid.Column="1" />
    <TextBox Grid.Row="4"
             Grid.Column="1" />
    <TextBox Grid.Row="5"
             Grid.Column="0" />
    <TextBox Grid.Row="5"
             Grid.Column="1" />
</Grid>

UPDATE

You can override the sizing of the UniformGrid RowDefinitions dynamically after it has loaded. This will let the row height shrink to the 112 pixels that the TextBoxes are using.

XAML - Subscribe to the Loaded event

<controls:UniformGrid x:Name="CommonPanel" Loaded="CommonPanel_Loaded" .../>
``

```csharp
// Will fire when the UniformGrid is loaded
private void CommonPanel_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
    // Iterate over all the RowDefinitions
    for (int i = 0; i < CommonPanel.RowDefinitions.Count - 1; i++)
    {
        // FEATURE - Here you override the Star-Height with Auto height
        CommonPanel.RowDefinitions[i].Height = GridLength.Auto;
    }
}

Finally, there is one last step to make sure the last row's TextBoxes are aligned correctly. Set the style's VerticalAlignment to Top:

<Style TargetType="TextBox">
    <Setter Property="Height"
            Value="112" />
    <Setter Property="HorizontalAlignment"
            Value="Stretch" />
    <Setter Property="VerticalAlignment"
            Value="Top" />
    <Setter Property="BorderThickness"
            Value="0" />
</Style>

Important If you are adding new items to the UniformGrid at runtime, you will need to re-run that logic again.