Layout

Panels

Avalonia включает в себя группу элементов отнаследованных от Panel класса. Эти Panel элементы позволяют создавать множество сложных компоновок. Например, укладка элементов в стопку может быть легко достигнута с помощью функции StackPanel в то время как более сложные и свободные компоновки возможны при использовании элемента Canvas.

В следующей таблице представлена информация о доступных Panel:

Имя	Описание
Panel	Выстраивает все дочерние элементы, чтобы заполнить границы Panel.
Canvas	Определяет область, в пределах которой можно явно позиционировать дочерние элементы по координатам относительно области Canvas.
DockPanel	Определяет область, в пределах которой можно расположить дочерние элементы по горизонтали или вертикали относительно друг друга.
Grid	Определяет гибкую область сетки, состоящую из столбцов и строк.
RelativePanel	Упорядочивает дочерние элементы относительно других элементов или самой панели.
StackPanel	Упорядочивает дочерние элементы в одну линию, которая может быть ориентирована горизонтально или вертикально.
WrapPanel	Помещает дочерние элементы в последовательном порядке слева направо, разбивая содержимое на следующую строку у края содержащего поля. Последующее упорядочивание происходит последовательно сверху вниз или справа налево, в зависимости от значения свойства Orientation.

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

Element Bounding Boxes

При рассмотрении компоновки в Avalonia важно понимать, что все элементы окружает ограничивающая рамка. Каждый Control потребляемый системой компоновки можно представить как прямоугольник, который вставляется в компоновку. Свойство Bounds возвращает границы элемента и его координаты относительно родительского Panel. Размер прямоугольника определяется путем вычисления доступного пространства экрана, размеров любых ограничений, специфических для элемента свойств (таких как Margin и Padding), а также индивидуального поведения родительского элемента Panel. Обрабатывая эти данные, система компоновки способна рассчитать положение всех дочерних элементов конкретного Panel. Важно помнить, что размерные характеристики, заданные на родительском элементе, например, на элементе Border, влияют на своих детей.

Системы Layout

В самом простом виде компоновка представляет собой рекурсивную систему, которая приводит к изменению размеров, расположения и отрисовки элемента. Более конкретно, компоновка описывает процесс измерения и расположения элементов Panel элементы Children коллекции. Компоновка элементов (Layout Pass) - интенсивный процесс. Чем больше Children коллекция, тем большее количество вычислений необходимо произвести. Сложность также может быть введена на основе поведения родительской Panel, которому принадлежит коллекция. Относительно простой Panel, такие как Canvas, может иметь значительно более высокую производительность, чем более сложная Panel, такие как Grid.

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

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

Более подробно этот процесс и порядок его вызова рассматриваются в следующих разделах.

Measuring and Arranging Children

Система компоновки выполняет два прохода для каждого члена коллекции Children, проход на определение и проход на расположение. Каждый ребенок Panel предоставляет собственный MeasureOverride и ArrangeOverride методы для достижения своего специфического поведения макета.

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

Сначала, оцениваются свойства собственных размеров Visual такие как Clip и IsVisible. В результате формируется ограничение, которое передается в MeasureCore.

Далее обрабатываются свойства каркаса, влияющие на значение ограничения. Эти свойства, как правило, описывают размерные характеристики базовой системы Control, например, его Height, Width и Margin. Каждое из этих свойств может изменить пространство, необходимое для отображения элемента. MeasureOverride затем вызывается с ограничением в качестве параметра.

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

Конечная цель передачи мер - определение ребенком своего DesiredSize, который возникает во время вызова MeasureCore. DesiredSize значение хранится по Measure для использования во время прохода по организации контента.

Передача расположения начинается с вызова функции Arrange. Во время передачи организации родитель Panel элемент генерирует прямоугольник, представляющий границы дочернего элемента. Это значение передается в функцию ArrangeCore для обработки.

Метод ArrangeCore происходит от DesiredSize дочернего элемента и оценивает все дополнительные поля, которые могут повлиять на размер отображаемого элемента. ArrangeCore формирует расположение, которое передается в метод ArrangeOverride из Panel в качестве параметра. ArrangeOverride формирует окончательный размер дочернего элемента. Наконец, в методе ArrangeCore производит окончательную оценку свойств смещения, таких как Margin и alignment, и помещает дочерний элемент в свой слот компоновки. При этом дочерний элемент не обязан (и часто не заполняет) все выделенное ему пространство. Затем управление возвращается родительскому элементу Panel and the layout process is complete.

В этом разделе

• Panels Overview
• Alignment, Margins and Padding
• Create a Custom Panel