DevExpress Wrap Layout for .NET MAUI

• Nov 10, 2023

The DXWrapLayout control sequentially positions its nested child controls from left to right. The layout breaks content to the next line at the edge of the viewport if necessary.

Add a DXWrapLayout to the Page

The following example adds a DXWrapLayout and configures its settings:

XAML

<dx:DXWrapLayout ItemSpacing="20"
                 LineSpacing="20" Margin="20" 
                 ItemAlignment="Center"
                 Reverse="False" Wrap="Flex">
    <!-- Add items here. -->
</dx:DXWrapLayout>

Configure Layout’s Settings

The following list contains properties specific to the DXWrapLayout control:

ItemAlignment

Specifies how the layout control aligns its child items.

ItemSpacing

Specifies the amount of space between the DXWrapLayout‘s child items.

Reverse

Sets whether the layout control’s child controls are positioned in reversed order.

Wrap

Defines the wrap mode for items within the DXWrapLayout control.

• Regular - Items are wrapped - they are positioned in multiple lines if necessary.
• Flex - Items are wrapped and distributed evenly between layout rows or columns (depending on Orientation).
• NoWrap - Items are not wrapped - they are positioned in a single line.

LineAlignment

Specifies how the layout aligns item lines.

LineSpacing

Defines the gap between the DXWrapLayout child item lines.

Orientation

Sets the direction of child item flow.