Back to Details

syncfusion-winforms-border-layout

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Implementing Syncfusion Windows Forms BorderLayout

实现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.
BorderLayout是一款Windows Forms布局管理器，支持你沿边界（北、南、东、西）和中心区域排列子控件，效果类似.NET框架内置的停靠功能。和自动布局管理器不同，BorderLayout支持你显式控制控件的定位。

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
  • 带边界区域的布局：当你需要沿边界和中心区域排列控件时
  • 顶部/底部头部/页脚：当你想要固定头部（北）和页脚（南），中间放置内容时
  • 左侧/右侧边栏：当你需要左侧或右侧有侧边栏面板，中心放置主内容时
  • 间距控制：当你需要使用HGap和VGap精准控制控件之间的间距时
  • 设计器或代码化布局：无论是在Visual Studio设计器中搭建UI还是用C#/VB.NET编程实现
  • 停靠功能的替代方案：当你需要比Windows Forms原生停靠更结构化的布局方案时

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
核心特性：
  • 5区域布局：支持子控件放置在北、南、东、西、中心5个位置
  • 间距配置：可自定义控件之间的水平（HGap）和垂直（VGap）间距
  • 设计器支持：可通过Visual Studio设计器添加BorderLayout和子控件
  • 代码化创建：可通过C#或VB.NET编程创建并配置BorderLayout
  • 容器控件适配：可将任意控件（通常是Form）设置为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
📄 阅读： references/getting-started.md
  • 程序集和NuGet包配置
  • 在设计器中创建BorderLayout
  • 通过代码创建BorderLayout（C#和VB.NET版本）
  • 添加子控件
  • 容器配置

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
📄 阅读： references/positioning-controls.md
  • 设置控件位置（北、南、东、西、中心）
  • SetPosition()方法使用说明
  • BorderPosition枚举介绍
  • 同一位置放置多个控件
  • 各位置的代码示例
  • 常用位置配置方案

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
📄 阅读： references/spacing-configuration.md
  • HGap属性（水平间距）
  • VGap属性（垂直间距）
  • 在设计器中设置间距
  • 通过代码设置间距（C#和VB.NET版本）
  • 响应式间距适配方案

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
📄 阅读： references/layout-patterns.md
  • 常用布局（头部/页脚、侧边栏、多面板）
  • 最佳实践与设计模式
  • 响应式适配注意事项
  • BorderLayout与其他布局方案的选型对比
  • 完整可运行示例

Quick Start

快速开始

Here's a minimal BorderLayout setup:
csharp
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:
vb
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
以下是最简BorderLayout配置示例：
csharp
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等效代码：
vb
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

模式1：头部 + 内容 + 页脚

The most common layout with fixed header, scrollable content area, and fixed footer.
csharp
// 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);
最常用的布局，包含固定头部、可滚动内容区域和固定页脚。
csharp
// 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

模式2：侧边栏 + 内容

Left sidebar with main content area.
csharp
// 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);
左侧边栏搭配主内容区域。
csharp
// 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

模式3：多边界布局

Controls on multiple edges with center content.
csharp
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);
多个边界都放置控件，中心放内容。
csharp
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

核心属性

PropertyTypeDescription
ContainerControl
ControlThe control that acts as the container for BorderLayout
HGap
intHorizontal spacing between controls
VGap
intVertical spacing between controls
属性名类型描述
ContainerControl
Control作为BorderLayout容器的控件
HGap
int控件之间的水平间距
VGap
int控件之间的垂直间距

Key Methods

核心方法

MethodParametersDescription
SetPosition()
Control, BorderPositionSets the border position for a child control
方法名参数描述
SetPosition()
Control, BorderPosition为子控件设置边界位置

Supported Positions (BorderPosition enum)

支持的位置（BorderPosition枚举）

  • 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)
  • North
    - 布局顶部
  • South
    - 布局底部
  • East
    - 布局右侧
  • West
    - 布局左侧
  • Center
    - 中心区域（填充剩余空间）