syncfusion-winforms-splitter-control

实现 Syncfusion Windows Forms Splitter 控件

在 Windows Forms 应用程序中实现 Syncfusion 的 SplitterControl 指南。此控件可通过使用拆分窗格显示同一网格的多个视图，让用户能够在各个窗格中独立滚动。

何时使用此技能

在以下情况下使用 SplitterControl：

• 显示同一网格或工作表数据的多个视图
• 支持在内容的不同区域中独立滚动
• 创建可供用户通过拖动调整窗格大小的拆分窗格界面
• 实现多个窗格之间的同步内容
• 提供包含水平和／或垂直分隔线的灵活布局
• 构建数据比较视图，方便用户查看同一数据集的不同部分
• 创建类似 Excel 的拆分视图功能
• 与 GridControl 或其他子控件（SfDataGrid、Chart 或任何 Syncfusion／框架控件）集成

组件概览

SplitterControl 是一种容器控件，可通过可拖动的分隔条实现拆分窗格功能。用户可以水平、垂直或同时沿两个方向拆分视图。

主要功能：

• 水平和垂直拆分
• 可拖动的分隔条
• 多种拆分模式（None、SplitRows、SplitColumns、Both）
• 可自定义滚动条样式（Metro、Office2007、Office2010、None）
• 窗格独立滚动
• 子控件集成

程序集： Syncfusion.Shared.Base

命名空间： Syncfusion.Windows.Forms

主要类： SplitterControl

文档与导航指南

入门

📄 阅读： references/getting-started.md

• NuGet 包安装（SplitterControl 使用 Syncfusion.Shared.Base）
• 子控件 NuGet 包（参阅子控件的技能文件）
• 程序集和命名空间引用
• 基本控件创建
• 设计器支持

配置拆分行为

📄 阅读： references/split-behavior.md

• 了解拆分模式（None、SplitColumns、SplitRows、Both）
• 配置 DynamicSplitBars 属性
• 启用水平拆分
• 启用垂直拆分
• 用户与分隔条的交互

自定义滚动条

📄 阅读： references/scrollbar-customization.md

• GridOfficeScrollBars 属性
• Office2007、Office2010、Metro 滚动条样式

滚动条可见性功能

📄 阅读： references/scrollbar-features.md

• 控制滚动条可见性
• ShowHorizontalScrollBar 和 ShowVerticalScrollBar 属性
• 极简 UI 配置

视觉自定义

📄 阅读： references/visual-customization.md

• ShowSizeGrip 属性
• 预定义控件样式
• 主题配置

添加子控件

📄 阅读： references/adding-child-controls.md

• 向拆分控件添加 GridControl
• 向拆分控件添加 SfDataGrid
• 添加任意 Syncfusion 或框架控件
• 简单的直接添加方式
• FillSplitterPane 属性的用法
• 子控件配置

快速开始

基本实现

安装： 有关 NuGet 包安装步骤，请参阅 references/getting-started.md。

using System.Windows.Forms;
using Syncfusion.Windows.Forms;
using Syncfusion.Windows.Forms.Grid;

public class Form1 : Form
{
    private SplitterControl splitterControl1;
    private GridControl gridControl1;
    
    public Form1()
    {
        // Create SplitterControl
        splitterControl1 = new SplitterControl();
        splitterControl1.Dock = DockStyle.Fill;
        splitterControl1.SplitBars = DynamicSplitBars.Both; // Enable both horizontal and vertical splits
        splitterControl1.GridOfficeScrollBars = OfficeScrollBars.Metro;
        
        // Create GridControl
        gridControl1 = new GridControl();
        gridControl1.FillSplitterPane = true; // Important for proper display in split panes
        
        // Add GridControl to SplitterControl
        splitterControl1.Controls.Add(gridControl1);
        
        // Add SplitterControl to form
        this.Controls.Add(splitterControl1);
    }
}

常见模式

模式 1：使用 GridControl 的简单 SplitterControl

用例： 支持拆分视图的基本网格

using Syncfusion.Windows.Forms;
using Syncfusion.Windows.Forms.Grid;

// Create SplitterControl
SplitterControl splitterControl1 = new SplitterControl();
splitterControl1.Dock = DockStyle.Fill;
splitterControl1.SplitBars = DynamicSplitBars.Both;
splitterControl1.GridOfficeScrollBars = OfficeScrollBars.Metro;

// Create GridControl
GridControl gridControl1 = new GridControl();
gridControl1.FillSplitterPane = true;

// Add GridControl directly to SplitterControl
splitterControl1.Controls.Add(gridControl1);

// Add to form
this.Controls.Add(splitterControl1);

模式 2：仅水平拆分（上下）

用例： 带有上方和下方窗格的拆分视图

SplitterControl splitterControl1 = new SplitterControl();
splitterControl1.Dock = DockStyle.Fill;
splitterControl1.SplitBars = DynamicSplitBars.SplitRows; // Horizontal split only
splitterControl1.HSplitPos = 50; // Split at 50% position

GridControl gridControl1 = new GridControl();
gridControl1.FillSplitterPane = true;

splitterControl1.Controls.Add(gridControl1);
this.Controls.Add(splitterControl1);

模式 3：仅垂直拆分（左右）

用例： 并排拆分视图

SplitterControl splitterControl1 = new SplitterControl();
splitterControl1.Dock = DockStyle.Fill;
splitterControl1.SplitBars = DynamicSplitBars.SplitColumns; // Vertical split only
splitterControl1.VSplitPos = 50; // Split at 50% position

GridControl gridControl1 = new GridControl();
gridControl1.FillSplitterPane = true;

splitterControl1.Controls.Add(gridControl1);
this.Controls.Add(splitterControl1);

模式 4：水平和垂直拆分（四窗格）

用例： 类似 Excel 的四窗格拆分视图

SplitterControl splitterControl1 = new SplitterControl();
splitterControl1.Dock = DockStyle.Fill;
splitterControl1.SplitBars = DynamicSplitBars.Both; // Both directions
splitterControl1.HSplitPos = 50; // Horizontal split at 50%
splitterControl1.VSplitPos = 50; // Vertical split at 50%
splitterControl1.GridOfficeScrollBars = OfficeScrollBars.Metro;

GridControl gridControl1 = new GridControl();
gridControl1.FillSplitterPane = true;

splitterControl1.Controls.Add(gridControl1);
this.Controls.Add(splitterControl1);

模式 5：使用 SfDataGrid 的 SplitterControl

用例： 带有拆分视图的现代数据网格

using Syncfusion.Windows.Forms;
using Syncfusion.WinForms.DataGrid;

SplitterControl splitterControl1 = new SplitterControl();
splitterControl1.Dock = DockStyle.Fill;
splitterControl1.SplitBars = DynamicSplitBars.Both;
splitterControl1.GridOfficeScrollBars = OfficeScrollBars.Metro;

SfDataGrid sfDataGrid1 = new SfDataGrid();
sfDataGrid1.Dock = DockStyle.Fill; // Use Dock for SfDataGrid

// Add SfDataGrid directly to SplitterControl
splitterControl1.Controls.Add(sfDataGrid1);

this.Controls.Add(splitterControl1);

模式 6：自定义滚动条样式

用例： 与应用程序主题保持一致

SplitterControl splitterControl1 = new SplitterControl();
splitterControl1.Dock = DockStyle.Fill;
splitterControl1.SplitBars = DynamicSplitBars.Both;

// Choose scrollbar style:
splitterControl1.GridOfficeScrollBars = OfficeScrollBars.Metro;     // Modern Metro style
// splitterControl1.GridOfficeScrollBars = OfficeScrollBars.Office2007;
// splitterControl1.GridOfficeScrollBars = OfficeScrollBars.Office2010;
// splitterControl1.GridOfficeScrollBars = OfficeScrollBars.None;

GridControl gridControl1 = new GridControl();
gridControl1.FillSplitterPane = true;

splitterControl1.Controls.Add(gridControl1);
this.Controls.Add(splitterControl1);

模式 7：隐藏滚动条

使用场景： 打造不显示滚动条的简洁 UI

SplitterControl splitterControl1 = new SplitterControl();
splitterControl1.Dock = DockStyle.Fill;
splitterControl1.SplitBars = DynamicSplitBars.Both;
splitterControl1.ShowHorizontalScrollBar = false;
splitterControl1.ShowVerticalScrollBar = false;

GridControl gridControl1 = new GridControl();
gridControl1.FillSplitterPane = true;

splitterControl1.Controls.Add(gridControl1);
this.Controls.Add(splitterControl1);

关键属性

SplitterControl 属性

属性	类型	说明	默认值
SplitBars	DynamicSplitBars	控制拆分方向（None、SplitColumns、SplitRows、Both）	None
HSplitPos	int	水平拆分位置百分比（0-100）	50
VSplitPos	int	垂直拆分位置百分比（0-100）	50
GridOfficeScrollBars	OfficeScrollBars	滚动条样式（Metro、Office2007、Office2010、None）	None
ShowHorizontalScrollBar	bool	显示或隐藏水平滚动条	true
ShowVerticalScrollBar	bool	显示或隐藏垂直滚动条	true
ShowSizeGrip	bool	显示或隐藏尺寸调整手柄指示器	true
ShowToolTips	bool	在拆分条上显示工具提示	false

DynamicSplitBars 枚举值

• None - 不启用拆分
• SplitRows - 水平拆分（上-下）
• SplitColumns - 垂直拆分（左-右）
• Both - 同时进行水平和垂直拆分

OfficeScrollBars 枚举值

• None - 不使用自定义滚动条样式
• Metro - 现代 Metro 风格滚动条
• Office2007 - Office 2007 风格滚动条
• Office2010 - Office 2010 风格滚动条
• Office2016 - Office 2016 风格滚动条

子控件集成

概述

SplitterControl 是一种容器控件，支持承载任何 Syncfusion 或框架控件。子控件可直接添加到 Controls 集合中，以便创建包含网格、图表、文本编辑器或任何自定义控件的拆分视图。

集成规则

规则 1：直接添加

• 将子控件直接添加到 SplitterControl.Controls 集合
• 无需中间面板或容器
• 启用拆分条后，SplitterControl 会自动管理窗格

规则 2：控件专属属性

• 对于 GridControl：将 FillSplitterPane = true 属性设为 true
• 对于 SfDataGrid：使用 Dock = DockStyle.Fill 属性
• 对于其他控件：应用标准 WinForms 布局属性（Dock、Anchor、Size）

规则 3：先配置拆分

• 添加子控件之前，先配置 SplitBars 属性
• 如有需要，设置拆分位置属性（HSplitPos、VSplitPos）
• 子控件会自动显示在拆分窗格中

规则 4：NuGet 包要求

• 安装 Syncfusion.Shared.Base 以使用 SplitterControl
• 安装子控件的 NuGet 包（参阅该子控件的 skill 文件）
• 确认所有程序集都已正确引用

向 SplitterControl 添加控件

// Step 1: Create and configure SplitterControl
SplitterControl splitterControl1 = new SplitterControl();
splitterControl1.Dock = DockStyle.Fill;
splitterControl1.SplitBars = DynamicSplitBars.Both;
splitterControl1.GridOfficeScrollBars = OfficeScrollBars.Metro;

// Step 2: Create and configure child control
GridControl gridControl1 = new GridControl();
gridControl1.FillSplitterPane = true; // Required for GridControl
gridControl1.RowCount = 50;
gridControl1.ColCount = 10;

// Step 3: Add child control to SplitterControl
splitterControl1.Controls.Add(gridControl1);

// Step 4: Add SplitterControl to form
this.Controls.Add(splitterControl1);

NuGet 包安装

必需的包：

• Syncfusion.Shared.Base - 用于 SplitterControl
• 子控件包 - 参阅位于 syncfusion-winforms-{control-name}/references/getting-started.md 的子控件 skill 文件

安装方式（推荐）：

为确保还原时使用最新的包版本，请在项目文件中添加包引用，并设置 Version="*"：

<PackageReference Include="Syncfusion.Shared.Base" Version="*" />
<PackageReference Include="Syncfusion.Grid.Windows" Version="*" />       
<PackageReference Include="Syncfusion.SfDataGrid.WinForms" Version="*" />  

也可以使用 dotnet add package / Install-Package 安装这些包（默认安装最新稳定版本）：

dotnet add package Syncfusion.Shared.Base
dotnet add package Syncfusion.Grid.Windows
dotnet add package Syncfusion.SfDataGrid.WinForms

详细安装步骤请参阅 references/getting-started.md 和子控件的 getting-started 指南。

集成示例

示例 1：SplitterControl 与 GridControl

using Syncfusion.Windows.Forms;
using Syncfusion.Windows.Forms.Grid;

// Configure splitter
SplitterControl splitter = new SplitterControl();
splitter.Dock = DockStyle.Fill;
splitter.SplitBars = DynamicSplitBars.Both;

// Add GridControl
GridControl grid = new GridControl();
grid.FillSplitterPane = true;
grid.RowCount = 100;
grid.ColCount = 20;

splitter.Controls.Add(grid);
this.Controls.Add(splitter);

示例 2：SplitterControl 与 SfDataGrid

using Syncfusion.Windows.Forms;
using Syncfusion.WinForms.DataGrid;

// Configure splitter
SplitterControl splitter = new SplitterControl();
splitter.Dock = DockStyle.Fill;
splitter.SplitBars = DynamicSplitBars.SplitColumns;

// Add SfDataGrid
SfDataGrid dataGrid = new SfDataGrid();
dataGrid.Dock = DockStyle.Fill;
dataGrid.AutoGenerateColumns = true;

splitter.Controls.Add(dataGrid);
this.Controls.Add(splitter);

示例 3：SplitterControl 与框架控件

using Syncfusion.Windows.Forms;

// Configure splitter
SplitterControl splitter = new SplitterControl();
splitter.Dock = DockStyle.Fill;
splitter.SplitBars = DynamicSplitBars.SplitRows;

// Add RichTextBox (framework control)
RichTextBox textBox = new RichTextBox();
textBox.Dock = DockStyle.Fill;

splitter.Controls.Add(textBox);
this.Controls.Add(splitter);

相关技能

使用子控件实现 SplitterControl 时，必须参考该子控件的技能文件，以确保正确实现。

如何查找子控件技能：

1. 确定用户请求的子控件（例如 GridControl、SfDataGrid、Chart）
2. 使用以下模式导航到技能文件夹：syncfusion-winforms-{control-name}
3. 阅读该控件的 SKILL.md 文件，了解：
   • 正确的初始化和配置方式
   • 所需的 NuGet 包
   • 控件专属的属性和方法
   • 常见模式和最佳实践

技能文件位置示例：

skills/syncfusion-winforms-grid-control/SKILL.md

实现工作流：

1. 阅读子控件的 SKILL.md → 了解控件基础知识
2. 阅读子控件的 references/getting-started.md → 获取 NuGet 包信息
3. 将子控件初始化与 SplitterControl 模式结合使用（参见“常见模式”部分）
4. 应用控件专属属性（GridControl 使用 FillSplitterPane，其他控件使用 Dock）

注意： 用户请求将控件与 SplitterControl 集成时，务必阅读子控件的 SKILL.md 文件。每种控件都有独特的初始化要求、属性和配置需求。

常见用例

用例 1：Excel 风格的工作表查看器

创建类似 Excel 冻结窗格的分割视图，以便在滚动数据时查看表头。

实现： 使用 GridControl 实现模式 4（两个方向）

用例 2：文档比较

并排比较同一文档的两个部分。

实现： 使用适当的子控件实现模式 3（垂直分割）

用例 3：代码编辑器分割视图

同时查看同一文件的不同部分。

实现： 模式 2 或 3（水平或垂直分割）

用例 4：数据分析仪表板

同时查看原始数据、摘要和图表。根据需求使用适当的子控件。

实现： 使用子控件实现模式 4（两个方向）

用例 5：财务电子表格

分割视图以显示收入、支出和摘要，并提供交叉引用。具体实现请参考 GridControl 技能。

实现： 使用 GridControl 实现模式 1 或 4

后续步骤

• 要了解 SplitterControl 的安装和设置：阅读 references/getting-started.md
• 要了解 SplitterControl 分割行为的详情：阅读 references/split-behavior.md
• 要自定义 SplitterControl 滚动条：阅读 references/scrollbar-customization.md
• 要了解 SplitterControl 子控件集成：阅读 references/adding-child-controls.md
• 要集成子控件（GridControl、SfDataGrid 或任何控件）：
  • 在技能文件夹中参考子控件的 references/getting-started.md 文件，了解 NuGet 包安装方法
  • 查看子控件的参考文件，了解正确的配置方式
  • 将子控件添加到 SplitterControl 前，确保其已正确配置