Размеры и позиционирование элементов

Все элементы в Universal Windows Platform обладают рядом свойств, которые влияют на их компоновку и позиционирование внутри контейнера. Рассмотрим эти свойства.

Ширина и высота

Ширина элемента задается с помощью свойства Width, а высота - с помощью свойства Height. Эти свойства принимают значение типа double.

Однако если мы хотим получить размеры элемента во время выполнения, то лучше использовать свойства ActualHeight и ActualWidth вместо Height и Width.

Также мы можем задать возможный диапазон ширины и высоты с помощью свойств MinWidth/MaxWidth и MinHeight/MaxHeight. И при растяжении или сжатии контейнеров элементы с данными заданными свойствами не будут выходить за пределы установленных значений.

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

HorizontalAlignment

Свойство HorizontalAlignment позволяет выровнить элемент по горизонтали относительно правой или левой стороны контейнера и соответственно может принимать значения Left, Right, Center (положение по центру), Stretch (растяжение по всей ширине). Например:

<Grid>
    <Button Content="Left" Width="80" Height="30" HorizontalAlignment="Left" />
    <Button Content="Center" Width="80" Height="30" HorizontalAlignment="Center" />
    <Button Content="Right" Width="80" Height="30" HorizontalAlignment="Right" />
    <Button Content="Stretch" Height="30" HorizontalAlignment="Stretch" Margin="10 80 10 0" />
</Grid>

VerticalAlignment

VerticalAlignment устанавливает выравнивание по вертикали. Это свойство принимает следующие значения: Top (положение в верху контейнера), Bottom (положение внизу), Center (положение по центру), Stretch (растяжение по всей высоте). Например:

<Grid HorizontalAlignment="Center">
    <Button Content="Bottom" Width="80" Height="30" VerticalAlignment="Bottom" />
    <Button Content="Center" Width="80" Height="30" VerticalAlignment="Center" />
    <Button Content="Top" Width="80" Height="30" VerticalAlignment="Top" />
    <Button Content="Stretch" Width="80" VerticalAlignment="Stretch" Margin="100 10 0 10" />
</Grid>

Чтобы задать эти свойства в коде, нам надо использовать перечисления HorizontalAlignment и VerticalAlignment:

Button button1 = new Button();
button1.HorizontalAlignment = HorizontalAlignment.Center;
button1.VerticalAlignment = VerticalAlignment.Center;

Отступы margin и padding

Свойство Margin устанавливает отступы вокруг элемента. Его синтаксис:

Margin="левый_отступ верхний_отступ правый_отступ нижний_отступ"

Свойство Padding устанавливает отступы от границ элемента вокруг его содержимого. Имеет такой же синтаксис:

Padding="левый_отступ верхний_отступ правый_отступ нижний_отступ"

Например, установим отступы у одной кнопки слева и сверху, а у другой кнопки справа и снизу:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Button Content="15 10 0 0" Width="100" Height="30" Margin ="15 10 0 0"
        HorizontalAlignment="Left" VerticalAlignment="Top"/>
    <Button Content="0 0 20 10" Width="100" Height="30" Margin ="0 0 20 10"
        HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
</Grid>

В коде C# свойствам Margin и Padding соответствует объект Thickness:

Button button1 = new Button();
button1.Margin = new Thickness(15, 10, 0, 0);
button1.Padding = new Thickness(10, 10, 10, 10);