syncfusion-winforms-splitter-control

Syncfusion Windows Forms Splitter Control の実装

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

• SplitterControl への GridControl の追加
• SplitterControl への 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：水平方向と垂直方向の両方の分割（4 分割ペイン）

用途： 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 プロパティを設定します
• SfDataGrid の場合：Dock = DockStyle.Fill プロパティを使用します
• その他のコントロールの場合：標準的な WinForms レイアウトプロパティ（Dock、Anchor、Size）を適用します

ルール 3：先に分割を設定

• 子コントロールを追加する前に、SplitBars プロパティを設定します
• 必要に応じて、分割位置のプロパティ（HSplitPos、VSplitPos）を設定します
• 子コントロールは分割ペインに自動的に表示されます

ルール 4：NuGet パッケージの要件

• SplitterControl 用に Syncfusion.Shared.Base をインストールします
• 子コントロールの NuGet パッケージをインストールします（子コントロールのスキルファイルを参照してください）
• すべてのアセンブリが正しく参照されていることを確認します

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 にある子コントロールのスキルファイルを参照してください

インストール（推奨）：

復元時に最新のパッケージバージョンを使用するには、プロジェクトファイルに 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：ドキュメントの比較

同じドキュメントの 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、またはその他のコントロール）との連携については、次の手順を実行してください。
  • NuGet パッケージのインストールについては、スキルフォルダーにある子コントロールの references/getting-started.md ファイルを参照します
  • 適切な構成については、子コントロールのリファレンスファイルを確認します
  • SplitterControl に追加する前に、子コントロールが適切に構成されていることを確認します