Панель типа Grid - единицы измерения

До настоящего времени мы для указания высоты/ширины наиболее часто использовали звездочку, указывающую, что колонка или строка могут занять определенную долю общего пространства. Однако существует еще два способа задать высоту/ширину строки или колонки: в абсолютных единицах или в режиме Auto для ширины или высоты. Давайте создадим сетку Grid с одновременным использованием всех способов.

<Window x:Class="WpfTutorialSamples.Panels.GridUnits"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridUnits" Height="200" Width="400">
	<Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="1*" />
			<ColumnDefinition Width="Auto" />
			<ColumnDefinition Width="100" />
		</Grid.ColumnDefinitions>
		<Button>Button 1</Button>
		<Button Grid.Column="1">Button 2 with long text</Button>
		<Button Grid.Column="2">Button 3</Button>
	</Grid>
</Window>

В данном примере первая кнопка находится в колонке с шириной типа «*», для второй установлена ширина Auto, а для третьей задано статичное значение 100 пикселей.

Результат показан на скриншоте. Здесь вторая кнопка занимает ровно столько места, сколько нужно для отображения длинного текста на ней, третья кнопка занимает ровно 100 пикселей (как и было задано в свойстве), а первая кнопка переменной длины занимает оставшееся место.

Когда одна или несколько колонок (или строк) имеют изменяющиеся размеры, заданные с помощью «*», в контейнере Grid колонки/строки автоматически делят между собой высоту/ширину, не используемую колонками/строками с абсолютными размерами и размерами Auto. В этом можно убедиться, если попробовать изменить размер окна.

Из первого скриншота видно, что контейнер оставляет пространство для двух последних кнопок, даже несмотря на то, что первой кнопке не хватает места для корректного отображения надписи. Со второго скриншота видно, что две последних кнопки точно сохраняют свои размеры, оставляя избыточное пространство для первой кнопки.

Это может оказаться очень полезным приемом при разработке различного вида диалоговых окон. Например, рассмотрим простую контактную форму, в которой пользователь вводит имя, e-mail и комментарий. Первые два поля обычно имеют фиксированные размеры, в то время как последнее должно занимать как можно больше пространства, оставляя место для длинного комментария. В последующей главе мы попробуем создать контактную форму с использованием контейнера Grid с колонками и строками различных размеров.