Теперь предположим, что определена сетка с каким-то числом ячеек. Далее можно перетаскивать элементы управления в интересующую ячейку сетки и IDE-среда будет автоматически устанавливать их свойства Grid.Row и Grid.Column. Вот как может выглядеть разметка, сгенерированная IDE-средой после перетаскивания элемента Button в предопределенную ячейку:

  HorizontalAlignment="Left"

  Margin="21,21.4,0,0" Grid.Row="1"

  VerticalAlignment="Top" Width="75"/>

Пусть, например, было решено вообще не использовать элемент Grid. Щелчок правой кнопкой мыши на любом узле разметки в окне Document Outline приводит к открытию контекстного меню, которое содержит пункт, позволяющий заменить текущий контейнер другим (рис. 25.11). Следует осознавать, что такое действие (с высокой вероятностью) радикально изменит позиции элементов управления, потому что они станут удовлетворять правилам нового типа панели.

Еще один удобный трюк связан с возможностью выбора в визуальном конструкторе набора элементов управления и последующего их группирования внутри нового вложенного диспетчера компоновки. Предположим, что имеется панель Grid, которая содержит набор произвольных объектов. Выделите множество элементов на поверхности визуального конструктора, щелкая кнопкой мыши при нажатой клавише <Ctrl>. Если вы затем щелкните правой кнопкой мыши на выбранном наборе, то с помощью открывшегося контекстного меню сможете сгруппировать выделенные элементы в новую вложенную панель (рис. 25.12).

После этого снова загляните в окно Document Outline, чтобы проконтролировать вложенную систему компоновки. Так как строятся полнофункциональные окна WPF, скорее всего, всегда нужно будет использовать систему вложенных компоновок, а не просто выбирать единственную панель для отображения всего пользовательского интерфейса (фактически в оставшихся примерах приложений WPF обычно так и будет делаться). В качестве финального замечания следует указать, что все узлы в окне Document Outline поддерживают перетаскивание.

Например, если требуется переместить в родительскую панель элемент управления, который в текущий момент находится внутри Canvas, тогда можно поступить так, как иллюстрируется на рис. 25.13.

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

Построение окна с использованием вложенных панелей

Как упоминалось ранее, в типичном окне WPF для получения желаемой системы компоновки применяется не единственный элемент управления типа панели, а одни панели вкладываются внутрь других. Начните с создания нового проекта приложения WPF по имени MyWordPad.

Вашей целью является конструирование компоновки, в которой главное окно имеет расположенную в верхней части систему меню, под ней — панель инструментов и в нижней части окна — строку состояния. Строка состояния будет содержать область для текстовых подсказок, которые отображаются при выборе пользователем пункта меню (или кнопки в панели инструментов). Система меню и панель инструментов предоставят триггеры пользовательского интерфейса для закрытия приложения и отображения вариантов правописания в виджете Expander.

На рис. 25.14 показана начальная компоновка; она также иллюстрирует возможности правописания в рамках инфраструктуры WPF.

Чтобы приступить к построению интересующего пользовательского интерфейса, модифицируйте начальное определение XAML типа Window для использования дочернего элемента DockPanel вместо стандартного элемента управления Grid:

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

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

  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

  xmlns:local="clr-namespace:MyWordPad"

    mc:Ignorable="d"

    Title="My Spell Checker" Height="450" Width="800">

Построение системы меню