syncfusion-winforms-tabcontrol

タブコントロールの実装（TabControlAdv）

TabControlAdv は、コンパクトなタブ付きインターフェイスで視覚的なコンテンツを整理できる、高度な Windows Forms タブコントロールです。標準の TabControl を拡張し、外観の詳細なカスタマイズ、ナビゲーション機能、編集機能、スタイル設定を提供します。

このスキルを使う場面

次のような場合に、このスキルを使ってください。

• Windows Forms アプリケーションにタブ付きインターフェイスを実装する
• 複数の TabPageAdv 項目を含む TabControlAdv を追加する
• タブの外観、色、フォント、スタイルをカスタマイズする
• タブの編集、ドラッグ＆ドロップ、閉じるボタンを有効にする
• TabPrimitives を使用してタブのナビゲーションを設定する
• タブのイベント（選択、閉じる、編集など）を処理する
• Office、Metro、Visual Studio のテーマをタブに適用する
• スクロール、ツールヒント、複数行のタブを実装する
• セッションをまたいでタブの状態（順序、アクティブなページ）を保持する

コンポーネントの概要

TabControlAdv が提供する機能：

• タブの配置：上、下、左、右に配置
• ナビゲーションのサポート：最初／最後／次／前への移動に使用する TabPrimitives
• 編集のサポート：実行時のタブヘッダーテキストの編集
• アイコンのサポート：タブヘッダー内の画像
• ドラッグ＆ドロップ：ドラッグ＆ドロップによるタブの並べ替え
• 閉じるボタン：各タブまたはすべてのタブに対する閉じるボタン
• ツールヒント：タブ用の標準ツールヒントと SuperToolTips
• スタイル設定：15 種類以上の組み込みテーマ（2D、3D、Metro、Office、VS スタイル）
• シリアル化：タブの状態の保存と読み込み
• スクロール：タブが表示領域を超えた場合のスムーズなスクロール

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

はじめに

📄 参照： references/getting-started.md

• アセンブリの配置と NuGet パッケージ
• デザイナーを使用した TabControlAdv の追加
• コードでコントロールを手動で追加する
• タブ（TabPageAdv）の作成と追加
• タブページへのコントロールの追加
• 基本的なタブ配置の設定

配置とレイアウト

📄 参照： references/alignment-layout.md

• タブの配置（上、下、左、右）
• タブ内のテキスト配置
• 複数行タブのサポート
• RTL（右から左）サポート
• タブとテキストの回転
• TabGap の間隔

外観とカスタマイズ

📄 参照： references/appearance-customization.md

• 背景色と背景画像
• アクティブタブと非アクティブタブの色
• フォントと前景色の設定
• 境界線のスタイルと色
• タブのスタイル（2D、3D、Metro、Office のテーマ）
• SizeMode のオプション（Normal、Fixed、ShrinkToFit、FillToRight）

インタラクティブ機能

📄 参照： references/interactive-features.md

• 閉じるボタンの設定
• ツールヒントと SuperTooltip のサポート
• スクロールボタンとスクロールバー
• 中クリックによるタブのクローズ
• 自動スクロールの設定

タブのナビゲーション

📄 参照： references/tab-navigation.md

• TabPrimitives の概要
• ナビゲーションコントロールの種類（FirstTab、LastTab、NextTab、PreviousTab など）
• DropDown および Close プリミティブ
• カスタムプリミティブ
• TabPrimitives のプログラムによる作成

カスタマイズと編集

📄 参照： references/customization-editing.md

• 実行時のタブヘッダーの名前変更（LabelEdit）
• ドラッグ＆ドロップによるタブの並べ替え（UserMoveTabs）
• パディングと間隔
• タブページの境界線スタイル
• タブ内のアニメーション GIF 画像
• 特定のタブが移動されないようにする

シリアル化

📄 参照： references/serialization.md

• PersistTabState プロパティ
• タブ状態の自動保持
• タブの順序とアクティブなページの保存

イベントとイベント処理

📄 参照： references/events.md

• 編集イベント（BeforeEdit、AfterEdit）
• 選択イベント（SelectedIndexChanging、SelectedIndexChanged）
• タブプリミティブのクリックイベント
• カスタム描画用の DrawItem
• タブページのイベント（Closed、Closing）
• その他のイベント（Paint、BackgroundImageChanged など）

クイックスタートの例

基本的な実装

using Syncfusion.Windows.Forms.Tools;

// Create TabControlAdv
TabControlAdv tabControlAdv1 = new TabControlAdv();
tabControlAdv1.Size = new Size(400, 300);

// Create and add tab pages
TabPageAdv tabPage1 = new TabPageAdv();
tabPage1.Text = "Home";
tabPage1.ImageIndex = 0; // Optional icon

TabPageAdv tabPage2 = new TabPageAdv();
tabPage2.Text = "Settings";

tabControlAdv1.TabPages.Add(tabPage1);
tabControlAdv1.TabPages.Add(tabPage2);

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

スタイルと機能を適用した例

// Apply Office 2016 theme
tabControlAdv1.TabStyle = typeof(TabRendererOffice2016Colorful);

// Enable features
tabControlAdv1.ShowTabCloseButton = true;
tabControlAdv1.UserMoveTabs = true;
tabControlAdv1.LabelEdit = true;
tabControlAdv1.ShowToolTips = true;

// Customize appearance
tabControlAdv1.ActiveTabColor = Color.FromArgb(255, 255, 255);
tabControlAdv1.InactiveTabColor = Color.FromArgb(240, 240, 240);
tabControlAdv1.ActiveTabFont = new Font("Segoe UI", 9F, FontStyle.Bold);

よく使われるパターン

パターン 1：タブ付きドキュメントインターフェース

// Create tab control for documents
TabControlAdv documentTabs = new TabControlAdv();
documentTabs.Dock = DockStyle.Fill;
documentTabs.ShowTabCloseButton = true;
documentTabs.ShowCloseButtonForActiveTabOnly = true;

// Add document tabs dynamically
void AddDocumentTab(string title, Control content)
{
    TabPageAdv docTab = new TabPageAdv();
    docTab.Text = title;
    docTab.Controls.Add(content);
    content.Dock = DockStyle.Fill;
    documentTabs.TabPages.Add(docTab);
    documentTabs.SelectedTab = docTab;
}

// Handle tab closing
documentTabs.SelectedTab.Closing += (sender, e) =>
{
    var result = MessageBox.Show("Save changes?", "Close", 
        MessageBoxButtons.YesNoCancel);
    if (result == DialogResult.Cancel)
        e.Cancel = true;
};

パターン 2：アイコン付きナビゲーションタブ

// Setup image list
ImageList tabImages = new ImageList();
tabImages.Images.Add("home", Properties.Resources.HomeIcon);
tabImages.Images.Add("settings", Properties.Resources.SettingsIcon);
tabControlAdv1.ImageList = tabImages;

// Create tabs with icons
TabPageAdv homeTab = new TabPageAdv();
homeTab.Text = "Home";
homeTab.ImageIndex = 0;

TabPageAdv settingsTab = new TabPageAdv();
settingsTab.Text = "Settings";
settingsTab.ImageIndex = 1;

// Configure alignment
tabControlAdv1.ImageAlignmentR = RelativeImageAlignment.LeftOfText;

パターン 3：タブナビゲーションコントロール

// Enable navigation primitives
tabControlAdv1.TabPrimitivesHost.Visible = true;

// Add navigation buttons
tabControlAdv1.TabPrimitivesHost.TabPrimitives.Add(
    new TabPrimitive(TabPrimitiveType.FirstTab, null, Color.Empty, true, 1, "First"));
tabControlAdv1.TabPrimitivesHost.TabPrimitives.Add(
    new TabPrimitive(TabPrimitiveType.PreviousTab, null, Color.Empty, true, 1, "Previous"));
tabControlAdv1.TabPrimitivesHost.TabPrimitives.Add(
    new TabPrimitive(TabPrimitiveType.NextTab, null, Color.Empty, true, 1, "Next"));
tabControlAdv1.TabPrimitivesHost.TabPrimitives.Add(
    new TabPrimitive(TabPrimitiveType.LastTab, null, Color.Empty, true, 1, "Last"));
tabControlAdv1.TabPrimitivesHost.TabPrimitives.Add(
    new TabPrimitive(TabPrimitiveType.DropDown, null, Color.Empty, true, 1, "DropDown"));

パターン 4：タブ選択の処理

// Prevent selection of specific tab
tabControlAdv1.SelectedIndexChanging += (sender, e) =>
{
    if (e.NewSelectedIndex == 2) // Prevent selecting 3rd tab
    {
        e.Cancel = true;
        MessageBox.Show("This tab is disabled");
    }
};

// React to selection changes
tabControlAdv1.SelectedIndexChanged += (sender, e) =>
{
    var selectedTab = tabControlAdv1.SelectedTab;
    Console.WriteLine($"Selected tab: {selectedTab.Text}");
    // Load content for selected tab
};

主なプロパティ

コアプロパティ

プロパティ	型	説明
TabPages	コレクション	TabPageAdv 項目のコレクション
SelectedIndex	int	現在選択されているタブのインデックス
SelectedTab	TabPageAdv	現在選択されているタブページ
Alignment	TabAlignment	タブの位置（上、下、左、右）
Multiline	bool	タブを複数行に表示できるようにします

外観プロパティ

プロパティ	型	説明
TabStyle	Type	テーマレンダラー（2D、3D、Metro、Office、VS スタイル）
ActiveTabColor	Color	アクティブなタブの背景色
InactiveTabColor	Color	非アクティブなタブの背景色
ActiveTabFont	Font	アクティブなタブのテキストに使用するフォント
SizeMode	TabSizeMode	タブのサイズ設定モード

機能プロパティ

プロパティ	型	説明
ShowTabCloseButton	bool	タブに閉じるボタンを表示します
UserMoveTabs	bool	ドラッグ＆ドロップによるタブの並べ替えを有効にします
LabelEdit	bool	実行時のタブテキスト編集を有効にします
ShowToolTips	bool	タブのツールチップを有効にします
ShowScroll	bool	タブが収まらない場合にスクロールボタンを表示します

ナビゲーションプロパティ

プロパティ	型	説明
TabPrimitivesHost	TabPrimitivesHost	ナビゲーションボタンのコンテナー
SwitchPagesForDialogKeys	bool	Ctrl+Tab によるナビゲーションを有効にします

一般的な使用例

使用例 1：アプリケーション設定ダイアログ

「全般」、「外観」、「詳細」などのカテゴリを含む、タブ付きの設定ダイアログを作成します。

• Alignment = TabAlignment.Left を使用して、タブを縦に配置します
• TabStyle を使って一貫したスタイルを適用します
• ImageList を使ってタブにアイコンを追加します

使用例 2：複数ドキュメントエディター

閉じることができるタブを備えたドキュメントエディターを構築します。

• ShowTabCloseButton = true を有効にします
• Closing イベントを処理して、未保存の変更がある場合に確認を促します
• 並べ替えには UserMoveTabs = true を使用します

使用例 3：ウィザードインターフェース

タブ選択を無効にした、ステップごとのウィザードを作成します。

• ナビゲーションの制御には SelectedIndexChanging を使用します
• 進行状況を示すためにカスタムカラーを適用します
• ウィザードの流れに応じてタブを表示または非表示にします

使用例 4：セクション分けされたダッシュボード

ダッシュボードのコンテンツをセクションごとに整理します。

• タブが多い場合は Multiline = true を使用します
• タブ幅を均一にするには SizeMode.FillToRight を適用します
• タブが収まらない場合に備えて ShowScroll を有効にします

アセンブリ参照

必要なアセンブリ：

• Syncfusion.Shared.Base.dll
• Syncfusion.Shared.Windows.dll
• Syncfusion.Tools.Base.dll
• Syncfusion.Tools.Windows.dll

タブ内で Grid コントロールを使用する場合は、次のアセンブリも追加します。

• Syncfusion.Grid.Base.dll
• Syncfusion.Grid.Windows.dll