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

Компоненты WPF обладают рядом свойств, позволяющих их позиционировать в различных контейнерах контейнерах (Grid, Canvas и т.д.). Рассмотрим некоторые из них.

Размеры компонента (Width, Height)

Для указания размеров компонента используются свойства Width (ширина) и Height (высота). Эти свойства могут указываться в различных единицах измерения — пикселях, дюймах, сантиметрах. Более подобно о типах размеров в WPF можно узнать здесь. По умолчанию, высота и ширина элемента указываются в пикселях. Например,

<Button Content="Кнопка" Width="100" Height="30"/>

Эта запись ширины и высоты кнопки эквивалентна следующей:

<Button Content="Кнопка" Width="100px" Height="30px"/>

Стоит отметить, что свойства ширины и высоты элементов указываются в виде числа с плавающей запятой (double), то есть вот такая запись будет вполне применима:

<Button Content="Кнопка" Width="20.9" Height="30.5"/>

Свойства выравнивания компонентов

Выравнивание по горизонтали (HorizontalAlignment)

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

Пример действия свойства HorizontalAlignment представлен ниже:

<Grid>
    <Button Content="1" Width="60" Height="20" HorizontalAlignment="Left"/>
    <Button Content="2" Width="60" Height="20" HorizontalAlignment="Right"/>
    <Button Content="3" Width="60" Height="20" HorizontalAlignment="Center"/>
    <Button Content="4" Height="20" HorizontalAlignment="Stretch" Margin="5,0,5,60"/>
</Grid>

Так как при задании значения HorizontalAlignment="Stretch"приоритет отдается свойствам ширины  и высоты элемента, то для четвертой кнопки мы не указывали значение Width, чтобы продемонстрировать влияние свойства HorizontalAlignment на выравнивание элемента внутри Grid.

Выравнивание по вертикали (VerticalAlignment)

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

Пример действия свойства VerticalAlignment представлен ниже:

<Grid>
    <Button Content="1" Height="20" Width="60"  VerticalAlignment="Top"/>
    <Button Content="2" Height="20" Width="60"  VerticalAlignment="Bottom"/>
    <Button Content="3" Height="20" Width="60"  VerticalAlignment="Center"/>
    <Button Content="4" Width="20" VerticalAlignment="Stretch" Margin="150,5,5,5"/>
</Grid>

Отступы (Margin)

Свойство Margin используется для задания отступов элемента от границ контейнера. Это свойство имеет следующий синтаксис:

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

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

<Grid>
    <Button Content="1" Height="20" Width="60"  VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10,5,0,0" />
    <Button Content="2" Height="20" Width="60"  VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,10,5"/>
</Grid>

Результат:

Существуют, также, сокращенные формы записи свойства Margin:

Margin="10"

Устанавливает все четыре значение свойства равными 10 пикселям.

Margin="10,5"

Устанавливает отступ слева (10px) и отступ сверху (5px).

Свойство Panel.ZIndex

Это свойство получает или устанавливает значения, определяющие порядок отображения элементов в плоскости z. Это свойство используется в том случае, если элементы интерфейса могут частично или полностью перекрывать друг друга. По умолчанию, это свойство равно нулю для создаваемых элементов. Чтобы продемонстрировать работу этого свойства, создадим три кнопки которые частично перекрывают друг друга:

<Grid>
    <Button Content="Первая" HorizontalAlignment="Left" Margin="130,104,0,0" VerticalAlignment="Top" Height="40" Width="75"/>
    <Button Content="Вторая" HorizontalAlignment="Left" Margin="175,117,0,0" VerticalAlignment="Top" Height="44" Width="85"/>
    <Button Content="Третья" HorizontalAlignment="Left" Margin="105,139,0,0" VerticalAlignment="Top" Height="48" Width="85"/>
</Grid>

Как можно видеть, каждый последующий элемент перекрывает предыдущие — вторая кнопка перекрывает первую, а третья — первую и вторую. Чтобы изменить прядок перекрытия (то самое отображение в z-плоскости) зададим кнопкам свои Z-индексы:

<Grid>
    <Button Panel.ZIndex="3" Content="Первая" HorizontalAlignment="Left" Margin="130,104,0,0" VerticalAlignment="Top" Height="40" Width="75"/>
    <Button Panel.ZIndex="2" Content="Вторая" HorizontalAlignment="Left" Margin="175,117,0,0" VerticalAlignment="Top" Height="44" Width="85"/>
    <Button Panel.ZIndex="1" Content="Третья" HorizontalAlignment="Left" Margin="105,139,0,0" VerticalAlignment="Top" Height="48" Width="85"/>
</Grid>

Мы, также, можем задать нескольким элементам один и тот же Z-индекс, тем самым разместив их на одном уровне — в этом случае порядок перекрытия элементов будет зависеть снова от порядка в котором созданы элементы:

<Grid>
    <Button Panel.ZIndex="3" Content="Первая" HorizontalAlignment="Left" Margin="130,104,0,0" VerticalAlignment="Top" Height="40" Width="75"/>
    <Button Panel.ZIndex="1" Content="Вторая" HorizontalAlignment="Left" Margin="175,117,0,0" VerticalAlignment="Top" Height="44" Width="85"/>
    <Button Panel.ZIndex="1" Content="Третья" HorizontalAlignment="Left" Margin="105,139,0,0" VerticalAlignment="Top" Height="48" Width="85"/>
</Grid>

Ограничение ширины и высоты элемента (MaxWidth, MaxHeight)

Хоть и не рекомендуется для элементов интерфейса устанавливать абсолютные размеры ширины и высоты, но не всегда и удобно, когда какой-либо элемент управления, например, кнопка, при увеличении размера окна растягивается во всю его ширину или высоту. Ограничить максимальную ширину и высоту элемента мы можем, используя свойства MaxWidth, MaxHeight. Например,

<Grid>
    <Button Content="Кнопка" MaxWidth="60" MaxHeight="30"/>
</Grid>

Теперь, как бы мы не изменяли размер окна, кнопка не станет более 60 пикселей в ширину и более 30 пикселей в высоту:

Итого

Свойства позиционирования элементов WPF — HorizontalAlignment, VerticalAlignment, Margin и Panel.ZIndex позволяют установить положение элемента относительно краев контейнера или расположение элемента в плоскости Z. Для установки размеров элемента могут использоваться свойства Width, Height, а для установки максимально возможных размеров — MaxWidth и MaxHeight.