Implementing .NET MAUI DockLayout
Guide users to implement Syncfusion .NET MAUI DockLayout (SfDockLayout), a versatile layout control that enables developers to arrange and dock child elements to specific edges (top, bottom, left, right) or center, providing a robust framework for designing complex user interfaces in mobile and desktop applications.
When to Use This Skill
Use this skill when users need to:
- Create docking layouts with elements positioned at specific edges
- Build dashboard interfaces with multiple regions (header, footer, sidebar, content)
- Implement adaptive layouts that respond to screen sizes and orientations
- Position UI elements at top, bottom, left, right, or center of a container
- Configure spacing between docked elements (horizontal and vertical)
- Control last child expansion to fill remaining space
- Support Right-to-Left (RTL) layouts for internationalization
- Work with .NET MAUI applications using Syncfusion components
Component Overview
The SfDockLayout control provides:
- Flexible Docking: Dock children to Top, Bottom, Left, Right, or None (center)
- Adaptive Layouts: Automatically adapts to various screen sizes and orientations
- Customizable Spacing: Configure horizontal and vertical spacing between elements
- Last Child Expansion: Option to expand the last child to fill remaining space
- RTL Support: Full Right-to-Left layout support for internationalization
- Programmatic Control: GetDock() and SetDock() methods for runtime manipulation
Documentation and Navigation Guide
Getting Started
📄 Read: references/getting-started.md
- Installing Syncfusion.Maui.Core NuGet package
- Registering Syncfusion Core handler
- Creating and initializing SfDockLayout
- Setting basic dock positions for child elements
- Complete working example with all dock positions
Docking Features
📄 Read: references/docking-features.md
- Dock position options (Top, Bottom, Left, Right, None)
- Using Dock attached property in XAML
- Using Add() method with Dock parameter in C#
- GetDock() method to retrieve current position
- SetDock() method to change position programmatically
- Docking order and element layering
Spacing and Layout
📄 Read: references/spacing-layout.md
- HorizontalSpacing property for gaps between elements
- VerticalSpacing property for vertical gaps
- ShouldExpandLastChild property behavior
- Controlling last child expansion (true/false)
- Layout scenarios and best practices
Advanced Features
📄 Read: references/advanced-features.md
- Right-to-Left (RTL) layout support
- FlowDirection property configuration
- Adaptive layouts for different screen sizes
- Handling orientation changes
- Sample projects and resources