2 ПРИВЯЗКА ЭЛЕМЕНТОВ УПРАВЛЕНИЯ И МОДЕЛЬ КОМПОНОВКИ ОКНА WPF
2.1 Модель компоновки WPF
К основным инструментам, с помощью которых создаётся пользовательский оконный интерфейс, можно отнести элементы управления, стили, шаблоны расположения и ресурсы. Элементы управления обеспечивают взаимодействие с приложением; стили определяют визуализацию и интерактивное поведение элементов; шаблоны расположения переопределяют визуализацию и интерактивное поведение элементов управления; ресурсы позволяют повторно использовать объекты.
Шаблон расположения является коллекцией элементов и контролирует их свойства, такие как размер и расположение. С шаблонами расположения связан новый технологический приём организации содержимого в окне или на странице, который называется компоновкой.
Модель компоновки WPF отражает существенное изменение подхода разработчиков к проектированию пользовательских интерфейсов Windows. Традиционную для Windows Forms компоновку на основе координат в WPF использовать не рекомендуется. Вместо этого используются более гибкие компоновки, которые позволяют адаптировать внешний вид элементов управления и оформления к изменяющемуся содержимому, разным языкам и широкому разнообразию размеров окон.
В WPF компоновка формируется с использованием различных элементов-контейнеров.
Ключевые принципы компоновки элементов в контейнере WPF:
- элементы управления не должны иметь явно установленных размеров, их можно ограничить, устанавливая максимальное и минимальное их значение;
- элементы управления не указывают свою позицию в экранных координатах, вместо этого они упорядочиваются своим контейнером на основе размера, порядка и (необязательно) другой информации, специфичной для контейнера компоновки;
- контейнеры компоновки разделяют доступное пространство между своими дочерними элементами и пытаются обеспечить для каждого элемента его предпочтительный размер (на основе его содержимого), если только позволяет свободное пространство;
- контейнеры компоновки могут быть вложенными, например типичный пользовательский интерфейс начинается с Grid - наиболее развитого контейнера, и содержит другие контейнеры компоновки, которые организуют меньшие группы элементов, такие как текстовые поля с метками, элементы списка, значки в панели инструментов, колонка кнопок и т. д.
Перечисленные правила отражают общие цели проектирования WPF - более гибкий пользовательский интерфейс и простое сопровождение.
Каждый контейнер WPF обладает собственной функциональностью и логикой компоновки. Окно и страница в WPF может содержать только один корневой элемент – контейнер. Контейнеры компоновки WPF - это панели, порождённые от абстрактного класса System. Windows. Controls. Panel.
Базовый класс Panel - это предок других, более специализированных классов, которые находятся в пространстве имен System. Windows. Controls.
Для компоновки в WPF используются следующие классы контейнеров:
- StackPanel - размещает элементы в горизонтальном или вертикальном стеке, этот контейнер часто используется для организации небольших участков более крупного и сложного окна;
- WrapPanel - размещает элементы управления в последовательностях строк с переносом, при горизонтальной ориентации WrapPanel располагает элементы в строке слева направо, затем переходит к следующей строке; при вертикальной ориентации WrapPanel располагает элементы сверху вниз, используя дополнительные колонки для дополнения оставшихся элементов;
- DockPanel - размещает элементы управления относительно одного из своих внешних краев и выравнивает их по краю контейнера;
- Grid и UniformGrid - размещают элементы в строки и колонки в соответствии с невидимой таблицей;
- Frame - аналогичен StackPanel, но является предпочтительным способом упаковки содержимого для переходов на страницы.
Контейнер Grid является наиболее мощным контейнером в WPF. Большая часть всего, что можно сделать с помощью других контейнеров компоновки, можно выполнить в Grid. Grid является идеальным инструментом для разделения окна (страницы) на более мелкие области, которыми можно будет управлять с помощью других панелей.
2.2 Работа с декоративными элементами и линиями привязки элементов управления при компоновке окна
На рисунке 2.1 показаны основные окна среды WFP: окно компоновки MainWindow. xaml с двумя перемещающимися закладками 
- Design конструктора окна и XAML - текстового редактора, а также окно свойств объектов Properties, которое отражает свойства, доступные для редактирования (и события) выбранного элемента.
Рисунок 2.1
Выбрать объект <Window> можно, щёлкнув на границе окна в конструкторе или по поверхности разработки за пределами содержимого окна. На четырёх углах объекта появляются декоративные элементы для изменения его размера с помощью мыши.
Конструктор обеспечивает синхронизацию всех окон инструментов и представления. Так при изменении значения свойства класса в окне свойств, соответствующее XAML-описание автоматически добавляется в код разметки.
Добавлять элементы управления можно с помощью панели элементов Toolbox и путём редактирования текста в редакторе XAML.
Для окна, созданного с помощью шаблона, при перетаскивании элемента управления на поверхность разработки отображаются голубые направляющие элемента управления <Grid> (это контейнер-сетка).
На поверхности разработки конструктора WPF отображаются декоративные элементы, предназначенные для перемещения и изменения размеров элементов управления с помощью мыши. Они также предоставляют визуальную информацию о выравнивании элемента управления и другие сведения об элементе.
При перемещении или изменении размера элементов управления в конструкторе WPF отображаются различные линии привязки, которые помогают разместить элементы управления на поверхности разработки относительно других элементов.
Декоративные элементы для выравнивания представлены на рисунке 2.2.
Рисунок 2.2
Свойства категории Layout (Макет компоновки) позволяют:
- установить выравнивание по верхней и левой границам сетки;
- закрепить границы элемента.
Если после запуска приложения изменить размер окна, то кнопка перемещаться не будет. Для изменения размера кнопки при изменении размера окна необходимо изменить значение свойств выравнивания, для этого используются декоративные элементы, представленные на рисунке 2.3.
Рисунок 2.3
После изменения значения свойств HorizontalAlignment и VerticalAlignment с помощью мыши в окне конструктора - в окне Properties будут внесены соответствующие изменения, и наоборот. Если установить значения свойств выравнивания для button1, как указано на рисунке 2.4, то на этапе выполнения при изменении размеров окна будут изменяться и размеры кнопки (рисунок 2.5).
Рисунок 2.4
Рисунок 2.5
Значения свойства Margin типа Thickness соответствуют левому, верхнему, правому и нижнему полям от границы элемента-владельца. Свойство типа Thickness может быть представлено списком из одного, двух или четырёх значений.
Если задано одно значение, все четыре поля принимаются равными. Если заданы два значения, первое значение относится к левому и правому полям, а второе - к верхнему и нижнему (на рисунке 2.4 верхняя и правая граница кнопки закреплена на расстоянии 50 пикселей от сетки, а левая и нижняя граница - на расстоянии 100 пикселей от границы сетки).
При перемещении элемента управления вблизи контейнерного элемента управления, такого как сетка <Grid>, появляется граничная линия привязки, которая помогает равномерно расположить один или несколько элементов управления относительно границы контейнера. Примеры появления линии граничной привязки приведены на рисунке 2.6.
Рисунок 2.6
Два числа в верхнем левом красном прямоугольнике на рисунке 2.6(a)указывают на то, что верхний левый угол кнопки находится на 12 пикселей ниже и на 12 пикселей правее сетки.
В верхнем правом красном прямоугольнике на рисунке 2.6(a) содержится число 147. Оно указывает количество пикселей от правой границы кнопки до границы сетки.
В нижнем левом прямоугольнике число 74 указывает на то, что нижний левый угол кнопки находится на 74 пикселя выше границы сетки.
Если при перемещении элемент управления выходит за граничную линию привязки, он будет привязан к границе контейнерного элемента управления.
Чтобы отключить линии привязки при перемещении элемента управления, необходимо удерживать нажатой клавишу ALT во время перемещения по поверхности разработки. Клавиши со стрелками используются для сдвига элемента управления в нужное положение по пикселям.
Для привязки группы элементов используются линии привязки, правая отображена на рисунке 2.6 (b). Линии привязки позволяют границы одного элемента выровнять с границами другого.
На рисунке 2.6 (c) показана опорная линия привязки текста, которая отображается, когда два текстовых элемента управления выровнены. Число 20 - это количество пикселей, разделяющих две кнопки, расположение свойств Content, которых выравнены.
