SplitContainer 拆分容器控件

SplitContainer 拆分容器控件

SplitContainer 是一个可以将界面分成左右或上下两个区域的容器控件，中间有一个可拖动的分割条，用户可以拖动分隔条来调整两侧区域的大小。

基本使用

拖拽 SplitContainer 到窗体后，默认呈现为左右两个面板（Panel1 和 Panel2），中间有一条可拖动的分割条。

设置水平拆分

默认是垂直拆分（左右排列），通过设置 Orientation 属性改为水平拆分（上下排列）：

this.splitContainer1.Orientation = Orientation.Horizontal; // 上下拆分Code language: JavaScript (javascript)

布局结构

┌─────────────────────────────┐
│         Panel1               │
├─────────────────────────────┤  ← 可拖动的分隔条
│         Panel2               │
└─────────────────────────────┘

垂直拆分时：

┌──────────┬──────────────────┐
│  Panel1  │     Panel2        │
│          │                  │
└──────────┴──────────────────┘

常用属性

属性	说明
Panel1	左侧/上侧面板
Panel2	右侧/下侧面板
Orientation	拆分方向（Vertical 左右 / Horizontal 上下）
SplitterDistance	分隔条距离容器边缘的像素距离
SplitterWidth	分隔条的宽度（厚度）
SplitterIncrement	拖动时的最小移动增量
IsSplitterFixed	是否固定分隔条（设为 true 后不可拖动）
Panel1Collapsed	是否折叠 Panel1（隐藏）
Panel2Collapsed	是否折叠 Panel2（隐藏）
Panel1MinSize	Panel1 最小宽度/高度
Panel2MinSize	Panel2 最小宽度/高度
FixedPanel	调整容器大小时哪个面板保持固定大小（None / Panel1 / Panel2）
BorderStyle	边框样式

this.splitContainer1.SplitterDistance = 150;        // 分隔条距离左侧150px
this.splitContainer1.SplitterWidth = 6;             // 分隔条厚度
this.splitContainer1.Panel1MinSize = 50;            // Panel1最小宽度50px
this.splitContainer1.Panel2MinSize = 100;           // Panel2最小宽度100px
this.splitContainer1.FixedPanel = FixedPanel.Panel1; // 调整容器时Panel1保持固定
this.splitContainer1.IsSplitterFixed = false;        // 允许拖动Code language: JavaScript (javascript)

嵌套使用

可以将一个 SplitContainer 放入另一个的面板中，实现更复杂的布局：

// 左侧面板再拆分为上下两部分
SplitContainer innerSplit = new SplitContainer();
innerSplit.Orientation = Orientation.Horizontal;
innerSplit.Dock = DockStyle.Fill;
this.splitContainer1.Panel1.Controls.Add(innerSplit);Code language: JavaScript (javascript)

常用事件

事件	说明
SplitterMoved	分隔条移动完成后触发
SplitterMoving	分隔条正在拖动时触发

private void splitContainer1_SplitterMoved(object sender, SplitterEventArgs e)
{
    MessageBox.Show($"分隔条位置：{e.SplitX}, {e.SplitY}");
}Code language: JavaScript (javascript)

与 Panel + Splitter 的区别

对比项	SplitContainer	Panel + Splitter
容器数量	内置两个面板	需要手动添加
嵌套	支持直接嵌套	需手动管理
折叠	支持 PanelXCollapsed	不支持
最小尺寸	支持 PanelXMinSize	不支持
推荐使用	✅ 推荐	❌ 已过时