Автоматическая подстройка под содержимое слотов

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

<TabItem Header="Grid 1">

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

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" />

<ColumnDefinition Width="Auto" />

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

</TabItem>

Дескрипторы <RowDefinition Height="Auto" /> и <ColumnDefinition Width="Auto" /> не только определяют количество строк и столбцов сетки, но и могут устанавливать режимы подстройки под содержимое. Значения "Auto" параметров высоты и ширины как раз это и означают.

Жесткая установка размеров ячеек

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

<TabItem Header="Grid 2">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="50" />

<RowDefinition Height="*" />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="50" />

<ColumnDefinition Width="*" />

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

В дескрипторах определения строк и столбцов для рассматриваемого варианта жестко задаются высота первой строки и ширина первого столбца. Установка размера в значение "*" означает, что он нелимитирован и соответствующие строка или столбец займут оставшееся от других свободное место родителя. Параметры MinWidth в определениях потомков являются в данном случае необязательными и указывают минимальную границу изменения размера потомка по ширине.

• Поизменяйте размеры окна и убедитесь, что жестко заданные размеры первого слота строго выдерживаются сеткой

Задание пропорций

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

<TabItem Header="Grid 3">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="2*" />

<RowDefinition Height="1*" />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="2*" />

<ColumnDefinition Width="1*" />

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

Приведенные в каждой секции строк и столбцов данного кода определения размеров устанавливают пропорции, которые должны поддерживаться между этим строками или столбцами. Для любой из приведенных секций можно было бы задать и другие размеры, например <RowDefinition Height="20*" /> и <RowDefinition Height="10*" />, все равно пропорции останутся прежними ( 2/1 ).