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，有些文本框的高度是原来的两倍，我们也可能会动态生成其中一些文本框，所以我想我可能需要将大高度的文本框分开，但是有没有我可以为所有行设置相同的高度吗？考虑到我不知道确切的行数？

我试过跟随，但它给了我第 1 行 112 的高度。

Answer 1

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

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

要删除它，请将 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 的高度进行了硬编码，这限制了它可以填充 space 的大小。要删除该填充，请将其从样式中删除：

<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 的大小。这将使行高缩小到文本框使用的 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 设置为顶部：

<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 添加新项目，您将需要再次重新运行该逻辑。

uwp UniformGrid 在行之间有不需要的垂直间距

uwp UniformGrid has unwanted vertical spacing between rows

grid

layout

xaml

uwp

windows-community-toolkit

了解布局

更新