syncfusion-winforms-border-layout

Q: How do I install syncfusion-winforms-border-layout?

Run npx skills add https://github.com/syncfusion/winforms-ui-components-skills --skill syncfusion-winforms-border-layout in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-winforms-border-layout/ (personal) or .claude/skills/syncfusion-winforms-border-layout/ (project).

by syncfusionFrontend & Design

Implement Syncfusion Windows Forms BorderLayout to arrange child controls along borders (North, South, East, West) and center. Use this when working with BorderLayout, positioning controls in border regions, using docking alternatives, or configuring container layout and control spacing in Windows Forms applications.

Installs: 78
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/syncfusion/winforms-ui-components-skills --skill syncfusion-winforms-border-layout

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads syncfusion-winforms-border-layout automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Implementing Syncfusion Windows Forms BorderLayout

BorderLayout is a Windows Forms layout manager that allows you to arrange and layout child controls along the borders (North, South, East, West) to the center, similar to .NET framework's built-in docking support. Unlike automatic layout managers, BorderLayout gives you explicit control over positioning.

When to Use This Skill

Layout with border regions: When you need to arrange controls along borders and a center area
Top/bottom headers/footers: When you want a fixed header (North) and footer (South) with content in between
Left/right sidebars: When you need a sidebar panel on the left or right with main content in the center
Spacing control: When you need precise spacing between controls using HGap and VGap
Designer or code-based layouts: Whether building UI in designer or programmatically in C#/VB.NET
Alternative to docking: When you want a more structured approach than Windows Forms docking

Component Overview

Key Features:

5-position layout: North, South, East, West, Center positions for child controls
Spacing configuration: Customize horizontal (HGap) and vertical (VGap) gaps between controls
Designer support: Add BorderLayout and child controls via Visual Studio designer
Code-based creation: Programmatically create and configure BorderLayout in C# or VB.NET
Container control: Set any control (typically a Form) as the container for BorderLayout

Documentation Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Assembly and NuGet package setup
Creating BorderLayout in designer
Creating BorderLayout via code (C# and VB.NET)
Adding child controls
Container setup

Positioning Controls

📄 Read: references/positioning-controls.md

Setting control positions (North, South, East, West, Center)
SetPosition() method usage
BorderPosition enumeration
Multiple controls at the same position
Code examples for each position
Common position configurations

Spacing Configuration

📄 Read: references/spacing-configuration.md

HGap property (horizontal spacing)
VGap property (vertical spacing)
Setting spacing in designer
Setting spacing in code (C# and VB.NET)
Responsive spacing patterns

Layout Patterns

📄 Read: references/layout-patterns.md

Common layouts (header/footer, sidebars, multi-panel)
Best practices and patterns
Responsive considerations
When to use BorderLayout vs other approaches
Complete working examples

Quick Start

Here's a minimal BorderLayout setup:

using Syncfusion.Windows.Forms.Tools;

// In your form
BorderLayout borderLayout1 = new BorderLayout();
this.borderLayout1.ContainerControl = this;

// Add controls
ButtonAdv topButton = new ButtonAdv() { Text = "Header", Dock = DockStyle.Top };
ButtonAdv leftButton = new ButtonAdv() { Text = "Sidebar", Dock = DockStyle.Left };
ButtonAdv centerButton = new ButtonAdv() { Text = "Content", Dock = DockStyle.Fill };

this.Controls.Add(topButton);
this.Controls.Add(leftButton);
this.Controls.Add(centerButton);

// Set positions
borderLayout1.SetPosition(topButton, BorderPosition.North);
borderLayout1.SetPosition(leftButton, BorderPosition.West);
borderLayout1.SetPosition(centerButton, BorderPosition.Center);

// Configure spacing
borderLayout1.HGap = 10;
borderLayout1.VGap = 10;

VB.NET Equivalent:

Imports Syncfusion.Windows.Forms.Tools

' In your form
Dim borderLayout1 As BorderLayout = New BorderLayout()
Me.borderLayout1.ContainerControl = Me

' Add controls
Dim topButton As ButtonAdv = New ButtonAdv() With {.Text = "Header", .Dock = DockStyle.Top}
Dim leftButton As ButtonAdv = New ButtonAdv() With {.Text = "Sidebar", .Dock = DockStyle.Left}
Dim centerButton As ButtonAdv = New ButtonAdv() With {.Text = "Content", .Dock = DockStyle.Fill}

Me.Controls.Add(topButton)
Me.Controls.Add(leftButton)
Me.Controls.Add(centerButton)

' Set positions
borderLayout1.SetPosition(topButton, BorderPosition.North)
borderLayout1.SetPosition(leftButton, BorderPosition.West)
borderLayout1.SetPosition(centerButton, BorderPosition.Center)

' Configure spacing
borderLayout1.HGap = 10
borderLayout1.VGap = 10

Common Patterns

Pattern 1: Header + Content + Footer

The most common layout with fixed header, scrollable content area, and fixed footer.

// Create panels for header, content, footer
Panel headerPanel = new Panel() { Height = 50 };
Panel contentPanel = new Panel();
Panel footerPanel = new Panel() { Height = 40 };

// Add to form
this.Controls.Add(headerPanel);
this.Controls.Add(contentPanel);
this.Controls.Add(footerPanel);

// Position with BorderLayout
borderLayout1.SetPosition(headerPanel, BorderPosition.North);
borderLayout1.SetPosition(footerPanel, BorderPosition.South);
borderLayout1.SetPosition(contentPanel, BorderPosition.Center);

Pattern 2: Sidebar + Content

Left sidebar with main content area.

// Create sidebar and content panels
Panel sidebarPanel = new Panel() { Width = 200 };
Panel contentPanel = new Panel();

this.Controls.Add(sidebarPanel);
this.Controls.Add(contentPanel);

// Position
borderLayout1.SetPosition(sidebarPanel, BorderPosition.West);
borderLayout1.SetPosition(contentPanel, BorderPosition.Center);

Pattern 3: Multi-Edge Layout

Controls on multiple edges with center content.

Panel top = new Panel() { Height = 40 };
Panel bottom = new Panel() { Height = 40 };
Panel left = new Panel() { Width = 150 };
Panel right = new Panel() { Width = 150 };
Panel center = new Panel();

this.Controls.Add(top);
this.Controls.Add(bottom);
this.Controls.Add(left);
this.Controls.Add(right);
this.Controls.Add(center);

borderLayout1.SetPosition(top, BorderPosition.North);
borderLayout1.SetPosition(bottom, BorderPosition.South);
borderLayout1.SetPosition(left, BorderPosition.West);
borderLayout1.SetPosition(right, BorderPosition.East);
borderLayout1.SetPosition(center, BorderPosition.Center);

Key Properties

Property	Type	Description
`ContainerControl`	Control	The control that acts as the container for BorderLayout
`HGap`	int	Horizontal spacing between controls
`VGap`	int	Vertical spacing between controls

Key Methods

Method	Parameters	Description
`SetPosition()`	Control, BorderPosition	Sets the border position for a child control

Supported Positions (BorderPosition enum)

North - Top of the layout
South - Bottom of the layout
East - Right side of the layout
West - Left side of the layout
Center - Center area (fills remaining space)

FAQ

What does the syncfusion-winforms-border-layout skill do?

How do I install syncfusion-winforms-border-layout?

Run npx skills add https://github.com/syncfusion/winforms-ui-components-skills --skill syncfusion-winforms-border-layout in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-winforms-border-layout/ (personal) or .claude/skills/syncfusion-winforms-border-layout/ (project).

Which AI agents can use syncfusion-winforms-border-layout?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is syncfusion-winforms-border-layout safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains syncfusion-winforms-border-layout?

It is published by syncfusion in syncfusion/winforms-ui-components-skills. It has 78 recorded installs.