Выравнивание и поля

WPF --- Основа WPF --- Выравнивание и поля

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

Чтобы понять, как работают эти свойства, еще раз взглянем на простую панель StackPanel, показанную на рисунке. В этом примере — StackPanel с вертикальной ориентацией — свойство VerticalAlignment не имеет эффекта, потому что каждый элемент получает такую высоту, которая ему нужна, и не более. Однако свойство HorizontalAlignment является важным. Оно определяет место, где располагается каждый элемент в строке:

<StackPanel>
        <Label Content="Example"></Label>
        <Button>Button 1</Button>
        <Button>Button 2</Button>
        <Button>Button 3</Button>
        <Button>Button 4</Button>
    </StackPanel>

Обычно HorizontalAlignment по умолчанию равно Left для меток и Stretch — для кнопок. Вот почему каждая кнопка целиком занимает ширину колонки. Эти детали можно изменять:

<StackPanel>
        <Label Content="Example" HorizontalAlignment="Center"></Label>
        <Button HorizontalAlignment="Right">Button 1</Button>
        <Button HorizontalAlignment="Left">Button 2</Button>
        <Button>Button 3</Button>
        <Button>Button 4</Button>
    </StackPanel>

Первые две кнопки получают минимальные размеры и соответствующим образом выровнены, в то время как две нижние кнопки растянуты на всю StackPanel. Изменив размер окна, вы увидите, что метка остается в середине, а первые две кнопки будут прижаты каждая к своей стороне.

StackPanel также имеет собственные свойства HorizontalAlignment и VerticalAlignment. По умолчанию оба они установлены в Stretch, и потому StackPanel заполняет свой контейнер полностью. В данном примере это значит, что StackPanel заполняет окно. Если используются другие установки, максимальный размер StackPanel будет определяться самым широким элементом управления, содержащимся в нем.

Поля

В текущей форме примера StackPanel присутствует очевидная проблема. Хорошо спроектированное окно должно содержать не только элементы; оно также содержит немного дополнительного пространства между элементами. Чтобы ввести это дополнительное пространство и сделать пример StackPanel менее сжатым, можно установить поля вокруг элементов управления.

При установке полей допускается указание одинаковой ширины для всех сторон, как показано ниже:

<Button Margin="5">Button 3</Button>

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

<Button Margin="5,10,5,10">Button 3</Button>

В коде поля устанавливаются с применением структуры Thickness:

cmd.Margin = new Thickness(5);

Определение правильных полей вокруг элементов управления — отчасти искусство, потому что необходимо учитывать, каким образом установки полей для соседних элементов управления влияют друг на друга. Например, если есть две кнопки, уложенные одна на другую, и верхняя кнопка имеет нижнее поле размером 5, а нижняя кнопка — верхнее поле размером 5, то между двумя кнопками получится пространство в 10 единиц.

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

<StackPanel Margin="5">
        <Label Content="Example" HorizontalAlignment="Center" Margin="5"></Label>
        <Button HorizontalAlignment="Right" Margin="5">Button 1</Button>
        <Button HorizontalAlignment="Left" Margin="5">Button 2</Button>
        <Button Margin="5">Button 3</Button>
        <Button Margin="5">Button 4</Button>
    </StackPanel>

Таким образом, общее пространство между двумя кнопками (сумма полей двух кнопок) получается таким же, как общее пространство между кнопкой и краем окна (сумма поля кнопки и поля StackPanel):