WrapPanel Layout

Children flow along one axis and wrap to a new line when they reach the bound.

Overview

WrapPanel lays children out one after another at their own preferred size and starts a new line as soon as the next child would cross the panel's bound. Horizontal flow fills a row left to right and wraps downward; vertical flow fills a column top to bottom and wraps rightward. It is what you want for a tag list, a palette of chips, or a toolbar that should re-flow when the terminal is resized rather than truncate.

Every child in a line is given that line's cross-axis extent — the tallest child in a horizontal row, the widest in a vertical column — so a line reads as a line instead of a ragged edge. Two rules keep it honest at the bound: a child bigger than the whole panel is clamped to the panel rather than wrapping forever hunting for room that does not exist, and a line that starts past the far edge is given zero extent so its children are skipped rather than drawn outside the panel. A line that only partly fits is truncated to what is left.

Properties

Property	Type	Default	Description
Orientation	Orientation	Horizontal	`Horizontal` flows right and wraps down; `Vertical` flows down and wraps right.
Background	Color?	null	Inherited from `Panel`.

<!-- Horizontal: flows right, wraps down -->
<WrapPanel Orientation="Horizontal">
    <Border Width="22" Height="3" Background="#5F0000" />
    <Border Width="22" Height="3" Background="#00005F" />
    <Border Width="22" Height="3" Background="#005F00" />
    <Border Width="22" Height="3" Background="#5F5F00" />
</WrapPanel>

<!-- Mixed sizes: every child in a line gets the line's height -->
<WrapPanel>
    <Border Width="24" Height="2" />
    <Border Width="28" Height="4" />    <!-- makes the line 4 tall -->
    <Border Width="22" Height="1" />
</WrapPanel>

<!-- Vertical: flows down, wraps right -->
<WrapPanel Orientation="Vertical">
    <Border Width="16" Height="2" />
    <Border Width="16" Height="2" />
    <Border Width="16" Height="2" />
</WrapPanel>

Key Concepts

Orientation: Horizontal (default) or Vertical
Children keep their own preferred size along the flow axis; the panel does not stretch them
A line's cross-axis extent is its largest child, and every child in the line gets it
A child larger than the panel is clamped to the panel rather than wrapping forever
Lines past the far edge are truncated, then skipped — nothing is ever drawn outside the panel
Visibility="Collapsed" takes no room in the flow and the children after it close the gap; Hidden flows normally and paints as background