Одинаковая подстройка под наибольшее содержимое

• Заполните вкладку Grid 4 приведенным ниже кодом и запустите приложение

<TabItem Header="Grid 4">

<Grid HorizontalAlignment="Center" VerticalAlignment="Stretch">

<Grid.RowDefinitions>

<RowDefinition />

<RowDefinition />

<RowDefinition />

<RowDefinition />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" />

</Grid.ColumnDefinitions>

<Button Grid.Row="0" Background="LightPink">Первый</Button>

<Button Grid.Row="1" Background="Lime">Второй</Button>

<Button Grid.Row="2" Background="Aquamarine">Третий - самое длинное содержимое</Button>

<Button Grid.Row="3" Background="Yellow">Четвертый</Button>

</Grid>

</TabItem>

Мы определили четыре строки и один столбец и задали автоматическую подстройку под наибольшее содержимое элементов столбца. Сетка подстраивается по высоте под свободное пространство родителя (вкладки), поскольку для нее мы задали VerticalAlignment="Stretch" (он же и по умолчанию), а высоту ячеек не задали.

Выравнивание размера столбцов сетки по ключу группы

• Заполните вкладку Grid 5 приведенным ниже кодом и запустите приложение

<TabItem Header="Grid 5">

<Grid Grid.IsSharedSizeScope="True" HorizontalAlignment="Center">

<Grid.RowDefinitions>

<RowDefinition />

<RowDefinition />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" SharedSizeGroup="myKey" />

<ColumnDefinition Width="Auto" SharedSizeGroup="myKey" />

</Grid.ColumnDefinitions>

<Button Grid.Row="0" Grid.Column="0" MinWidth="0" Background="LightPink">Первый</Button>

<Button Grid.Row="0" Grid.Column="1" MinWidth="0" Background="Lime">Второй</Button>

<Button Grid.Row="1" Grid.Column="0" MinWidth="0" Background="Aquamarine">Наибольшей ширины</Button>

<Button Grid.Row="1" Grid.Column="1" MinWidth="0" Background="Yellow">Четвертый</Button>

</Grid>

</TabItem>

Оба столбца подстраиваются под свое наибольшее содержимое с помощью параметра Auto и имеют равную ширину, потому что объединены в группу с одинаковым ключом. Это будет работать только при условии, что присоединенное к сетке свойство Grid.IsSharedSizeScope установлено в True. Ключ выбирается произвольно, но должен быть алфавитно-цифровым. Он не должен начинаться с цифры и не должен иметь пробелов или иных разделителей. Связать ключом группы можно любое количество столбцов или строк и тогда все они будут иметь равный размер.

Связывание столбцов многих сеток из многих групп

• Заполните вкладку Grid 6 приведенным ниже кодом и запустите приложение

<TabItem Header="Grid 6">

<StackPanel Grid.IsSharedSizeScope="True">

<TextBlock HorizontalAlignment="Center">

Сетки с обобществлением размеров столбцов

</TextBlock>

<StackPanel Margin="5" />

<Grid>

<Grid.RowDefinitions>

<RowDefinition />

<RowDefinition />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" SharedSizeGroup="myKey1" />

<ColumnDefinition Width="Auto" SharedSizeGroup="myKey2" />

</Grid.ColumnDefinitions>

<Button Grid.Row="0" Grid.Column="0" Background="LightPink">Первый</Button>

<Button Grid.Row="0" Grid.Column="1" Background="Lime">Второй</Button>

<Button Grid.Row="1" Grid.Column="0" Background="Aquamarine">

Шире для всех первых столбцов

</Button>

<Button Grid.Row="1" Grid.Column="1" Background="Yellow">Четвертый</Button>

</Grid>

<StackPanel Margin="5" />

<Grid>

<Grid.RowDefinitions>

<RowDefinition />

<RowDefinition />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" SharedSizeGroup="myKey1" />

<ColumnDefinition Width="Auto" />

</Grid.ColumnDefinitions>

<Button Grid.Row="0" Grid.Column="0" Background="LightPink">1</Button>

<Button Grid.Row="0" Grid.Column="1" Background="Lime">2</Button>

<Button Grid.Row="1" Grid.Column="0" Background="Aquamarine">3</Button>

<Button Grid.Row="1" Grid.Column="1" Background="Yellow">4</Button>

</Grid>

<StackPanel Margin="5" />

<Grid>

<Grid.RowDefinitions>

<RowDefinition />

<RowDefinition />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" />

<ColumnDefinition Width="Auto" SharedSizeGroup="myKey2" />

</Grid.ColumnDefinitions>

<Button Grid.Row="0" Grid.Column="0" Background="LightPink">1</Button>

<Button Grid.Row="0" Grid.Column="1" Background="Lime">2</Button>

<Button Grid.Row="1" Grid.Column="0" Background="Aquamarine">3</Button>

<Button Grid.Row="1" Grid.Column="1" Background="Yellow">4</Button>

</Grid>

<StackPanel Margin="5" />

<Grid>

<Grid.RowDefinitions>

<RowDefinition />

<RowDefinition />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" SharedSizeGroup="myKey1" />

<ColumnDefinition Width="Auto" SharedSizeGroup="myKey2" />

</Grid.ColumnDefinitions>

<Button Grid.Row="0" Grid.Column="0" Background="LightPink">1</Button>

<Button Grid.Row="0" Grid.Column="1" Background="Lime">2</Button>

<Button Grid.Row="1" Grid.Column="0" Background="Aquamarine">3</Button>

<Button Grid.Row="1" Grid.Column="1" Background="Yellow">Шире для вторых</Button>

</Grid>

</StackPanel>

</TabItem>

В StackPanel упаковано несколько сеток и текстовый блок с вертикальным по умолчанию размещением. Столбцы сеток включены в разные группы и выравнивают ширину по наибольшему содержимому своей группы. Свободные столбцы сеток подстраиваются под свое содержимое индивидуально, потому что у них установлено Width="Auto". Отступы между сетками обеспечиваются пустыми элементами StackPanel с параметром Margin="5". Свойство Grid.IsSharedSizeScope="True" для включения механизма выравнивания размеров групп присоединено к родительской StackPanel.