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

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

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

Ниже представлен пример использования WrapPanel, в котором элементы расположены по горизонтали:

<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="300" Width="400">
    <WrapPanel Orientation="Horizontal">
        <Border BorderBrush="Blue" BorderThickness="1" Background="Blue" Width="100" Height="50"/>
        <Border BorderBrush="Blue" BorderThickness="1" Background="White" Width="100" Height="50"/>
        <Border BorderBrush="Blue" BorderThickness="1" Background="Red" Width="100" Height="50"/>
        <Border BorderBrush="Blue" BorderThickness="1" Background="Yellow" Width="100" Height="50"/>
    </WrapPanel>
</Window>

При запуске приложения мы увидим, что все элементы расположились в одной строке:

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

Аналогичным образом WrapPanel работает и в случае расположения элементов по вертикали, только, в этом случае, элементы будут переноситься в новы столбцы. Например,

<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="275" Width="400">
    <WrapPanel Orientation="Vertical" >
         <Border BorderBrush="Blue" BorderThickness="1" Background="Blue" Width="100" Height="50"/>
        <Border BorderBrush="Blue" BorderThickness="1" Background="White" Width="100" Height="50"/>
        <Border BorderBrush="Blue" BorderThickness="1" Background="Red" Width="100" Height="50"/>
        <Border BorderBrush="Blue" BorderThickness="1" Background="Yellow" Width="100" Height="50"/>
    </WrapPanel>
</Window>

Результат:

Теперь уменьшим высоту окна так, чтобы последнему элементу внутри контейнера не хватило места:

Итого

Компонент WrapPanel по своим свойствам похож на рассмотренный ранее контейнер StackPanel. Основное отличие WrapPanel от StackPanel заключается в том, что WrapPanel переносит элементы на новую строку или в новый столбец (в зависимости от варианта размещения элементов), если элементу не хватает места, чтобы полностью уместиться в контейнере.