1. Определение и конфигурирование каждой колонки.
2. Определение и конфигурирование каждой строки.
3. Назначение содержимого каждой ячейке сетки с применением синтаксиса присоединяемых свойств.
На заметку! Если не определить какие-либо строки и колонки, то по умолчанию элемент Grid будет состоять из единственной ячейки, которая заполняет всю поверхность окна. Кроме того, если не установить ячейку (колонку и строку) для подэлемента внутри Grid, тогда он автоматически разместится в колонке 0 и строке 0.
Первые два шага (определение колонок и строк) выполняются с использованием элементов Grid.ColumnDefinitions и Grid.RowDefinitions, которые содержат коллекции элементов ColumnDefinition и RowDefinition соответственно. Каждая ячейка внутри сетки на самом деле является подлинным объектом .NET, так что можно желаемым образом настраивать внешний вид и поведение каждого элемента.
Ниже представлено простое определение Grid (из файла SimpleGrid.xaml), которое организует содержимое пользовательского интерфейса, как показано на рис. 25.6:
<Grid ShowGridLines ="True" Background ="LightSteelBlue">
<b> <!-- Определить строки и колонки —></b>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<b> <! — Добавить элементы в ячейки сетки —></b>
<Label x:Name="lblInstruction" Grid.Column ="0" Grid.Row ="0"
FontSize="15" Content="Enter Car Information"/>
<Button x:Name="btnOK" Height ="30" Grid.Column ="0"
Grid.Row ="0" Content="OK"/>
<Label x:Name="lblMake" Grid.Column ="1"
Grid.Row ="0" Content="Make"/>
<TextBox x:Name="txtMake" Grid.Column ="1"
Grid.Row ="0" Width="193" Height="25"/>
<Label x:Name="lblColor" Grid.Column ="0"
Grid.Row ="1" Content="Color"/>
<TextBox x:Name="txtColor" Width="193" Height="25"
(window.adrunTag = window.adrunTag || []).push({v: 1, el: 'adrun-4-390', c: 4, b: 390})
Grid.Column ="0" Grid.Row ="1" />
<b> <!-- Добавить цвет к ячейке с именем, просто чтобы сделать</b>
картину интереснее -- >
<Rectangle Fill ="LightGreen" Grid.Column ="1" Grid.Row ="1" />
<Label x:Name="lblPetName" Grid.Column ="1" Grid.Row ="1" Content="Pet Name"/>
<TextBox x:Name="txtPetName" Grid.Column ="1" Grid.Row ="1"
Width="193" Height="25"/>
</Grid>
![]()
Обратите внимание, что каждый элемент (включая элемент Rectangle светло-зеленого цвета) прикрепляется к ячейке сетки с применением присоединяемых свойств Grid.Row и Grid.Column. По умолчанию порядок ячеек начинается с левой верхней ячейки, которая указывается с использованием Grid.Column="0" и Grid.Row="0". Учитывая, что сетка состоит всего из четырех ячеек, правая нижняя ячейка может быть идентифицирована как Grid.Column="1" и Grid.Row="1".
Установка размеров столбцов и строк в панели Grid
Задавать размеры столбцов и строк в панели Grid можно одним из трех способов:
• установка абсолютных размеров (например, 100);
• установка автоматических размеров;
• установка относительных размеров (например, 3*).
Установка абсолютных размеров — именно то, что и можно было ожидать; для размера колонки (или строки) указывается специфическое число единиц, независимых от устройства. При установке автоматических размеров размер каждой колонки или строки определяется на основе элементов управления, содержащихся в колонке или строке. Установка относительных размеров практически эквивалентна заданию размеров в процентах внутри стиля CSS. Общая сумма чисел в колонках или строках с относительными размерами распределяется на общий объем доступного пространства.
В следующем примере первая строка получает 25% пространства, а вторая — 75% пространства:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
Панели Grid с типами GridSplitter
Панели Grid также способны поддерживать разделители. Как вам возможно известно, разделители позволяют конечному пользователю изменять размеры колонок и строк сетки. При этом содержимое каждой ячейки с изменяемым размером реорганизует себя на основе находящихся в нем элементов. Добавлять разделители к Grid довольно просто:необходимо определить элемент управления GridSplitter и с применением синтаксиса присоединяемых свойств указать строку или колонку, на которую он воздействует.
