Выравнивание, поля и отбивка
В приложениях 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. Мы рекомендуем без необходимости не изменять поведение по умолчанию, то есть выравнивание по левому краю. Дополнительные сведения об оформлении текста см. в этом разделе.
Поля и заполнение
Свойства полей и отбивки помогают избежать перегруженности или излишней разреженности элементов пользовательского интерфейса, а также упростить использование некоторых типов ввода, таких как перо и сенсорный ввод. На рисунке ниже показаны поля и заполнение для контейнера и его содержимого.
поле
Свойство 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 и Grid с полями и заполнением в текстовом поле, как показано в этом XAML.
<Grid BorderBrush="Blue" BorderThickness="4" Width="200">
<TextBox Text="This is text in a TextBox." Margin="20" Padding="16,24"/>
</Grid>
Ресурсы стиля
Вам не нужно задавать каждое значение свойства по отдельности в элементе управления. Обычно более эффективно группировать значения свойств в ресурс Style и применять стиль к элементу управления. Это особенно верно, если необходимо применить одни и те же значения свойств ко многим элементам управления. Дополнительные сведения об использовании стилей см. в разделе Стили XAML.
Общие рекомендации
- Применяйте значения размеров только к определенным ключевым элементам, а для других элементов используйте поведение гибкого макета. Это обеспечивает быстрый отклик пользовательского интерфейса при изменении ширины окна.
- При использовании значений размеров все размеры, поля и отбивки следует устанавливать шагами по 4 эффективных пикселя. Когда XAML использует эффективные пиксели и масштабирование , чтобы сделать приложение понятным на всех устройствах и размерах экрана, он масштабирует элементы пользовательского интерфейса на несколько из 4. Использование значений с шагом 4 улучшает качество отрисовки, так как размеры будут иметь целое число пикселей.
- При небольшой ширине окна (менее 640 пикселей) мы рекомендуем использовать внутренние поля в 12 эффективных пикселей, а при большой — 24 эффективных пикселя.
См. также
Windows developer