Users can position and align child elements efficiently.
Support for various configurations such as spacing and ShouldExpandLastChild.
Suitable for creating complex, responsive layouts.

.NET 10 support now available

Trusted by the world’s leading companies

Overview

The .NET MAUI DockLayout is a flexible layout container that allows UI elements to be docked to the top, bottom, left, or right edges of the container, or fill the remaining space. This layout is perfect for creating structured, adaptive user interfaces across devices.

.NET MAUI DockLayout Code Example

Easily get started with the .NET MAUI DockLayout using a few simple lines of XAML code example as demonstrated below. Also, explore our .NET MAUI DockLayout Example that shows you how to render and configure the .NET MAUI DockLayout.

xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:sf="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
             x:Class="DockLayoutGettingStarted.MainPage">
    <ContentPage.Content>
        <sf:SfDockLayout Margin="20">
            <Label Text="Left" WidthRequest="80" sf:SfDockLayout.Dock="Left" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Background="#a8e6af" />
            <Label Text="Top" HeightRequest="80" sf:SfDockLayout.Dock="Top" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Background="#a8e6cf" />
            <Label Text="Right"  WidthRequest="80"  sf:SfDockLayout.Dock="Right" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Background="#e0a8e6" />
            <Label Text="Bottom" HeightRequest="80"  sf:SfDockLayout.Dock="Bottom" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Background="#e6a8a8"/>
            <Label Text="None" MinimumHeightRequest="80" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="#dcefd8" />
        </sf:SfDockLayout>
    </ContentPage.Content>
</ContentPage>

Dock position

This control allows elements to be docked to specific edges of the layout container: top, bottom, left, or right. They can also fill the remaining space.

Set dock position for child views documentation

Dock position in .NET MAUI.

Expanding last child element in .NET MAUI DockLayout.

Should expand last child

The ShouldExpandLastChild property allows the last child element in the Dock Layout to occupy the remaining available space, making it easier to create fill-style UIs without manual calculations.

Expand last child documentation

Spacing

The DockLayout allows users to configure spacing between child elements using the HorizontalSpacing and VerticalSpacing properties for precise control of layout aesthetics.

Spacing documentation

Spacing in .NET MAUI DockLayout.

Right to left language demonstrated in .NET MAUI DockLayout.

Right-to-Left (RTL)

The .NET MAUI Dock Layout control supports right-to-left layouts to mirror its docking logic automatically.

Right to Left documentation

Our comprehensive competitor comparison of .NET MAUI controls will guide you to the perfect choice.

95+ UI controls

200+ interactive .NET MAUI demos

1.7M+ downloads

Explore Complete .NET MAUI Comparison

Not sure how to create your first .NET MAUI DockLayout? Our documentation can help.

I’d love to read it now

Frequently Asked Questions

✅ Why should you choose the Syncfusion .NET MAUI DockLayout control?

The Syncfusion .NET MAUI DockLayout provides the following features:

Dock elements to specific edges of the layout container: top, bottom, left, or right.
Configure spacing between child elements using the HorizontalSpacing and VerticalSpacing properties.
Create structured, adaptive user interfaces across devices.
Simple configuration and API.
Supports all modern browsers.
Expansive learning resources such as demos and documentation to let you get started quickly with the .NET MAUI DockLayout.

✅ Where can I find the Syncfusion .NET MAUI DockLayout demo?

You can find our .NET MAUI DockLayout demo, which demonstrates how to render and configure the DockLayout.

✅ Can I download and utilize the Syncfusion .NET MAUI DockLayout for free?

No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue, 5 or fewer developers, and 10 or fewer total employees.

✅ How do I get started with Syncfusion .NET MAUI DockLayout control?

A good place to start would be our comprehensive getting started documentation.

.NET MAUI DataViz & UI Controls

GRIDS

DataGrid

DATA VISUALIZATION

LAYOUT

CALENDARS

NAVIGATION

VIEWER

Markdown Viewer PREVIEW

EDITORS

BUTTONS

SLIDERS

NOTIFICATION

MISCELLANEOUS

CONVERSATIONAL UI

PROJECT MANAGEMENT

Kanban Board

TOOLBAR

Toolbar

Our Customers Love Us

Having an excellent set of tools and a great support team, Syncfusion^® reduces customers’ development time.
Here are some of their experiences.

Using the MAUI Components to improve the quality of our software offerings

The ease of use and documentation to get us going. Our customer have also given us good feedback on the components.

Philip D,

Operations Director, Small-Business

Migration Xamarin to MAUI

Clarity with MAUI upgrade and completeness as related to Xamarin as the predecessor.

Edward J R,

President, Small-Business

See Real Success Stories

Developers around the world trust Syncfusion’s Essential Studio to simplify complex projects and speed up delivery. With a vast library of UI controls, powerful SDKs, and reliable support, Essential Studio helps teams build enterprise-ready applications with confidence.

Explore Case Studies

Industry

Software development

75%Cost reduction

50%Faster development

“If somebody is looking for a great tool to work with? Yes. I would definitely recommend Syncfusion for anyone who is trying to develop something meaningful.”

- Somnath Maji (Founder of Igniatek Consultancy)

Read Story