UWP XAML: как получить сетку с автоматическим размером при равной ширине столбца

Question

Моя цель - иметь панель «Сетка», в которой есть два столбца элементов управления (каждый столбец будет содержать вертикальную панель стека), где оба столбца имеют одинаковую ширину, но имеют автоматический размер в зависимости от содержащихся в них элементов управления.Таким образом, ширина обоих столбцов будет равна самому широкому элементу управления в каждом из столбцов.

Я попытался сделать что-то вроде этого:

<Grid HorizontalAlignment="Center">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>
  <Button Grid.Column="0" Content="This is a wide button" HorizontalAlignment="Center" />
  <Button Grid.Column="1" Content="Button" HorizontalAlignment="Center" />
</Grid>

Проблема в том, что ширина столбцов не равна.Эффект такой же, как если бы я указал Width="Auto" для определений столбцов.Использование * width только делает ширину столбцов равной ширине, если сетка имеет горизонтальное выравнивание Stretch вместо Center.(За исключением того, что столбцы больше не автоматически масштабируются для содержимого.)

Я что-то упустил?Есть ли способ получить ширину столбцов одинакового размера на основе содержимого в ячейках сетки?В приложении UWP (поэтому такие вещи, как UniformGrid недоступны)?

Answer 1

Это потому, что вы установили HorizontalAlignment в «Центр», Сетка не будет занимать всю страницу, она просто занимает центральную часть (ее горизонтальное пространство зависит от суммы дочерних элементов, в этом случае она не будет складываться для заполнения всей страницы.

Просто измените HorizontalAlignment = "Stretch", чтобы все доступное пространство и отдельные компоненты сетки занимали половину пространства.

<Grid HorizontalAlignment="Stretch" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Button Grid.Column="0"
                Content="This is a wide button"
                HorizontalAlignment="Center" />
        <Button Grid.Column="1"
                Content="Button"
                HorizontalAlignment="Center"/>
    </Grid>

Изображение:

Answer 2

Элемент управления Telerik RadDataGrid поможет вам в вашем сценарии

Добавьте \ установите Telerik.UI.Xaml.Controls.Grid из Nuget для использования RadDataGrid в вашем приложении UWP

Answer 3

Windows Community Toolkit имеет элемент управления Uniform Grid, который вы можете использовать, если добавите его в пакет NuGet.