Class SfDockLayout

Arranges child elements using a docking pattern, allowing a flexible layout design.

Inheritance

System.Object

SfDockLayout

Namespace: Syncfusion.Maui.Core

Assembly: Syncfusion.Maui.Core.dll

Syntax

public class SfDockLayout : Layout

Remarks

The SfDockLayout allows positioning of child elements by docking them to the container.

Docking Positions

Use the Dock property to determine where to position child elements: Top, Bottom, Left, Right, or None.

MainPage.xaml
MainPage.xaml.cs

<dx:SfDockLayout>
  <Label Text="Top Docked"
         dx:SfDockLayout.Dock="Top"
         BackgroundColor="LightBlue"/>

  <Label Text="Bottom Docked"
         dx:SfDockLayout.Dock="Bottom"
         BackgroundColor="LightCoral"/>

  <Label Text="Left Docked"
         dx:SfDockLayout.Dock="Left"
         BackgroundColor="LightGreen"/>

  <Label Text="Right Docked"
         dx:SfDockLayout.Dock="Right"
         BackgroundColor="LightGoldenrodYellow"/>

  <Label Text="Fill Remaining"
         dx:SfDockLayout.Dock="None"
           BackgroundColor="LightGray"/>
</dx:SfDockLayout>

SfDockLayout dockLayout = new SfDockLayout();

 Label topLabel = new Label() { Text = "Top Docked", BackgroundColor = Colors.LightBlue };
 SfDockLayout.SetDock(topLabel, Dock.Top);
 dockLayout.Children.Add(topLabel);

 Label bottomLabel = new Label() { Text = "Bottom Docked", BackgroundColor = Colors.LightCoral };
 SfDockLayout.SetDock(bottomLabel, Dock.Bottom);
 dockLayout.Children.Add(bottomLabel);

 Label leftLabel = new Label() { Text = "Left Docked", BackgroundColor = Colors.LightGreen };
 SfDockLayout.SetDock(leftLabel, Dock.Left);
 dockLayout.Children.Add(leftLabel);

  Label rightLabel = new Label() { Text = "Right Docked", BackgroundColor = Colors.LightGoldenrodYellow };
  SfDockLayout.SetDock(rightLabel, Dock.Right);
  dockLayout.Children.Add(rightLabel);

  Label fillLabel = new Label() { Text = "Fill Remaining", BackgroundColor = Colors.LightGray };
  SfDockLayout.SetDock(fillLabel, Dock.None);
  dockLayout.Children.Add(fillLabel);

  this.Content = dockLayout;

Constructors

SfDockLayout()

Declaration

public SfDockLayout()

Fields

DockProperty

Identifies the Dock attached property for a View, determining the docking position of a child view within the SfDockLayout, such as None, Left, Top, Right, or Bottom.

Declaration

public static readonly BindableProperty DockProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

HorizontalSpacingProperty

Sets the HorizontalSpacing between the docked views in the layout.

Declaration

public static readonly BindableProperty HorizontalSpacingProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

ShouldExpandLastChildProperty

Determines whether the last child in the layout should automatically expand to fill the remaining space. The default value is true.

Declaration

public static readonly BindableProperty ShouldExpandLastChildProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

VerticalSpacingProperty

Sets the VerticalSpacing between the docked views in the layout.

Declaration

public static readonly BindableProperty VerticalSpacingProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Properties

HorizontalSpacing

Gets or sets the horizontal gap between child elements within the layout.

Declaration

public double HorizontalSpacing { get; set; }

Property Value

Type	Description
System.Double	A System.Double value that specifies the spacing between elements horizontally. The default value is `0`.

Remarks

This property controls the amount of horizontal space between elements in the layout.
It helps manage consistent spacing and alignment, particularly when creating adaptive UIs.

<dx:SfDockLayout HorizontalSpacing="10">
</dx:SfDockLayout>

SfDockLayout dockLayout = new SfDockLayout(){ HorizontalSpacing = 10 };

ShouldExpandLastChild

Gets or sets a value indicating whether the last visible child in the SfDockLayout should expand to fill the remaining available space.

Declaration

public bool ShouldExpandLastChild { get; set; }

Property Value

Type	Description
System.Boolean	A System.Boolean value that determines whether the last child expands to occupy unused layout space. The default value is `true`.

Remarks

When set to true, any unoccupied space in the layout is automatically assigned to the last visible child.
This is useful for creating responsive and adaptive layouts that scale gracefully to different screen sizes.

Examples

MainPage.xaml
MainPage.xaml.cs

<dx:SfDockLayout ShouldExpandLastChild="True">
    <Label Text="Header" dx:SfDockLayout.Dock="Top" />
    <Label Text="Footer" dx:SfDockLayout.Dock="Bottom" />
    <Label Text="Sidebar" dx:SfDockLayout.Dock="Left" />
    <Label Text="Content Area" />
</dx:SfDockLayout>

SfDockLayout dockLayout = new SfDockLayout(){ ShouldExpandLastChild = true };
dockLayout.Children.Add(new Label { Text = "Header" }, Dock.Top);
dockLayout.Children.Add(new Label { Text = "Footer" }, Dock.Bottom);
dockLayout.Children.Add(new Label { Text = "Sidebar" }, Dock.Left);
dockLayout.Children.Add(new Label { Text = "Content Area" });

VerticalSpacing

Gets or sets the vertical gap between child elements within the layout.

Declaration

public double VerticalSpacing { get; set; }

Property Value

Type	Description
System.Double	A System.Double value that specifies the spacing between elements vertically. The default value is `0`.

Remarks

This property controls the amount of vertical space between elements in the layout.
It ensures proper visual separation and improves the readability and usability of the interface.

Examples

MainPage.xaml
MainPage.xaml.cs

<dx:SfDockLayout VerticalSpacing="8">
</dx:SfDockLayout>

SfDockLayout dockLayout = new SfDockLayout(){ VerticalSpacing = 8 };

Methods

CreateLayoutManager()

Initializes a layout manager to control the arrangement of children within a DockLayout.

Declaration

protected override ILayoutManager CreateLayoutManager()

Returns

Type	Description
Microsoft.Maui.Layouts.ILayoutManager	An instance of SfDockLayoutManager to manage layout logic.

GetDock(BindableObject)

Retrieves the docking position for a specified view within the layout.

Declaration

public static Dock GetDock(BindableObject view)

Parameters

Type	Name	Description
Microsoft.Maui.Controls.BindableObject	view	The targeted child view for docking evaluation.

Returns

Type	Description
Dock	The current docking position of the child view.

SetDock(BindableObject, Dock)

Assigns a specific docking position to a child element within the layout.

Declaration

public static void SetDock(BindableObject view, Dock position)

Parameters

Type	Name	Description
Microsoft.Maui.Controls.BindableObject	view	The targeted child view for docking adjustment.
Dock	position	The designated docking position to assign.