syncfusion-winforms-tab-splitter-container

Syncfusion WinForms TabSplitterContainer の実装

TabSplitterContainer コントロールは、Visual Studio 2008 スタイルのタブ付き分割ビューを提供し、同じドキュメントの異なるビューを簡単に表示できます。このコントロールは、プレビューウィンドウ付きのコードエディター、デザインとコードの分割ビュー、その他の複数ビューに対応したドキュメントインターフェイスの作成に最適です。

このスキルを使用する場面

次のようなニーズがある場合に、このスキルを使用します。

• 分割ビューエディター： XAML／デザインの分割ビューに対応したコードエディター（Visual Studio のようなもの）
• ドキュメントの複数ビュー： 同じドキュメントを異なるモード（編集とプレビュー）で表示する
• タブ付きスプリッターレイアウト： 入れ替えや再配置が可能な複数のタブグループ
• 折りたたみ可能なペイン： 折りたたみ可能なセカンダリペインを備えた分割ビュー
• VS スタイルのインターフェイス： Visual Studio 2008 スタイルの複数ペインエディター
• 調整可能な分割位置： ユーザーがスプリッターバーをドラッグしてペインのサイズを変更できる
• 複数ペインアプリケーション： プライマリとセカンダリのタブグループを必要とするアプリケーション
• 水平／垂直分割： 水平と垂直の両方のレイアウト方向に対応

コンポーネントの概要

TabSplitterContainer（Syncfusion.Windows.Forms.Tools.TabSplitterContainer）は、次の機能に対応した汎用的な分割ビューのレイアウトコントロールです。

• プライマリページとセカンダリページ： タブ付きページの 2 つのコレクション（PrimaryPages、SecondaryPages）
• 入れ替え機能： プライマリとセカンダリのタブグループを入れ替える組み込みの入れ替えボタン
• 折りたたみ／展開： セカンダリペインを非表示／表示にする組み込みの折りたたみボタン
• 2 つの方向に対応： 水平（左右配置）または垂直（上下配置）のレイアウト
• 調整可能なスプリッター： SplitterPosition プロパティを備えたドラッグ可能なスプリッターバー
• Office2016 テーマ： Colorful、White、DarkGray、Black のテーマに対応
• TabSplitterPage： 画像、ツールチップ、境界線スタイルを設定できるカスタマイズ可能なページ
• スプリッターコンポーネント： 入れ替えボタン、折りたたみ／展開ボタン、方向切り替え
• デザイン時のサポート： スマートタグと連携するビジュアルデザイナー

主要な名前空間： Syncfusion.Windows.Forms.Tools

アセンブリ： Syncfusion.Tools.Windows.dll（および依存関係）

---

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

読むタイミング： TabSplitterContainer をインストール、構成、または初めて作成する必要がある場合。

対象トピック：

• アセンブリの配置と NuGet パッケージのインストール
• デザイナーから TabSplitterContainer を追加する（ツールボックスとスマートタグ）
• コードから TabSplitterContainer を追加する
• TabSplitterPage インスタンスを作成して追加する
• PrimaryPages と SecondaryPages のコレクション
• 基本的なタブページのセットアップと構成
• タブページへのコントロールの追加

スプリッターコンポーネントとページ

📄 参照： references/splitter-components.md

読むタイミング： 入れ替えボタンや折りたたみ／展開機能について理解したい場合、または TabSplitterPage のプロパティをカスタマイズしたい場合。

対象トピック：

• スプリッターコンポーネントの概要（入れ替え、折りたたみ／展開ボタン）
• プライマリページコレクション（PrimaryPages プロパティ）
• セカンダリページコレクション（SecondaryPages プロパティ）
• 入れ替えボタンの機能（Swapped プロパティ）
• 折りたたみ／展開機能（Collapsed プロパティ）
• TabSplitterPage のカスタマイズ（Text、Image、Tooltip）
• ページのプロパティ（BorderStyle、BackgroundImage、Visible）
• 実行時のページ操作と表示状態

方向とスプリッター位置

📄 参照： references/orientation-and-position.md

読むタイミング： 水平／垂直レイアウトが必要な場合、またはスプリッター位置を調整したい場合。

対象トピック：

• 水平方向（既定、左右配置）
• 垂直方向（上下配置）
• Orientation プロパティの構成
• プログラムによる制御に使う SplitterPosition プロパティ
• デザイン時のスプリッター調整
• 実行時のスプリッター位置の変更
• 方向ごとのレイアウト上の考慮事項

スタイルと外観

📄 参照先： references/styling-and-appearance.md

参照するタイミング： Office2016 テーマや、カスタムのスプリッター外観を使用したい場合です。

トピック：

• ビジュアルスタイルの概要（Default、Office2016 の各バリアント）
• Office2016Colorful、Office2016White、Office2016DarkGray、Office2016Black
• Style プロパティの使い方
• スプリッターの背景色のカスタマイズ（SplitterBackColor）
• アプリケーションとのテーマの一貫性
• ビジュアル外観のカスタマイズ

高度な機能

📄 参照先： references/advanced-features.md

参照するタイミング： イベント、ローカライズ、または実行時のページ管理が必要な場合です。

トピック：

• TabSplitterContainer のイベント
• ローカライズのサポートと CultureInfo
• 実行時の操作（プログラムによる入れ替え、折りたたみ、展開）
• ページの表示制御
• ページの動的管理（実行時の追加／削除）
• ベストプラクティスとトラブルシューティング
• パフォーマンスに関する考慮事項

---

クイックスタートの例

基本的な XAML／デザイン時の分割ビュー

using Syncfusion.Windows.Forms.Tools;

// Create TabSplitterContainer
TabSplitterContainer splitterContainer = new TabSplitterContainer();
splitterContainer.Dock = DockStyle.Fill;

// Create primary page (XAML view)
TabSplitterPage xamlPage = new TabSplitterPage();
xamlPage.Text = "XAML";
xamlPage.BackColor = Color.White;

// Create secondary page (Design view)
TabSplitterPage designPage = new TabSplitterPage();
designPage.Text = "Design";
designPage.BackColor = Color.White;

// Add pages to collections
splitterContainer.PrimaryPages.Add(xamlPage);
splitterContainer.SecondaryPages.Add(designPage);

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

Office2016 テーマを使用した垂直分割

// Configure vertical orientation
splitterContainer.Orientation = Orientation.Vertical;

// Apply Office2016 Colorful theme
splitterContainer.Style = TabSplitterContainerStyle.Office2016Colorful;

// Set initial splitter position (50% split)
splitterContainer.SplitterPosition = splitterContainer.Height / 2;

---

よくあるパターン

プレビュー領域付きコードエディター

// Primary: Code editor
TabSplitterPage codePage = new TabSplitterPage();
codePage.Text = "Code";
TextBox codeEditor = new TextBox { Dock = DockStyle.Fill, Multiline = true };
codePage.Controls.Add(codeEditor);

// Secondary: Preview pane
TabSplitterPage previewPage = new TabSplitterPage();
previewPage.Text = "Preview";
WebBrowser previewBrowser = new WebBrowser { Dock = DockStyle.Fill };
previewPage.Controls.Add(previewBrowser);

// Add to splitter
tabSplitterContainer1.PrimaryPages.Add(codePage);
tabSplitterContainer1.SecondaryPages.Add(previewPage);

使用する場面： Markdown エディター、HTML エディター、ライブプレビュー付きのあらゆるコードエディター。

複数のタブグループ（VS スタイル）

// Primary group: Multiple document tabs
TabSplitterPage doc1 = new TabSplitterPage { Text = "Document1.cs" };
TabSplitterPage doc2 = new TabSplitterPage { Text = "Document2.cs" };
tabSplitterContainer1.PrimaryPages.AddRange(new[] { doc1, doc2 });

// Secondary group: Properties/Output tabs
TabSplitterPage propPage = new TabSplitterPage { Text = "Properties" };
TabSplitterPage outputPage = new TabSplitterPage { Text = "Output" };
tabSplitterContainer1.SecondaryPages.AddRange(new[] { propPage, outputPage });

使用する場面： IDE スタイルのインターフェイス、複数ドキュメント対応のエディター。

折りたたみ可能なセカンダリ領域

// Start with secondary pane collapsed
tabSplitterContainer1.Collapsed = true;

// Toggle collapse on button click
btnToggle.Click += (s, e) => {
    tabSplitterContainer1.Collapsed = !tabSplitterContainer1.Collapsed;
};

使用する場面： 任意のプレビュー領域、折りたたみ可能なサイドバー。

プログラムによるタブグループの入れ替え

// Swap primary and secondary tab groups
tabSplitterContainer1.Swapped = true;

// Toggle swap on button click
btnSwap.Click += (s, e) => {
    tabSplitterContainer1.Swapped = !tabSplitterContainer1.Swapped;
};

使用する場面： タブグループの配置に関するユーザー設定。

---

主なプロパティ

基本プロパティ

プロパティ	型	説明	使用する場面
PrimaryPages	TabSplitterPageCollection	プライマリタブページのコレクション	プライマリ領域のタブの追加／管理
SecondaryPages	TabSplitterPageCollection	セカンダリタブページのコレクション	セカンダリ領域のタブの追加／管理
Orientation	Orientation	水平または垂直の分割	レイアウトの方向を変更
SplitterPosition	int	スプリッターバーの位置（ピクセル単位）	初期または実行時の分割位置を設定
Collapsed	bool	セカンダリ領域の折りたたみ／展開	セカンダリ領域の表示／非表示
Swapped	bool	プライマリ／セカンダリのタブグループを入れ替え	タブグループの位置を交換

スタイル関連プロパティ

プロパティ	型	説明	使用する場面
Style	TabSplitterContainerStyle	ビジュアルスタイル（Default、Office2016*）	Office2016 テーマを適用
SplitterBackColor	Color	スプリッターバーの背景色	スプリッターの外観をカスタマイズ

TabSplitterPage のプロパティ

プロパティ	型	説明	使用する場面
Text	string	タブページのテキスト／キャプション	タブラベルを設定
Image	Image	タブページのアイコン	タブにアイコンを追加
ToolTip	string	タブのツールチップテキスト	ホバー時の情報を提供
BorderStyle	BorderStyle	ページの境界線スタイル	ページの境界線を追加／削除
BackgroundImage	Image	ページの背景画像	ページの背景をカスタマイズ
Visible	bool	ページの表示状態	特定のページを表示／非表示

---

よくある使用例

1. 分割ビュー付きコードエディター

シナリオ： 編集／プレビューの分割ビューを備えた Markdown エディター。

• 編集用の TextBox を含むプライマリページを作成
• プレビュー用の WebBrowser を含むセカンダリページを作成
• 横並びにするには Orientation.Horizontal を使用
• プレビューを非表示にできるよう Collapsed を有効化
• 参照先： getting-started.md、orientation-and-position.md

2. Visual Studio 風ドキュメントエディター

シナリオ： タブグループを備えた複数ドキュメント対応 IDE。

• 複数の TabSplitterPages を PrimaryPages に追加します（ドキュメントタブ）
• ツール／出力ページを SecondaryPages に追加します
• プロフェッショナルな外観にするため、Office2016 テーマを使用します
• ユーザーの好みに合わせて、スワップボタンを有効にします
• 参照：splitter-components.md、styling-and-appearance.md

3. サムネイル付きドキュメントビューアー

シナリオ： サムネイルサイドバーを備えた PDF ビューアー。

• Primary ページ：メインのドキュメントビューアー
• Secondary ページ：サムネイルパネル
• 上下に配置するには Orientation.Vertical を使用します
• メインビューにより広いスペースを割り当てるため、SplitterPosition を設定します
• 全画面でドキュメントを表示できるよう、折りたたみを許可します
• 参照：orientation-and-position.md、splitter-components.md

4. ヘルプペイン付きデータ入力フォーム

シナリオ： セカンダリペインに状況に応じたヘルプを表示するフォーム。

• Primary ページ：データ入力フォーム
• Secondary ページ：ヘルプ／ドキュメントパネル
• Collapsed = true に設定して開始します（デフォルトでは非表示）
• ヘルプの表示／非表示を切り替えるボタンを追加します
• 参照：splitter-components.md

5. 多言語エディター

シナリオ： 言語ごとに異なるビューを備えたローカライズ済みアプリケーション。

• 言語ごとに複数の TabSplitterPages を使用します
• 言語を切り替えるためのスワップ機能を使用します
• タブのラベルにはローカライズ機能を使用します
• 参照：advanced-features.md

6. レポートデザイナー

シナリオ： コードとプレビューを分割して表示するレポート設計。

• Primary：レポート定義エディター（XML/JSON）
• Secondary：レポートのプレビュー表示
• 上下に配置するには垂直方向を使用します
• ペインのサイズ変更には、調整可能なスプリッターを使用します
• 参照：orientation-and-position.md

---

イベント

TabSplitterContainer の一般的なイベント：

• 状態変更に関するコンポーネント固有のイベント
• イベントの詳細については、advanced-features.md を参照してください

---

ベストプラクティス

1. テーマの一貫性： TabSplitterContainer の Style をアプリケーションのテーマに合わせます
2. スプリッターの位置： コンテンツの重要度に基づいて、初期の SplitterPosition を設定します
3. ページ管理： メインコンテンツには PrimaryPages、補助ビューには SecondaryPages を使用します
4. 折りたたみ状態： Collapsed 状態を切り替える UI コントロールをユーザーに提供します
5. 方向の選択： 横並びのレイアウトには Horizontal、上下に並べるレイアウトには Vertical を使用します
6. スワップ機能： ユーザーが好みに合わせてカスタマイズできるよう、Swapped プロパティを有効にします
7. ページの命名： タブのラベルを分かりやすくするため、説明的な Text プロパティを使用します
8. パフォーマンス： 初期読み込み時間を短縮するため、ページのコンテンツを遅延読み込みします

---

関連項目

• Syncfusion TabSplitterContainer ドキュメント
• TabSplitterContainer API リファレンス
• TabSplitterPage API リファレンス