UWP UniformGrid имеет нежелательный вертикальный интервал между строками

Question

У меня есть несколько текстовых полей, которые я хочу заполнить надлежащим потоком слева направо в фиксированных 2 столбцах, потому что в коде есть логики времени выполнения c, где видимость любого из текстовых полей может быть изменена, поэтому я хочу, чтобы все видимые поля в любой момент времени для правильного выравнивания, поэтому я использую 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 высоту только для 1-го ряда.

Answer 1

В игре два компонента: пространство между текстовыми полями (27 пикселей) и граница.

Если вы выберете любой из этих текстовых полей, вы увидите, что цвет границы изменится на синий. Если вы наведите на них курсор, вы увидите, что визуальное состояние этих же границ меняется.

Чтобы удалить его, установите для BorderThickness значение 0:

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

Или сделайте это проще для себя и для себя. создать неявный стиль TextBox:

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

Поскольку у вас есть 11 дочерних элементов в UniformGrid и установлены столбцы 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 пикселей, которые используют TextBox.

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 во время выполнения, вам потребуется повторно запустить этот лог c.