mcpField
S
syncfusion-maui-docklayout

syncfusion-maui-docklayout

github.com/syncfusionDesign & UI61204 installsUpdated 2w ago
Repository

About syncfusion-maui-docklayout

A skill for implementing Syncfusion’s SfDockLayout in .NET MAUI applications. It explains arranging child elements around a container and configuring spacing, expansion, and RTL behavior.

Key features

  1. 01Docking to edges or center
  2. 02Horizontal and vertical spacing
  3. 03Last-child expansion control
  4. 04Runtime dock-position changes
  5. 05RTL and adaptive layouts

Use cases

  1. 01Building dashboards with headers and sidebars
  2. 02Arranging content across screen orientations
  3. 03Changing element positions at runtime

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/syncfusion/maui-ui-components-skills --skill syncfusion-maui-docklayout

After installing, type/syncfusion-maui-docklayoutin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
advanced-features.md
docking-features.md
getting-started.md
spacing-layout.md

Details

From the project README

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

Comments

Markdown supported