Выравнивание, поле и заполнение

  • Статья

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

Измерения (высота, ширина)

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

Схема, показывающая размеры

  • Свойства Height и Width определяют размер элемента. Значения по умолчанию с точки зрения математики являются NaN (не числами). Можно использовать статические значения, измеренные в эффективных пикселях, функцию автоматического выбора размера либо пропорциональный размер для динамичного поведения.

  • ActualHeight и ActualWidth являются свойствами только для чтения и определяют размер элемента во время выполнения. Если гибкие макеты увеличиваются или уменьшаются в размерах, меняются значения в событии SizeChanged. Обратите внимание, что RenderTransform не меняет значения ActualHeight и ActualWidth.

  • Minwidth/MaxWidth и MinHeight/MaxHeight указывают значения, ограничивающие размер элемента, позволяя изменять размер элемента.

  • FontSize и другие текстовые свойства управляют размером макета для текстовых элементов. Хотя текстовые элементы не имеют явно объявленных размеров, у них есть вычисляемые ActualWidth и ActualHeight.

Выравнивание

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

схема, показывающая выравнивание

  • Свойства HorizontalAlignment и VerticalAlignment указывают, как элемент должен быть расположен в выделенном родительском контейнере.

    • Значения для HorizontalAlignment: Left, Center, Right и Stretch.
    • Значения для VerticalAlignment: Top, Center, Bottom и Stretch.

  • Значение Stretch используется по умолчанию для обоих свойств, при этом элементы занимают все место в соответствии с родительским контейнером. Реальное числовое значение Height и Width отменяет выравнивание Stretch, которое будет действовать как значение Center. Некоторые элементы управления, например Button, перезаписывают значение Stretch в своем стиле по умолчанию.

  • HorizontalContentAlignment и VerticalContentAlignment указывают, как дочерние элементы должны быть расположены в родительском контейнере.

  • Выравнивание может влиять на обрезку в рамках панели макета. Например, при выравнивании HorizontalAlignment="Left" правая часть элемента обрезается, если содержимое больше по размеру, чем ActualWidth.

  • Текстовые элементы используют свойство TextAlignment. Как правило, рекомендуется использовать выравнивание по левому краю, которое является значением по умолчанию. Дополнительные сведения об оформлении текста см. в разделе Оформление текста.

Поля и заполнение

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

схема полей и заполнения XAML

Маржа

Свойство Margin Управляет размером пустого пространства вокруг элемента. Margin не добавляет пиксели к ActualHeight и ActualWidth и не считается частью элемента для проведения проверок и событий ввода источников.

  • Значения свойства Margin могут быть универсальными или определенными. При значении Margin="20" к элементу будет применено универсальное поле в 20 пикселей слева, сверху, справа и снизу. При значении Margin="0,10,5,25" значения применяются слева, сверху, справа и снизу (в указанном порядке).

  • Поля можно добавить. Если каждый из двух элементов определяет ширину поля в 10 пикселей, и они расположены по соседству в любой ориентации, то расстояние ними составит 20 пикселей.

  • Допустимы отрицательные поля. Однако использование отрицательного поля может вызвать обрезку и наползание соседних элементов друг на друга, поэтому отрицательные поля обычно не используют.

  • Значения полей ограничиваются последними, поэтому будьте осторожны с полями, так как контейнеры могут обрезать элементы или ограничивать их размер. Значение Margin может стать причиной того, что элемент не будет поддаваться отрисовке, поскольку одно из его измерений было ограничено до 0 после применения поля.

Заполнение

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

В отличие от Margin Padding не является свойством FrameworkElement. Существует несколько классов, определяющих собственное свойство Padding:

  • Control.Padding: наследуется всеми производными классами Control. Не во всех элементах управления имеется содержимое, поэтому для таких элементов задание свойства ни на что не влияет. Если элемент управления имеет границу, заполнение применяется внутри этой границы.
  • Border.Padding: определяет расстояние между линией прямоугольника, созданной свойством BorderThickness/BorderBrush и элементом Child.
  • ItemsPresenter.Padding: отвечает за отображение элементов в элементах управления, размещая указанное заполнение вокруг каждого элемента.
  • TextBlock.Padding и RichTextBlock.Padding: увеличивает ограничивающий прямоугольник вокруг текста текстового элемента. Эти текстовые элементы не имеют параметра Background, поэтому его визуально трудно различить. По этой причине лучше использовать параметры Margin для контейнеров Block.

В каждом из этих случаев элементы также имеют свойство Margin. Если одновременно используются свойства Margin и Padding, они дополняют друг друга: очевидное расстояние между внешним контейнером и внутренним содержимым складывается из ширины поля и заполнения.

Пример

Рассмотрим влияние параметров Margin и Padding на реальные элементы управления. Вот параметр TextBox внутри Grid со значениями параметров Margin и Padding по умолчанию, равными 0.

TextBox с полем и заполнением 0

Вот те же самые параметры TextBox и Grid со значениями параметров Margin и Padding в TextBox, как показано в этом коде XAML.

<Grid BorderBrush="Blue" BorderThickness="4" Width="200">
    <TextBox Text="This is text in a TextBox." Margin="20" Padding="16,24"/>
</Grid>

Параметр TextBox с положительными значениями поля и заполнения

Ресурсы стиля

Вам не придется задавать значения свойства по отдельности для элемента управления. Обычно такой способ более эффективен для группировки значений свойств в ресурс Style и применения Style к элементу управления. Это в первую очередь касается случаев, когда необходимо применить одинаковые значения свойства к многочисленным элементам управления. Подробнее об использовании стилей см. в разделе Стили XAML.

Общие рекомендации

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

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

  • При небольшой ширине окна (менее 640 пикселей) рекомендуется использовать внутренние поля в 12 эффективных пикселей, а при большой — 24 эффективных пикселя.

рекомендуемые внутренние поля