Контейнер Grid

Grid - это, вероятно, самый сложный контейнер среди всех панелей. Grid может содержать множество строк и столбцов. Вы задаёте высоту строк и ширину столбцов в абсолютных пикселях, в процентах от доступного места, либо устанавливаете значение auto, которое автоматически задаёт размеры строк или столбцов в зависимости от содержимого. Используйте Grid в случаях, когда, например, Вам нужно несколько столбцов (строк) в сочетании с другими типами панелей.

В наиболее простом виде Grid берёт каждый помещённый внутрь него элемент, растягивает его до максимально доступного пространства, и размещает каждый последующий элемент над предыдущим.

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Button>Button 1</Button>
		<Button>Button 2</Button>
	</Grid>
</Window>

Обратите внимание - последний элемент занял верхнюю позицию, и в данном случае это означает, что Вы не сможете увидеть первую кнопку. Это не слишком удобно для большинства ситуаций, поэтому давайте попробуем разделить пространство контейнера. В этом нам помогут ColumnDefinitions и RowDefinitions. Для начала опишем столбцы:

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>
		<Button>Button 1</Button>
		<Button Grid.Column="1">Button 2</Button>
	</Grid>
</Window>

В этом примере мы разделили всё доступное пространство на два столбца, которые делят его поровну, используя "звёздную нотацию" (будет рассмотрена в последующих главах). У второй кнопки установлено присоединённое свойство Grid.Column="1", благодаря которому мы разместили кнопку во втором столбце (0 - первый столбец, 1 - второй и т.д.). Это свойство можно было также установить и для первой кнопки, однако оно автоматически устанавливается в значение, соответствующее размещению кнопки в первой строке и первом столбце, что в точности соответствует желаемому результату.

Как Вы могли заметить, элементы занимают всё доступное пространство, что является поведением по умолчанию при расположении дочерних элементов в контейнере Grid. Это достигается установкой свойств HorizontalAlignment и VerticalAlignment у вложенных элементов в значение Stretch.

В некоторых ситуациях может понадобиться разместить элементы так, чтобы они занимали столько пространства, сколько им нужно и/или контролировать их расположение внутри контейнера Grid. Наиболее простой способ - задание свойств HorizontalAlignment и VerticalAlignment у необходимых элементов. Ниже приведена исправленная версия примера выше:

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>		
		<Button VerticalAlignment="Top" HorizontalAlignment="Center">Button 1</Button>
		<Button Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right">Button 2</Button>
	</Grid>
</Window>

Согласно скриншоту выше, первая кнопка теперь располагается сверху и выравнена по центру. Вторая кнопка размещена по центру и выравнена по правому краю.

Заключение

Grid - очень универсальная панель, имеющая гораздо больше возможностей, чем мы рассмотрели в этой статье. Остальные возможности мы рассмотрим в следующих статьях.