Контейнер WrapPanel (обгортка)

Контейнер WrapPanel розміщає всі дочірні елементи один біля одного. Горизонтально (за умовчуванням) чи вертикально, якщо не має місця для горизонтального розміщення. Цей контейнер слід використовувати, якщо вам потрібен список елементів керування, який автоматично згортається при нестачі місця.

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

В першому прикладі ми створмо WrapPanel з орієнтацією за умовчуванням (горизонтальною):

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

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

Якщо ви зменшите вікно, а отже і доступний простір, то побачите, як контейнер підлаштує себе під нові обставини.

Вся ця поведінка працює і при вертикальній орієнтації. Ось такий самий приклад, як і попередній, однак із вертикальним контейнером WrapPanel:

<Window x:Class="WpfTutorialSamples.Panels.WrapPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WrapPanel" Height="120" Width="300">
	<WrapPanel Orientation="Vertical">
		<Button>Test button 1</Button>
		<Button>Test button 2</Button>
		<Button>Test button 3</Button>
		<Button Width="140">Test button 4</Button>
		<Button>Test button 5</Button>
		<Button>Test button 6</Button>
	</WrapPanel>
</Window>

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

Будь ласка, пам'ятайте що горизонтальний контейнер WrapPanel відповідатиме за однакову висоту в кожному рядку, а вертикальний відповідатиме за однакому ширину кожній колонці. При цьому горизонтальний WrapPanel не впливає на ширину, а вертикальний на висоту. Погляньте на цей приклад. Він містить вертикальний WrapPanel, однак четверта кнопка в ньому має специфічну висоту ТА ширину:

<Button Width="140" Height="44">Test button 4</Button>

Це виглядатиме, ось так:

Зауважте, що п'ята кнопка отримала ширину четвертої, однак її ширина залишилась незмінною. Хоча це призвело до того, що шосту кнопку довелось перенести в третю колонку.