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

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

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

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

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

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

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

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

Согласование

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

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

  • Значения для HorizontalAlignment: Слева, По центру, Справа и Растянуть.
  • Значения для VerticalAlignment: Top, Center, Bottom и Stretch.

• Stretch — это значение по умолчанию для обоих свойств, а элементы заполняют все пространство, которое они предоставляются в родительском контейнере. Высота и ширина реального числа отменяют значение Stretch, которое вместо этого будет выступать в качестве центрального значения. Некоторые элементы управления, такие как Button, переопределяют значение Stretch, заданное по умолчанию, в их базовом стиле.

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

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

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

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

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

Margin

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

• Значения полей могут быть унифицированными или различными. С помощью Margin="20" равномерный отступ в 20 пикселей будет применён к элементу слева, сверху, справа и снизу. При использовании Margin="0,10,5,25" значения применяются к левому, правому, верхнему и нижнему (в этом порядке).
• Поля являются аддитивными. Если два элемента задают равномерный отступ в 10 пикселей и являются соседними в любом направлении, расстояние между ними составляет 20 пикселей.
• Допустимы отрицательные поля. Однако использование отрицательного поля часто может вызвать вырезку или перезаписи элементов, поэтому отрицательные поля редко используются.
• Значения отступов ограничиваются в последнюю очередь, поэтому будьте осторожны с отступами, потому что контейнеры могут обрезать или ограничивать элементы. Значение Отступа может быть причиной того, что элемент не отображается; из-за применения Отступа размер элемента может быть ограничен до 0.

Набивочный материал

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

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

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

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

Пример

Рассмотрим эффекты 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 и применять Style к элементу управления. Это особенно верно, если необходимо применить одни и те же значения свойств ко многим элементам управления. Дополнительные сведения об использовании стилей см. в статье "Стили XAML".

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

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

Связанные темы

• FrameworkElement.Height
• FrameworkElement.Width
• FrameworkElement.HorizontalAlignment
• FrameworkElement.VerticalAlignment
• FrameworkElement.Margin
• Control.Padding