Контейнеры в WPF. StackPanel

Контейнер WPF StackPanel используется для того, чтобы разместить все элементы управления в каком-то одном из двух измерений — по вертикали или по горизонтали.

Свойства StackPanel

Контейнер StackPanel предоставляет нам следующие свойства для позиционирования элементов управления:

Пример использования StackPanel

По умолчанию, все элементы внутри StackPanel располагаются вертикально сверху вниз. Например, ниже  представлен код XAML в котором используется StackPanel с расположенными внутри девятью элементами Border:

<Window x:Class="WpfApp2.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:WpfApp2"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel>
         <Border BorderBrush="Blue" BorderThickness="1" Background="Blue" Width="200" Height="50"/>
         <Border BorderBrush="Blue" BorderThickness="1" Background="White" Width="200" Height="50"/>
         <Border BorderBrush="Blue" BorderThickness="1" Background="Red" Width="200" Height="50"/>
         <Border BorderBrush="Blue" BorderThickness="1" Background="Yellow" Width="200" Height="50"/>
         <Border BorderBrush="Blue" BorderThickness="1" Background="Green" Width="200" Height="50"/>
         <Border BorderBrush="Blue" BorderThickness="1" Background="Aqua" Width="200" Height="50"/>
         <Border BorderBrush="Blue" BorderThickness="1" Background="Black" Width="200" Height="50"/>
         <Border BorderBrush="Blue" BorderThickness="1" Background="Brown" Width="200" Height="50"/>
         <Border BorderBrush="Blue" BorderThickness="1" Background="#FFCE2389" Width="200" Height="50"/>
    </StackPanel>
</Window>

Чтобы поменять способ расстановки элементов внутри StackPanel на горизонтальный, необходимо использовать свойство StackPanel Orientation:

<Window x:Class="WpfApp2.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:WpfApp2"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel Orientation="Horizontal">
         <Border BorderBrush="Blue" BorderThickness="1" Background="Blue" Width="200" Height="50"/>
         <Border BorderBrush="Blue" BorderThickness="1" Background="White" Width="200" Height="50"/>
         <Border BorderBrush="Blue" BorderThickness="1" Background="Red" Width="200" Height="50"/>
         <Border BorderBrush="Blue" BorderThickness="1" Background="Yellow" Width="200" Height="50"/>
         <Border BorderBrush="Blue" BorderThickness="1" Background="Green" Width="200" Height="50"/>
         <Border BorderBrush="Blue" BorderThickness="1" Background="Aqua" Width="200" Height="50"/>
         <Border BorderBrush="Blue" BorderThickness="1" Background="Black" Width="200" Height="50"/>
         <Border BorderBrush="Blue" BorderThickness="1" Background="Brown" Width="200" Height="50"/>
         <Border BorderBrush="Blue" BorderThickness="1" Background="#FFCE2389" Width="200" Height="50"/>
    </StackPanel>
</Window>

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

Выравнивание элементов по горизонтали и вертикали

В рассмотренных выше примерах все элементы внутри StackPanel располагались строго по центру. Для выравнивания элементов внутри контейнера используются свойства VerticalAlignment и HorizontalAlignment.

Свойство VerticalAlignment

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

StackPanel Orientation="Horizontal" VerticalAlignment="Center"

StackPanel Orientation="Horizontal" VerticalAlignment="Bottom"

StackPanel Orientation="Horizontal" VerticalAlignment="Top"

Свойство HorizontalAlignment

Свойство HorizontalAlignment может принимать следующие значения: Center, Left, Right, Stretch. Несколько различных вариантов выравнивания элементов внутри StackPanel с использованием HorizontalAlignment представлены ниже:

StackPanel Orientation="Vertical" HorizontalAlignment="Center"

StackPanel Orientation="Vertical" HorizontalAlignment="Left"

StackPanel Orientation="Vertical" HorizontalAlignment="Right"

Упорядочивание элементов

При горизонтальной раскладке элементов в StackPanel все элементы внутри контейнера располагаются слева на право. Например,

Чтобы поменять порядок расположения элементов внутри StackPanel, используется свойство FlowDirection, которое, по умолчанию имеет значение LeftToRight. Если поменять значение этого свойства на значение RightToLeft, то элементы внутри контейнера будут расположены в обратном порядке, то есть справа на лево:

StackPanel Orientation="Horizontal" FlowDirection="RightToLeft"

Итого

Компонент WPF StackPanel — это контейнер, в котором элементы управления располагаются либо по горизонтали, либо по вертикали. Элементы могут выравниваться с использованием свойств VerticalAlignment и HorizontalAlignment. Для изменения порядка расположения элементов внутри StackPanel используется свойство FlowDirection.