Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DevExpress Dock Layout for .NET MAUI

The DXDockLayout control docks its nested child controls to sides of the layout.

DevExpress DockLayout for .NET MAUI

#Add a DXDockLayout to the Page

The following example adds a DXDockLayout to a page. Specify a child control’s attached DXDockLayout.Dock property to define the side to which the control is docked.

DXDockLayout - Control Overview

<dx:DXDockLayout>
    <dxe:TextEdit Text="Left" dx:DXDockLayout.Dock="Left"/>
    <dxe:TextEdit Text="Right" dx:DXDockLayout.Dock="Right"/>
    <dxe:TextEdit Text="Top" dx:DXDockLayout.Dock="Top"/>
    <dxe:TextEdit Text="Bottom" dx:DXDockLayout.Dock="Bottom"/>
    <dxe:TextEdit Text="None (center)"/>
</dx:DXDockLayout>

#Child Item Order

The resulting app layout depends on the order in which you set the DXDockLayout.Dock property for controls within DXDockLayout. The following animation demonstrates how the DXDockLayout control divides its available space to arrange its children:

#Configure Layout’s Settings

The following list contains properties specific for the DXDockLayout control:

HorizontalSpacing

Specifies horizontal spacing between DXDockLayout items.

DevExpress Layouts for .NET MAUI - DockLayout - HorizontalSpacing property in action

VerticalSpacing

Specifies vertical spacing between DXDockLayout items.

DevExpress Layouts for .NET MAUI - DockLayout - VerticalSpacing property in action

StretchLastItem

Defines whether the last added item occupies all the available remaining space within the layout.

DevExpress Layouts for .NET MAUI - DockLayout StretchLastItem property in action