Свойства размеров и позиционирования XAML-элементов

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

Свойства размеров и позиционироваться XAML-элементов

Свойства размеров XAML-элементов

В WPF за размеры элемента отвечают следующие свойства:

Среди этих свойств тройки свойств: Height, MinHeightиMaxHeight, а также Width, MinWidth и MaxWidth связаны между собой. Так, значения Height и Width не учитываются при построении макета приложения, если их значения выходят за пределы, установленные свойствами MinHeight/MaxHeight и MinWidth / MaxWidth соответственно.

Например, создадим новое приложение WPF и добавим на страницу MainWindow.xaml следующую кнопку:

<Button Height="30" Width="130" MaxHeight="20" MinHeight="10"/>

Здесь значение свойства Height выходит за пределы, установленные свойством MaxHeight, поэтому значение Height будет проигнорировано, а высота кнопки будет равна 20. Рассмотрим другой пример:

<Button Height="40" Width="130" MaxHeight="20" MinHeight="30"/>

здесь свойство MaxHeight меньше, чем MinHeight. Платформа WPF устанавливает высоту элемента следующим образом: начала проверяется значение MinHeight, затем MaxHeight и только, если значение Height находится в диапазоне значение между MinHeight и MaxHeight оно будет применено к элементу. В приведенном выше примере высота элемента будет установлена равной 30 так как возникает конфликт между MinHeight и MaxHeight, а MinHeight проверяется в первую очередь. Аналогичным образом выполняется и вычисление ширины элемента, а свойства ActualHeight и ActualWidth содержат установленную в итоге высоту или ширину элемента.

Единицы измерения размеров XAML-элементов

Свойства размеров XAML-элементов в WPF мы можем задавать, используя различные единицы измерения. По умолчанию, в WPF используют независимые от разрешения единицы (px) 1px = 1/96 дюйма. Также, могут использоваться следующие единицы измерения:

• in — дюймы; 1in = 96 пикселей
• cm — сантиметры; 1cm =(96/2.54) px
• pt — точки; 1pt=(96/72) px

Единицы измерения указываются сразу после значения (без использования пробела). Например,

<Button Content="Кнопка" Width="1in"/>

здесь ширина кнопки задана равной одному дюйму.

Свойства позиционирования XAML-элементов

Теперь рассмотрим основные свойства позиционирования XAML-элементов.

Свойства VerticalAlignment и HorizontalAlignment

Значением свойства HorizontalAlignment является перечисление, у которого определены следующие поля:

В свою очередь, свойство VerticalAlignment может принимать следующие значения:

Как и ширина, свойство высоты (Height) имеет приоритет над свойством VerticalAlignment

Свойства Margin и Padding

Чтобы продемонстрировать работу свойств Margin и Padding, изменим код MainWindow.xaml следующим образом:

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800"
        Background="Blue">
    <Grid>
        <Border Background="Red">
            <Button Content="Кнопка" HorizontalAlignment="Stretch" Height="40" Width="50"/>
        </Border>
        
    </Grid>
</Window>

Теперь наша кнопка находится внутри элемента Border (рамка) и, при этом, фон окна установлен как красный, а для рамки фон — синий. В визуальном редакторе это будет выглядеть следующим образом:
Так как для Border мы не устанавливали свойств размеров и позиционирования, то по умолчанию рамка растянулась на всё доступное пространство окна и мы не видим синюю заливку. Теперь уберем все свойства позиционирования и размеров для кнопки, чтобы она также растянулась на всё доступное пространство Border:

<Button Content="Кнопка"/>

Вначале продемонстрируем работу свойства Padding — это свойство устанавливает внутренние отступы. Например, изменим это свойство для Border следующим образом:

<Border Background="Red" Padding="30">
    <Button Content="Кнопка"/>
</Border>

Здесь мы установили для Border все четыре внутренних отступа (слева, сверху, снизу и справа) по 30 единиц. Теперь наше окно будет выглядеть вот так:

Теперь мы видим часть Border. Аналогичным образом мы можем установить внешние отступы, используя свойство Margin. Это приведет к тому, что сам элемент Border будет изменять свои размеры и мы увидим синюю заливку (фон окна). Например,

<Border Background="Red" Padding="30" Margin="50">
    <Button Content="Кнопка"/>
</Border>

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

<Border Background="Red" Padding="30" Margin="50,10,20,20">
    <Button Content="Кнопка"/>
</Border>

Здесь мы отдельно указали отступ слева, сверху, справа и снизу. В результате окно примет следующий вид:

Итого

По умолчанию XAML-элементы пытаются занять всё доступное пространство в контейнере так как их свойства HorizontalAlignment и VerticalAlignment имеют значение Stretch. При этом, мы можем управлять размерами и позиционированием элементов, используя свойства размеров и положения элемента внутри контейнера.