Панель Grid используется для расположения по рядам и столбцам (аналогично таблице HTML или элементу управления TableLayoutPanel в WinForms).

Обычным применением для элемента управления Grid являются диалоги или формы ввода данных, где метки и значения существуют бок о бок; мы можем использовать столбцы сетки для выравнивания элементов по горизонтали, а ряды — для выравнивания их по вертикали.

Столбцы создаются в сетке при помощи элемента Grid.ColumnDefinitions. Например, этот фрагмент кода XAML создает сетку с тремя столбцами:

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinitionx/ColumnDefinition>

<ColumnDefinitionx/ColumnDefinition>

<Co lumnDe f ini t ionx / Co lumnDe f ini t i on>

</Grid.ColumnDefinitions>

</Grid>

Аналогичным образом, элемент Grid.RowDefinitions определяет ряды внутри сетки:

<Grid>

<Grid.RowDefinitions>

<RowDe f ini t ionx /RowDe f ini t ion>

<RowDefinitionx/RowDefinition>

<RowDe f ini t ionx /RowDe f ini t ion>

</Grid.RowDefinitions>

</Grid>

Визуальный конструктор WPF имеет также интерактивные свойства, которые позволяют добавлять и удалять ряды и столбцы, а также производить изменение их размеров. На рис. 16.12 в окне показана сетка из двух столбцов и шести рядов. Обратите внимание, что визуальный конструктор показывает линии сетки, разграничивающие ряды и столбцы, и что слева и сверху элемента управления Grid имеется затененная граничная область. Эта гра­ничная область не только показывает нам текущий размер (ширину или высоту) столбца или ряда, но мы также можем использовать эту граничную область для создания новых рядов или столбцов (простым щелчком в том месте, где мы хотим разместить новый элемент). Мы можем также перетащить линии границ рядов или столбцов для увеличения или уменьшения размеров ряда или столбца.

Показанное на рис. 16.13 диалоговое окно легко получить при помощи панели Grid (код XAML показан в листинге 16.1). Вероятно, элемент управления Grid является самой гибкой и важной панелью практически для всех вариантов компоновки. Поэтому при добавлении нового элемента окна в проект WPF это окно будет по умолчанию содержать элемент управления Grid.

Листинг 16.1. Реализация диалога при помощи панели Grid

<Window х:Class="ContosoAvalon.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="80*"x/ColumnDefinition> <ColumnDefinition Width="*"x/ColumnDef inition> <ColumnDefinition Width="*"x/ColumnDefinition>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDe f ini t ionx /RowDe f ini t ion>

<RowDefinition></RowDefinition>

<RowDe f i ni t ionx / RowDe f in i t i on>

<RowDe f ini t i onx / RowDe f ini t i on>

<RowDefinitionx/RowDefinition>

<RowDe f ini t ionx/RowDe f ini t ion>

<RowDefinitionX/RowDefinition>

<RowDefinitionx/RowDefinition>

</Grid.RowDefinitions>

<TextBox Margin="5,5" BorderBrush="Gray" Grid.Со1шпп="1" Grid.Row="4"> </TextBox>

<Label Grid.Со1шпп="1" Grid.Row="5">{Date}</Label>

<Button Margin="5,5" Grid.Со1шпп="1" Grid.Row="6">0K</Button>

<Button Margin="5,5" Grid.Column="2" Grid.Row="6">Cancel</Button>

</Grid>

</Window>

В этом коде XAML необходимо отметить три вещи.

□    Для выравнивания элементов управления желательным образом мы использовали кон­цепцию объединения столбцов.

□    Для того чтобы дать каждой метке, текстовому полю (и прочим элементам) некоторое свободное пространство, мы использовали свойство Margin. Без указания свойства Margin любой элемент управления автоматически заполнит ту ячейку, в которой он на­ходится (а это означает, что у нас совершенно не останется расстояния между элемен­тами управления — как в горизонтальном, так и в вертикальном направлении).

□    В определениях столбцов элемента Grid мы используем звездочку для того, чтобы ука­зать пропорциональный размер. Иначе говоря, второй и третий столбцы делят между собой поровну все пространство, которое остается после визуализации первого столбца. Мы можем также настроить коэффициент "пропорциональности" (для этого надо ука­зать число, например: ColumnDefinition.Width="2*").