xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  Title="Fun with Panels!" Height="200" Width="400">

        FontSize="15" Content="Enter Car Information"/>

Если присвоить свойству Orientation значение Horizontal, тогда визуализированный вывод станет таким, как на рис. 25.5:

Подобно WrapPanel панель StackPanel тоже редко применяется для организации содержимого прямо внутри окна. Панель StackPanel должна использоваться как вложенная панель в какой-нибудь главной панели.

Позиционирование содержимого внутри панелей Grid

Из всех панелей, предоставляемых API-интерфейсами WPF, панель Grid является, несомненно, самой гибкой. Аналогично таблице HTML панель Grid может состоять из набора ячеек, каждая из которых имеет свое содержимое. При определении Grid выполняются перечисленные ниже шаги.

1. Определение и конфигурирование каждой колонки.

2. Определение и конфигурирование каждой строки.

3. Назначение содержимого каждой ячейке сетки с применением синтаксиса присоединяемых свойств.

На заметку! Если не определить какие-либо строки и колонки, то по умолчанию элемент Grid будет состоять из единственной ячейки, которая заполняет всю поверхность окна. Кроме того, если не установить ячейку (колонку и строку) для подэлемента внутри Grid, тогда он автоматически разместится в колонке 0 и строке 0.

Первые два шага (определение колонок и строк) выполняются с использованием элементов Grid.ColumnDefinitions и Grid.RowDefinitions, которые содержат коллекции элементов ColumnDefinition и RowDefinition соответственно. Каждая ячейка внутри сетки на самом деле является подлинным объектом .NET, так что можно желаемым образом настраивать внешний вид и поведение каждого элемента.

Ниже представлено простое определение Grid (из файла SimpleGrid.xaml), которое организует содержимое пользовательского интерфейса, как показано на рис. 25.6:

      Width="193" Height="25"/>

Обратите внимание, что каждый элемент (включая элемент 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 с типами GridSplitter

Панели Grid также способны поддерживать разделители. Как вам возможно известно, разделители позволяют конечному пользователю изменять размеры колонок и строк сетки. При этом содержимое каждой ячейки с изменяемым размером реорганизует себя на основе находящихся в нем элементов. Добавлять разделители к Grid довольно просто:необходимо определить элемент управления GridSplitter и с применением синтаксиса присоединяемых свойств указать строку или колонку, на которую он воздействует.

Имейте в виду, что для того, чтобы разделитель был виден на экране, потребуется присвоить значение его свойству Width или Height (в зависимости от вертикального или горизонтального разделения). Ниже показана простая панель Grid с разделителем на первой колонке (Grid.Column="0") из файла GridWithSplitter.xaml:

         Grid.Column="0" Content ="Left!"/>