syncfusion-winforms-splitcontainer
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseImplementing SplitContainerAdv in Windows Forms
在Windows Forms中实现SplitContainerAdv
SplitContainerAdv is a container control that enables developers to create resizable dual-panel layouts with a movable splitter bar. It's used when you need flexible panel division in forms.
SplitContainerAdv是一款容器控件，可供开发者创建带有可移动分割条的可调整大小的双面板布局，适用于需要在窗体中实现灵活面板分割的场景。
When to Use This Skill
何时使用本技能
Use this skill when you need to:
- Create a resizable split-panel layout in a Windows Forms application
- Add controls to separate panels within a container
- Allow users to resize panels by dragging the splitter
- Configure horizontal or vertical panel orientation
- Customize splitter appearance and behavior
- Collapse or expand panels dynamically
- Handle panel resize events
当你需要实现以下需求时可使用本技能：
- 在Windows Forms应用中创建可调整大小的分栏面板布局
- 向容器内的不同面板添加控件
- 允许用户通过拖拽分割条调整面板大小
- 配置水平或垂直面板方向
- 自定义分割条的外观和行为
- 动态折叠或展开面板
- 处理面板调整大小的事件
Component Overview
组件概述
SplitContainerAdv provides:
- Two resizable panels (Panel1 and Panel2) separated by a splitter
- Support for horizontal and vertical orientation
- Panel collapsing/expanding capabilities
- Rich customization of splitter appearance
- Event handling for splitter movements
- Nested container support (SplitContainerAdv within SplitContainerAdv)
- Visual styling options
SplitContainerAdv 提供以下能力：
- 由分割条分隔的两个可调整大小的面板（Panel1和Panel2）
- 支持水平和垂直方向布局
- 面板折叠/展开功能
- 丰富的分割条外观自定义选项
- 分割条移动的事件处理能力
- 支持嵌套容器（可在SplitContainerAdv内部嵌套使用SplitContainerAdv）
- 可视化样式设置选项
Documentation and Navigation Guide
文档与导航指南
Getting Started
入门指南
📄 Read: references/getting-started.md
- Assembly dependencies and NuGet setup
- Creating a new Windows Forms project
- Adding SplitContainerAdv via designer
- Adding SplitContainerAdv programmatically
- Adding child controls to panels
- Setting splitter orientation
📄 阅读: references/getting-started.md
- 程序集依赖与NuGet安装设置
- 创建新的Windows Forms项目
- 通过设计器添加SplitContainerAdv
- 通过代码方式添加SplitContainerAdv
- 向面板添加子控件
- 设置分割条方向
Panel Configuration
面板配置
📄 Read: references/panel-configuration.md
- Panel orientation (horizontal vs vertical)
- Fixed and resizable panels
- Minimum panel size constraints
- Collapsing and expanding panels at runtime
- Panel-specific properties and behavior
📄 阅读: references/panel-configuration.md
- 面板方向（水平vs垂直）
- 固定面板与可调整大小面板设置
- 最小面板尺寸约束
- 运行时折叠与展开面板
- 面板专属属性与行为设置
Splitter Customization
分割条自定义
📄 Read: references/splitter-customization.md
- Splitter distance and positioning
- Fixed splitter configuration
- Splitter width and increment settings
- Thumbnail arrow and grip appearance
- Hover state customization
- Runtime appearance changes
📄 阅读: references/splitter-customization.md
- 分割条距离与定位设置
- 固定分割条配置
- 分割条宽度与步长设置
- 缩略箭头与抓手外观设置
- 悬停状态自定义
- 运行时外观动态修改
Appearance and Styling
外观与样式
📄 Read: references/appearance-styling.md
- Background color configuration
- Foreground properties (fonts, colors)
- Border styling options
- Panel-specific appearance overrides
- Gradient and brush customization
📄 阅读: references/appearance-styling.md
- 背景颜色配置
- 前景属性（字体、颜色）
- 边框样式选项
- 面板级别的外观覆盖设置
- 渐变与画笔自定义
Events and Interactions
事件与交互
📄 Read: references/events-handling.md
- SplitterMoved event handling
- SplitterMoving event handling
- Common event patterns
- Event args and data access
- Preventing splitter movement
📄 阅读: references/events-handling.md
- SplitterMoved事件处理
- SplitterMoving事件处理
- 常用事件模式
- 事件参数与数据访问
- 禁止分割条移动
Quick Start Example
快速入门示例
Basic implementation of SplitContainerAdv:
csharp
// Create and configure SplitContainerAdv
SplitContainerAdv splitContainer = new SplitContainerAdv();
splitContainer.Dock = DockStyle.Fill;
splitContainer.Orientation = Orientation.Horizontal;
splitContainer.SplitterDistance = 150;
// Add controls to panels
Label label1 = new Label { Text = "Panel 1", Dock = DockStyle.Fill };
Label label2 = new Label { Text = "Panel 2", Dock = DockStyle.Fill };
splitContainer.Panel1.Controls.Add(label1);
splitContainer.Panel2.Controls.Add(label2);
// Add to form
this.Controls.Add(splitContainer);vb
' Create and configure SplitContainerAdv
Dim splitContainer As New SplitContainerAdv()
splitContainer.Dock = DockStyle.Fill
splitContainer.Orientation = Orientation.Horizontal
splitContainer.SplitterDistance = 150
' Add controls to panels
Dim label1 As New Label With {.Text = "Panel 1", .Dock = DockStyle.Fill}
Dim label2 As New Label With {.Text = "Panel 2", .Dock = DockStyle.Fill}
splitContainer.Panel1.Controls.Add(label1)
splitContainer.Panel2.Controls.Add(label2)
' Add to form
Me.Controls.Add(splitContainer)SplitContainerAdv的基础实现代码：
csharp
// Create and configure SplitContainerAdv
SplitContainerAdv splitContainer = new SplitContainerAdv();
splitContainer.Dock = DockStyle.Fill;
splitContainer.Orientation = Orientation.Horizontal;
splitContainer.SplitterDistance = 150;
// Add controls to panels
Label label1 = new Label { Text = "Panel 1", Dock = DockStyle.Fill };
Label label2 = new Label { Text = "Panel 2", Dock = DockStyle.Fill };
splitContainer.Panel1.Controls.Add(label1);
splitContainer.Panel2.Controls.Add(label2);
// Add to form
this.Controls.Add(splitContainer);vb
' Create and configure SplitContainerAdv
Dim splitContainer As New SplitContainerAdv()
splitContainer.Dock = DockStyle.Fill
splitContainer.Orientation = Orientation.Horizontal
splitContainer.SplitterDistance = 150
' Add controls to panels
Dim label1 As New Label With {.Text = "Panel 1", .Dock = DockStyle.Fill}
Dim label2 As New Label With {.Text = "Panel 2", .Dock = DockStyle.Fill}
splitContainer.Panel1.Controls.Add(label1)
splitContainer.Panel2.Controls.Add(label2)
' Add to form
Me.Controls.Add(splitContainer)Common Patterns
常用实现模式
Pattern 1: Fixed Left Panel, Resizable Right Panel
模式1：固定左侧面板，右侧面板可调整大小
csharp
splitContainer.Orientation = Orientation.Vertical;
splitContainer.FixedPanel = FixedPanel.Panel1;
splitContainer.Panel1MinSize = 200;
splitContainer.SplitterDistance = 200;csharp
splitContainer.Orientation = Orientation.Vertical;
splitContainer.FixedPanel = FixedPanel.Panel1;
splitContainer.Panel1MinSize = 200;
splitContainer.SplitterDistance = 200;Pattern 2: Collapsible Panels
模式2：可折叠面板
csharp
splitContainer.PanelToBeCollapsed = CollapsedPanel.Panel2;
splitContainer.TogglePanelOn = TogglePanelOn.DoubleClick;csharp
splitContainer.PanelToBeCollapsed = CollapsedPanel.Panel2;
splitContainer.TogglePanelOn = TogglePanelOn.DoubleClick;Pattern 3: Vertical Layout with Equal Sizing
模式3：等分垂直布局
csharp
splitContainer.Orientation = Orientation.Vertical;
splitContainer.SplitterDistance = splitContainer.Height / 2;
splitContainer.Panel1MinSize = 50;
splitContainer.Panel2MinSize = 50;csharp
splitContainer.Orientation = Orientation.Vertical;
splitContainer.SplitterDistance = splitContainer.Height / 2;
splitContainer.Panel1MinSize = 50;
splitContainer.Panel2MinSize = 50;Key Properties
核心属性
| Property | Type | Purpose |
|---|---|---|
| Orientation | Sets horizontal or vertical split (Default: Horizontal) |
| int | Distance from edge to splitter bar in pixels |
| FixedPanel | Which panel remains fixed during resizing (Panel1, Panel2, or None) |
| bool | Whether Panel1 is hidden |
| bool | Whether Panel2 is hidden |
| bool | Whether splitter can be moved |
| int | Width of the splitter bar in pixels |
| int | Minimum size for Panel1 (default: 25) |
| int | Minimum size for Panel2 (default: 25) |
| BrushInfo | Color of expand arrow fill |
| BrushInfo | Grip color on hover |
| 属性 | 类型 | 用途 |
|---|---|---|
| Orientation | 设置水平或垂直分割（默认：Horizontal） |
| int | 分割条距离边缘的像素值 |
| FixedPanel | 调整大小时保持固定的面板（可选值：Panel1、Panel2、None） |
| bool | Panel1是否处于隐藏状态 |
| bool | Panel2是否处于隐藏状态 |
| bool | 分割条是否允许移动 |
| int | 分割条的宽度（单位：像素） |
| int | Panel1的最小尺寸（默认值：25） |
| int | Panel2的最小尺寸（默认值：25） |
| BrushInfo | 展开箭头的填充颜色 |
| BrushInfo | 悬停状态下分割条抓手的颜色 |
Quick Tips
实用提示
- Default Orientation: Use for left-right split,
Orientation.Horizontalfor top-bottomOrientation.Vertical - Minimum Sizing: Set and
Panel1MinSizeto prevent panels from collapsing too smallPanel2MinSize - Fixed Panels: Use to prevent resizing one side, useful for toolbars or sidebars
FixedPanel - Panel Collapse: Double-click the splitter to collapse when
TogglePanelOn = TogglePanelOn.DoubleClick - Nested Containers: Add a SplitContainerAdv to a panel of another SplitContainerAdv for complex layouts
- Docking: Use to make the control fill its parent container
Dock = DockStyle.Fill
- 默认方向：使用实现左右分栏，
Orientation.Horizontal实现上下分栏Orientation.Vertical - 最小尺寸设置：设置和
Panel1MinSize避免面板被压缩得过小Panel2MinSize - 固定面板：使用固定某一侧面板的大小，适用于工具栏或侧边栏场景
FixedPanel - 面板折叠：当设置时，双击分割条即可折叠面板
TogglePanelOn = TogglePanelOn.DoubleClick - 嵌套容器：可将SplitContainerAdv添加到另一个SplitContainerAdv的面板中，实现复杂布局
- 停靠设置：使用让控件自动填充父容器
Dock = DockStyle.Fill