Skip to main content

WrapPanel

The WrapPanel uses a default arrangement of (multiple) child elements is in sequence from left to right, while they fit in the width. It starts a new line when there is no space left (including any margins and borders).

When the orientation property is set to vertical, the arrangement is top to bottom with a new column started when there is no more height remaining.

Useful Properties​

You will probably use these properties most often:

PropertyDescription
OrientationChange the direction of the arrangement flow.

Examples​

Example 1: Default arrangement​

<WrapPanel xmlns="https://github.com/avaloniaui"
           ItemSpacing="20" LineSpacing="20"
           Margin="20">
    <Rectangle Fill="Navy" Width="80" Height="80" />
    <Rectangle Fill="Yellow" Width="80" Height="80" />
    <Rectangle Fill="Green" Width="80" Height="80" />
    <Rectangle Fill="Red" Width="80" Height="80" />
    <Rectangle Fill="Purple" Width="80" Height="80" />
</WrapPanel>
Preview
Loading Avalonia Preview...

Example 2: Vertical arrangement​

<WrapPanel xmlns="https://github.com/avaloniaui"
           Orientation="Vertical"
           ItemSpacing="20" LineSpacing="20"
           Margin="20">
    <Rectangle Fill="Navy" Width="80" Height="80" />
    <Rectangle Fill="Yellow" Width="80" Height="80" />
    <Rectangle Fill="Green" Width="80" Height="80" />
    <Rectangle Fill="Red" Width="80" Height="80" />
    <Rectangle Fill="Purple" Width="80" Height="80" />
</WrapPanel>
Preview
Loading Avalonia Preview...

More Information​

info

For the complete API documentation about this control, see here.

info

View the source code on GitHub WrapPanel.cs

Discussion

Have questions or feedback? Join the conversation below.

On this page