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.
Get started with the .NET MAUI DockLayout using simple lines of XAML code, as demonstrated below. Also, explore our .NET MAUI DockLayout example to learn how to use different layout options.
<?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>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.
The ShouldExpandLastChild property allows the last child element in the DockLayout to occupy the remaining available space, making it easier to create fill-style UIs without manual calculations.
The DockLayout allows users to configure spacing between child elements using the HorizontalSpacing and VerticalSpacing properties for precise control of layout aesthetics.
The .NET MAUI DockLayout control supports right-to-left layouts to mirror its docking logic automatically.
60+ UI controls
200+ interactive .NET MAUI demos
1.3M+ downloads
Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion® is proud to hold the following industry awards.
