Контейнер StackPanel

StackPanel дуже схожа на WrapPanel, але має принаймні одну важливу відмінність: StackPanel не загортає вміст. Замість цього вона розтягує вміст в одному напрямку, дозволяючи вам складати елемент за елементом один на інший. Давайте спочатку спробуємо дуже простий приклад, так само, як ми це робили з WrapPanel:

<Window x:Class="WpfTutorialSamples.Panels.StackPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StackPanel" Height="160" Width="300">
	<StackPanel>
		<Button>Button 1</Button>
		<Button>Button 2</Button>
		<Button>Button 3</Button>
		<Button>Button 4</Button>
		<Button>Button 5</Button>
		<Button>Button 6</Button>
	</StackPanel>
</Window>

Перше, що слід запам'ятати - це те, що StackPanel не стежить за тим чи достатньо місця для вмісту. Він жодним чином не загортає свій вміст і не дає можливість його гортати, принаймні за умовчуванням (для цього можна використати елемент ScrollViewer - про нього детальніше в окремій статті).

Крім того, за умовчуванням, цей контейнер має вертикальну орієнтацію, на відміну від WrapPanel. Однак це так само легко можна змінити, використавши властивість Orientation:

<StackPanel Orientation="Horizontal">

Крім того слід пам'ятати, що StackPanel, за умовчуванням, розтягує дочірні елементи, в залежності від своєї орієнтації: горизонтально при вертикальній (приклад на початку) і навпаки (приклад над абзацом). Для цього контейнер змінює властивості HorizontalAlignment та VerticalAlignment цих елементів. Однак і цю поведінку можна перевантажити, задавши значення цих властивостей вручну, як тут:

<Window x:Class="WpfTutorialSamples.Panels.StackPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StackPanel" Height="160" Width="300">
	<StackPanel Orientation="Horizontal">
		<Button VerticalAlignment="Top">Button 1</Button>
		<Button VerticalAlignment="Center">Button 2</Button>
		<Button VerticalAlignment="Bottom">Button 3</Button>
		<Button VerticalAlignment="Bottom">Button 4</Button>
		<Button VerticalAlignment="Center">Button 5</Button>
		<Button VerticalAlignment="Top">Button 6</Button>
	</StackPanel>
</Window>

Ми використали значення Top, Center та Bottom, щоб розставити кнопки у формі візерунку. Те ж саме можна зробити і з вертикально орієнтованим контейнером StackPanel, змінивши значення властивості HorizontalAlignment:

<Window x:Class="WpfTutorialSamples.Panels.StackPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StackPanel" Height="160" Width="300">
	<StackPanel Orientation="Vertical">
		<Button HorizontalAlignment="Left">Button 1</Button>
		<Button HorizontalAlignment="Center">Button 2</Button>
		<Button HorizontalAlignment="Right">Button 3</Button>
		<Button HorizontalAlignment="Right">Button 4</Button>
		<Button HorizontalAlignment="Center">Button 5</Button>
		<Button HorizontalAlignment="Left">Button 6</Button>
	</StackPanel>
</Window>

Як ви бачите, елементи досі розміщуються з низу в верх. Однак замість того, щоб мати однакову ширину, кожен елемент вирівнюється по лівому чи правому краю або по центру.