.NET MAUI Documentation

DockLayout

The DockLayout is a layout panel that allows you to dock child elements to the top, bottom, left, right, or fill the remaining space within the layout.

Overview

When arranging child elements, the DockLayout prioritizes elements docked to the edges (top, bottom, left, right) and then places the remaining element in the fill area. If multiple elements are docked to the same edge, they will be arranged sequentially along that edge.

Properties

The DockLayout itself doesn't expose many direct properties for arranging children, as the positioning is controlled by the Dock attached property set on each child element.

Attached Properties

The key to using DockLayout is the Dock attached property. This property can be set on any child element of a DockLayout to specify its position.

• Top: Docks the element to the top edge of the DockLayout.
• Bottom: Docks the element to the bottom edge of the DockLayout.
• Left: Docks the element to the left edge of the DockLayout.
• Right: Docks the element to the right edge of the DockLayout.
• Fill: The element docked as Fill will occupy all remaining space after the other docked elements have been positioned. There can only be one element set to Fill.

XAML Example

Here's a common scenario demonstrating how to use DockLayout with various dock positions:

<DockLayout xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                        x:Class="MyMauiApp.DockLayoutPage"
                        HeightRequest="300" >

                <Label Text="Top Banner"
                       DockLayout.Dock="Top"
                       BackgroundColor="LightBlue"
                       HorizontalOptions="Fill"
                       HeightRequest="50" />

                <Button Text="OK"
                        DockLayout.Dock="Bottom"
                        BackgroundColor="LightGreen"
                        HorizontalOptions="Center"
                        Margin="10" />

                <Label Text="Left Navigation"
                       DockLayout.Dock="Left"
                       BackgroundColor="LightCoral"
                       WidthRequest="100" />

                <Label Text="Right Sidebar"
                       DockLayout.Dock="Right"
                       BackgroundColor="LightYellow"
                       WidthRequest="120" />

                <Label Text="Main Content Area"
                       DockLayout.Dock="Fill"
                       BackgroundColor="LightGray"
                       Padding="10" />
            </DockLayout>

Visual Representation

The following is a visual representation of how the elements would be arranged in the XAML example above:

Considerations

• The order of elements in XAML matters for elements docked to the same edge. They will be stacked in the order they appear.
• If an element is not explicitly assigned a dock position, it will behave as if it were set to Fill. It's good practice to explicitly set the Dock property for clarity.
• DockLayout is useful for creating common UI patterns like headers, footers, sidebars, and main content areas.