Выравнивание, поля и отбивка

  • Статья

В приложениях 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, поэтому их визуально трудно заметить. По этой причине для контейнеров Block лучше использовать параметры Margin.

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

Пример

Рассмотрим эффекты Margin и Padding на реальные элементы управления. Ниже приведено текстовое поле внутри сетки со значениями поля по умолчанию и заполнением 0.

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

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

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

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

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

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

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

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

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