Макет приложения (Layout) в WPF

Одним из ключевых моментов, связанных с отличием WPF от других платформ при разработке пользовательского интерфейса является возможность создания так называемого «резинового» или адаптивного дизайна. При таком подходе к построению интерфейса ваше приложение будет выглядеть одинаково красиво и удобно на любых экранах с любым разрешением. Чтобы это было возможно, в WPF для построения интерфейса применяется Макет приложения (layout, также иногда можно встретить названия «раскладка» или «компоновка»).

Макет приложения. Контейнеры

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

Все контейнеры WPF имеют общего родителя — класс Panel, который предоставляет своим наследникам следующие свойства:

Процесс построение интерфейса в WPF

В самом простом случае макет является рекурсивной системой, которая изменяет размер и расположение элемента и отображает его на экране. В частности, макет описывает процесс измерения и упорядочивания элементов, расположенных в коллекции элементов Children контейнера.

Следует отметить, что чем больше элементов расположено в коллекции Children контейнера, тем больше число вычислений, которое необходимо выполнить. Также, сложность вычисления и упорядочивания элементов может возрастать в зависимости от типа используемого контейнера. Например, для Canvas процесс построения макета может осуществляться быстрее, чем для более сложного контейнера Grid.

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

1. Дочерний элемент из коллекции Children контейнера начинает процесс построения.
2. Оцениваются свойства размера и положения элемента, например, такие как Width , Height и Margin .
3. Содержимое контейнера упорядочивается после того, как все элементы в коллекции Children были измерены.
4. Коллекция элементов управления отображается на экране.
5. Процесс вызывается снова, если к коллекции добавляются дополнительный элементы или вызывается событие построения макета, например, при изменении размеров окна.

Основные правила построения пользовательского интерфейса в WPF

При работе над построением макета приложения желательно придерживаться двух основных правил:

1. Нежелательно указывать явные размеры элементов. Размеры каждого элемента управления должны определяться контейнерами самостоятельно. Исключение могут составлять только максимальный и минимальный размеры компонента.
2. Нежелательно указывать явные позицию и координаты элементов внутри окна. Позиционирование элементов также должно производиться системой макета WPF.

Если нам необходимо построить сложный пользовательский интерфейс, то контейнеры могут вкладываться друг в друга и, тем самым, достигается возможность построения практически неограниченных по сложности интерфейсов. Но, опять же, стоит учитывать то, что большое количество вложенных друг в друга элементов может значительно ухудшить производительность вашего приложения WPF. Поэтому, при построении пользовательского интерфейса, стоит минимизировать уровень вложенности элементов везде где это возможно.

Итого

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