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

  • Статья

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

Существует несколько аспектов, которые необходимо учитывать при выборе панели макета.

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

Примеры

Коллекция WinUI 2
Коллекция WinUI

Если у вас установлено приложение коллекции WinUI 2 , см. в действии RelativePanel, StackPanel, Grid, VariableSizedWrapGrid и Canvas .

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

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

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

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

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

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

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

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

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

Вот пример задания свойств границ в Grid.

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

Сетка с границами

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

RelativePanel

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

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

Согласование панели Согласование с элементами одного уровня Согласование с положением одного уровня
AlignTopWithPanel AlignTopWith Above
AlignBottomWithPanel AlignBottomWith Below
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 обычно используется для упорядочивания небольших подразделов пользовательского интерфейса на странице.

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

Следующий фрагмент кода 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, если размер дочернего элемента явным образом не задан, он растягивается на всю доступную ширину (или высоту, если ориентация — Horizontal). В этом примере ширина прямоугольников не задана. Прямоугольники растягиваются, заполняя всю ширину StackPanel.

Макет Grid

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

Объекты располагаются в определенных ячейках макета Grid с использованием присоединенных свойств Grid.Column и Grid.Row.

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

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

<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>

Результат выглядит так:

Макет Grid

В этом примере показан принцип работы изменения размера.

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

Функции назначения размера Auto или с помощью звезд позволяют распределить пространство столбца и строки. Функция автоматического выбора размера используется, чтобы разрешить элементам пользовательского интерфейса изменять размер по размеру своего содержимого или родительского контейнера. Можно также использовать функцию автоматического выбора размера со строками и столбцами сетки. Для использования функции автоматического выбора размеров установите для параметров Height и/или Width элементов пользовательского интерфейса значение Auto.

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

В этом примере сочетаются фиксированный, автоматический и пропорциональный размер в элементе Grid с четырьмя столбцами.

Столбец Определение размера Описание
Column_1 Автоматически Размер столбца автоматически подстраивается под содержимое.
Column_2 * После вычисления значений ширины для столбцов с автоматическим подбором размера этот столбец получает часть оставшейся ширины. Ширина столбца Column_2 будет занимать половину ширины столбца Column_4.
Column_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 результат выглядит следующим образом.

Сетка 4 столбцов в конструкторе Visual Studio

VariableSizedWrapGrid

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

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

Размеры ячейки задаются параметрами 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 располагает свои дочерние элементы с помощью фиксированных точек координат и не поддерживает гибкие макеты. Эти точки указываются в индивидуальных дочерних элементах заданием присоединенных свойств Canvas.Left и Canvas.Top для каждого элемента. Родительский объект Canvas считывает значения этих присоединенных свойств со своих дочерних элементов во время упорядочивания макета Arrange.

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

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

Пример Canvas в 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

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

Панели для ItemsControl

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

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