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

有两个组件在起作用，TextBoxes（27px）和边框之间的空间。

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

要删除它，请将 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 的高度，这限制了它可以填充多少空间。要删除该填充，请将其从样式中删除：

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

更新

您可以在加载后动态覆盖UniformGrid RowDefinitions 的大小。这将使行高缩小到 TextBoxes 正在使用的 112 像素。

XAML - 订阅 Loaded 事件

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

最后，还有最后一步来确保最后一行的文本框正确对齐。将样式的 VerticalAlignment 设置为 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>

重要 如果您在运行时向 UniformGrid 添加新项目，则需要再次重新运行该逻辑。