Панель 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 с вертикальной ориентацией, но в котором у четвертой кнопки увеличена и ширина и высота:

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

Вот как он будет выглядеть:

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