Панели макета

Панели макета — это контейнеры, которые позволяют упорядочивать и группировать элементы пользовательского интерфейса в приложении. Встроенные панели макета XAML включают RelativePanel, StackPanel, Grid, VariableSizedWrapGrid и Canvas. Здесь мы описываем каждую панель и покажем, как использовать ее для макета элементов пользовательского интерфейса XAML.

При выборе панели макета следует учитывать несколько факторов.

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

Примеры

Откройте приложение коллекции WinUI 3 и просмотрите панели макета в действии

Приложение WinUI 3 Gallery содержит интерактивные примеры элементов управления и функций WinUI. Получите приложение из Microsoft Store или просмотрите исходный код GitHub.

Свойства панели

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

Присоединенные к панели свойства

Большинство панелей макета XAML используют присоединенные свойства, чтобы их дочерние элементы сообщали родительской панели о том, как они должны размещаться в пользовательском интерфейсе. Присоединенные свойства используют синтаксис AttachedPropertyProvider.PropertyName. Если у вас есть панели, вложенные в другие панели, атрибуты привязки на элементах UI, устанавливающие параметры макета для родительской панели, интерпретируются только ближайшей родительской панелью.

Ниже приведен пример настройки присоединенного свойства Canvas.Left в элементе управления Button в XAML. Это сообщает родительскому холсту, что кнопку следует разместить на 50 эффективных пикселей от левого края холста.

<Canvas>
  <Button Canvas.Left="50">Hello</Button>
</Canvas>

Дополнительные сведения о присоединённых свойствах см. в Обзор присоединённых свойств.

Границы панели

Панели RelativePanel, StackPanel и Grid определяют свойства границы, которые позволяют создать границу вокруг панели без дополнительного обрамления элементов в Border. Свойства границы: BorderBrush, BorderThickness, CornerRadius и Padding.

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

<Grid BorderBrush="Blue" BorderThickness="12" CornerRadius="12" Padding="12">
    <TextBlock Text="Hello World!"/>
</Grid>

Благодаря встроенным свойствам границы уменьшается число элементов XAML, что может повысить производительность пользовательского интерфейса приложения. Дополнительные сведения о панелях макета и производительности пользовательского интерфейса см. в статье "Оптимизация макета XAML".

RelativePanel

RelativePanel позволяет макетировать элементы пользовательского интерфейса, указывая, где они располагаются относительно других элементов и по отношению к самой панели. По умолчанию элемент размещается в левом верхнем углу панели. Вы можете использовать RelativePanel с VisualStateManager и AdaptiveTrigger для изменения пользовательского интерфейса для различных размеров окна.

Откройте приложение коллекции WinUI 3 и просмотрите RelativePanel в действии

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

Выравнивание панели	Выравнивание с одноуровневыми элементами	Расположение на одном уровне
AlignTopWithPanel	AlignTopWith	Над
AlignBottomWithPanel	AlignBottomWith	Ниже
AlignLeftWithPanel	AlignLeftWith	LeftOf
AlignRightWithPanel	AlignRightWith	RightOf
AlignHorizontalCenterWithPanel	AlignHorizontalCenterWith
AlignVerticalCenterWithPanel	AlignVerticalCenterWith

В этом XAML показано, как упорядочивать элементы в RelativePanel.

<RelativePanel BorderBrush="Gray" BorderThickness="1">
    <Rectangle x:Name="RedRect" Fill="Red" Height="44" Width="44"/>
    <Rectangle x:Name="BlueRect" Fill="Blue"
               Height="44" Width="88"
               RelativePanel.RightOf="RedRect" />

    <Rectangle x:Name="GreenRect" Fill="Green" 
               Height="44"
               RelativePanel.Below="RedRect" 
               RelativePanel.AlignLeftWith="RedRect" 
               RelativePanel.AlignRightWith="BlueRect"/>
    <Rectangle Fill="Orange"
               RelativePanel.Below="GreenRect" 
               RelativePanel.AlignLeftWith="BlueRect" 
               RelativePanel.AlignRightWithPanel="True"
               RelativePanel.AlignBottomWithPanel="True"/>
</RelativePanel>

Результат выглядит следующим образом.

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

• Красный прямоугольник имеет явный размер 44x44. Он помещается в левый верхний угол панели, которая является позицией по умолчанию.
• Зеленый прямоугольник имеет явную высоту 44. Левая сторона выровнена с красным прямоугольником, а ее правая сторона выровнена с синей прямоугольникой, которая определяет ее ширину.
• Оранжевому прямоугольнику не назначен явный размер. Левая сторона совпадает с голубым прямоугольником. Его правые и нижние края выровнены с краем панели. Его размер определяется этими выравниваниями и изменяется вместе с изменением размера панели.

StackPanel

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

Откройте приложение коллекции WinUI 3 и просмотрите StackPanel в действии

Свойство Orientation можно использовать для указания направления дочерних элементов. Ориентация по умолчанию — вертикальная.

В следующем XAML показано, как создать вертикальный StackPanel элементов.

<StackPanel>
    <Rectangle Fill="Red" Height="44"/>
    <Rectangle Fill="Blue" Height="44"/>
    <Rectangle Fill="Green" Height="44"/>
    <Rectangle Fill="Orange" Height="44"/>
</StackPanel>

Результат выглядит следующим образом.

Если размер дочернего элемента не задан явным образом, он растягивается для заполнения доступной ширины (или высоты, если ориентация является горизонтальной). В этом примере ширина прямоугольников не задана. Прямоугольники расширяются, чтобы заполнить всю ширину StackPanel.

Grid

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

Откройте приложение WinUI 3 Gallery и просмотрите сетку в действии

Чтобы разместить объекты в определенных ячейках Сетки, используйте присоединенные свойства Grid.Column и Grid.Row .

Чтобы содержимое простиралось на несколько строк и столбцов, используйте присоединенные свойства Grid.RowSpan и Grid.ColumnSpan.

В этом примере XAML показано, как создать сетку с двумя строками и двумя столбцами.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="44"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Rectangle Fill="Red" Width="44"/>
    <Rectangle Fill="Blue" Grid.Row="1"/>
    <Rectangle Fill="Green" Grid.Column="1"/>
    <Rectangle Fill="Orange" Grid.Row="1" Grid.Column="1"/>
</Grid>

Результат выглядит следующим образом.

В этом примере измерение происходит следующим образом:

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

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

Для равномерного распределения доступного пространства между строками и столбцами сетки используется пропорциональное изменение размеров, также называемое звездной размерностью. В XAML значения звезд выражаются как * (или n* для взвешированного размера звезд). Например, чтобы указать, что один столбец в 5 раз шире второго столбца в макете с 2 столбцами, используйте "5*" и "*" для свойств Width в элементах ColumnDefinition.

Этот пример объединяет фиксированный, автоматический и пропорциональный размер в сетке с 4 столбцами.

колонна	Размеры	Description
Колонка_1	Автоматически	Размер столбца будет соответствовать его содержимому.
Столбец_2	*	После вычисления автоматических столбцов столбец получает часть оставшейся ширины. Column_2 будет вполовину уже, чем Column_4.
Столбец_3	44	Столбец будет иметь ширину в 44 пикселях.
Column_4	2*	После вычисления автоматических столбцов столбец получает часть оставшейся ширины. Column_4 будет в два раза больше, чем Column_2.

Ширина столбца по умолчанию — "*", поэтому не нужно явно задавать это значение для второго столбца.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition/>
        <ColumnDefinition Width="44"/>
        <ColumnDefinition Width="2*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Column 1 sizes to its content." FontSize="24"/>
</Grid>

В конструкторе XAML Visual Studio результат выглядит следующим образом.

VariableSizedWrapGrid

VariableSizedWrapGrid — это панель макета в стиле сетки, в которой строки или столбцы автоматически упаковываются в новую строку или столбец при достижении значения MaximumRowsOrColumns .

Откройте приложение коллекции WinUI 3 и просмотрите VariableSizedWrapGrid в действии

Свойство Orientation указывает, добавляются ли элементы сетки в строки или столбцы перед переносом. Ориентация по умолчанию — "Вертикальная", что означает, что сетка добавляет элементы сверху вниз, пока столбец не будет заполнен, а затем переносится в новый столбец. Если значение равно горизонтально, сетка добавляет элементы слева направо, а затем помещается в новую строку.

Измерения ячеек задаются элементом ItemHeight и ItemWidth. Каждая ячейка имеет одинаковый размер. Если не указаны ItemHeight или ItemWidth, тогда первая ячейка подстраивается под содержимое, а остальные ячейки принимают размер первой ячейки.

Вы можете использовать присоединенные свойства VariableSizedWrapGrid.ColumnSpan и VariableSizedWrapGrid.RowSpan , чтобы указать, сколько смежных ячеек нужно заполнить дочерним элементом.

Вот как использовать VariableSizedWrapGrid в XAML.

<VariableSizedWrapGrid MaximumRowsOrColumns="3" ItemHeight="44" ItemWidth="44">
    <Rectangle Fill="Red"/>
    <Rectangle Fill="Blue" 
               VariableSizedWrapGrid.RowSpan="2"/>
    <Rectangle Fill="Green" 
               VariableSizedWrapGrid.ColumnSpan="2"/>
    <Rectangle Fill="Orange" 
               VariableSizedWrapGrid.RowSpan="2" 
               VariableSizedWrapGrid.ColumnSpan="2"/>
</VariableSizedWrapGrid>

Результат выглядит следующим образом.

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

Холст

Панель Canvas размещает дочерние элементы по фиксированным координатам и не поддерживает гибкие макеты. Вы указываете точки на отдельных дочерних элементах, задавая для каждого элемента присоединённые свойства Canvas.Left и Canvas.Top. Родительский холст считывает эти присоединённые значения свойств из дочерних элементов в ходе Arrange прохода расстановки.

Откройте приложение WinUI 3 Gallery и просмотрите холст в действии

Объекты на холсте могут перекрываться, где один объект рисуется поверх другого объекта. По умолчанию Холст отрисовывает дочерние объекты в том порядке, в котором они объявлены, поэтому последний дочерний элемент отображается сверху (каждый элемент имеет z-индекс по умолчанию 0). Это то же самое, что и другие встроенные панели. Однако Canvas также поддерживает присоединенное свойство Canvas.ZIndex , которое можно задать для каждого дочернего элемента. Это свойство можно задать в коде, чтобы изменить порядок рисования элементов во время выполнения. Элемент с наивысшим значением Canvas.ZIndex отрисовывается последним и, следовательно, отображается поверх всех других элементов, которые делят с ним одно и то же пространство или каким-либо образом перекрываются. Обратите внимание, что альфа-значение (прозрачность) учитывается, поэтому, даже если элементы перекрываются, содержимое, отображаемое в перекрывающихся областях, может быть смешано, если верхний элемент имеет не максимальное значение альфа.

Холст не изменяет размер своих дочерних элементов. Каждый элемент должен указать свой размер.

Ниже приведен пример холста в XAML.

<Canvas Width="120" Height="120">
    <Rectangle Fill="Red" Height="44" Width="44"/>
    <Rectangle Fill="Blue" Height="44" Width="44" Canvas.Left="20" Canvas.Top="20"/>
    <Rectangle Fill="Green" Height="44" Width="44" Canvas.Left="40" Canvas.Top="40"/>
    <Rectangle Fill="Orange" Height="44" Width="44" Canvas.Left="60" Canvas.Top="60"/>
</Canvas>

Результат выглядит следующим образом.

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

Панель обертки

Important

WrapPanelдоступен начиная с Windows App SDK 2.0 Экспериментальная версия 2. Windows App SDK 2.0 Экспериментальный 4 переименовал свойства интервала в ItemSpacing и LineSpacing. API помечены экспериментальными и могут изменяться или удаляться в будущем выпуске. Не используйте их в продакшен-приложениях.

WrapPanel упорядочивает дочерние элементы друг за другом в строке. Если следующий элемент не помещается в пространство, остающееся в строке, панель перемещает его в начало новой строки. Используйте WrapPanel для небольшого набора элементов, таких как теги или кнопки фильтра, которые должны автоматически переноситься при изменении доступного пространства. WrapPanel — это порт Windows Community Toolkit WrapPanel.

Откройте приложение WinUI 3 Gallery и просмотрите WrapPanel в действии

Свойство Orientation указывает направление, в котором панель добавляет элементы. Ориентация по умолчанию — Горизонтальная, что означает, что панель добавляет элементы слева направо, а затем переносит их на новую строку. Если значение — Вертикальная, панель добавляет элементы сверху вниз, после чего элементы переносятся в новый столбец. Если свойство FlowDirection панели имеет значение RightToLeft, например в приложении, локализованном для языка справа налево, панель зеркально отражает этот макет. Он заполняет каждую строку справа налево и добавляет каждый новый столбец слева от предыдущего.

В отличие от VariableSizedWrapGrid, WrapPanel не использует ячейки фиксированного размера. Каждый дочерний объект сохраняет нужный размер в направлении ориентации. В строке каждый дочерний элемент получает слот высотой с самый высокий дочерний элемент в этой строке. В столбце каждый дочерний элемент получает слот шириной с самый широкий дочерний элемент в этом столбце.

Используйте эти свойства для добавления пространства в макет:

• ItemSpacing задает пространство между соседними элементами в одной строке. Значение по умолчанию — 0.
• LineSpacing задает пространство между строками. Значение по умолчанию — 0.
• Внутренний отступ задает пространство между краями панели и ее элементами.

Вот как использовать WrapPanel в XAML.

<WrapPanel Width="132" ItemSpacing="4" LineSpacing="4">
    <Rectangle Fill="Red" Width="44" Height="44"/>
    <Rectangle Fill="Blue" Width="80" Height="44"/>
    <Rectangle Fill="Green" Width="44" Height="44"/>
    <Rectangle Fill="Orange" Width="60" Height="44"/>
</WrapPanel>

Результат выглядит следующим образом.

В этом примере красные и синие прямоугольники и интервалы между элементами используют 128 из 132 пикселей панели, поэтому они совместно используют первую строку. Зеленый прямоугольник не помещается в оставшееся пространство, поэтому он переносится на вторую строку. Оранжевый прямоугольник помещается рядом с зеленым прямоугольником во второй строке.

Чтобы последний дочерний элемент заполнил оставшееся в строке пространство, задайте для свойства ItemsStretch значение Last. Значение по умолчанию, None, оставляет каждый дочерний элемент в желаемом размере. Не устанавливайте явную ширину последнего дочернего элемента или явную высоту, если ориентация является вертикальной, так как явный размер не позволяет дочернему элементу растянуться.

<WrapPanel Width="132" ItemSpacing="4" LineSpacing="4" ItemsStretch="Last">
    <Rectangle Fill="Red" Width="44" Height="44"/>
    <Rectangle Fill="Blue" Width="80" Height="44"/>
    <Rectangle Fill="Green" Width="44" Height="44"/>
    <Rectangle Fill="Orange" Height="44"/>
</WrapPanel>

Результат выглядит следующим образом.

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

// Stretch the last child of a WrapPanel named tagPanel.
tagPanel.ItemsStretch = WrapPanelItemsStretch.Last;

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

WrapPanel не виртуализирует дочерние элементы. Он создает и размещает каждый дочерний элемент, включая дочерние элементы, прокручиваемые вне представления. Чтобы отобразить большую коллекцию, которая переносится, используйте GridView или ItemsRepeater с UniformGridLayout. Эти элементы управления поддерживают виртуализацию пользовательского интерфейса.

Панели для ItemsControl

Существует несколько панелей специального назначения, которые можно использовать только в качестве ItemsPanel для отображения элементов в ItemsControl. Это ItemsStackPanel, ItemsWrapGrid, VirtualizingStackPanel и WrapGrid. Эти панели нельзя использовать для общего макета пользовательского интерфейса.

Получите пример кода

• пример коллекции WinUI 3 — просмотрите все элементы управления XAML в интерактивном формате.