uwp UniformGrid在行之间具有不必要的垂直间隔

Question

我有多个文本框，我希望在固定的2列中从左到右填充适当的流，因为代码中有运行时逻辑，可以更改任何文本框的可见性，因此我希望在任何给定时间所有可见的框正确对齐，所以这就是为什么我使用社区工具包中的UniformGrid，但是所有行之间都有一些不需要的垂直间距的原因。

示例项目重现该问题：https://github.com/touseefbsb/UniformGridIssue

示例代码

<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>

每个项目的上下[[27似乎都有某种余量，我不确定它来自哪里。

更新1

这是一个示例项目，我的原始项目的每个文本框的高度都为112，有些具有两倍的高度，我们也可能会动态生成其中的一部分，所以我想我可能需要分离大高度的文本框，但是有一种方法可以为所有行设置相同的高度？考虑到我不知道确切的行数？

我尝试跟随，但仅第一行就给我112高度。

Answer 1

有两个组件在起作用，文本框（27像素）和边框之间的空间。

如果您在这些文本框中选择任何一个，则会看到边框颜色变为蓝色。如果将鼠标悬停在它们上方，您将看到那些相同边框的视觉状态发生变化。

要删除它，请将BorderThickness设置为0：

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

或者让您自己更容易创建隐式文本框样式：
<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>

现在，让我们讨论剩余的像素填充。您已经硬编码了TextBox的Height，这限制了它可以填充空间的数量。要删除该填充，请删除其样式：
<Style TargetType="TextBox">
     <Setter Property="HorizontalAlignment" Value="Stretch" />
     <Setter Property="VerticalAlignment" Value="Stretch" />
     <Setter Property="BorderThickness" Value="0" />
</Style>

了解布局
我想添加一些附加信息，以防您试图强制将行调整为112像素。
您可以将UniformGrid视为自己手动添加RowDefinition和ColumnDefinition。
<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>

由于UniformGrid中有11个子级并设置了第2列，因此实际上与此相同：
<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>