syncfusion-winforms-navigation-pane

Syncfusion WinForms でのナビゲーションペイン（GroupBar）の実装

このスキルでは、階層化されたグループを折りたたみ可能なセクションと子アイテムのコレクションで表示する、Outlook スタイルのナビゲーションコンテナーである Syncfusion.Tools.WinForms（Navigation Pane）コントロールの実装方法を説明します。

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

ユーザーが次のことを行う必要がある場合に、このスキルを使用してください。

• Outlook スタイルのナビゲーションペイン（Microsoft Outlook のサイドバーに似たもの）を実装する
• 折りたたみ可能なグループを備えた階層型サイドバーナビゲーションを作成する
• ツールボックススタイルのインターフェイス（Visual Studio .NET のツールボックスのようなもの）を構築する
• GroupBarItems を使ってカテゴリ分けされたコントロールコレクションを追加する
• グループ内に子アイテムを表示するための GroupView を実装する
• 下部にナビゲーションペインを配置するために StackedMode を有効にする（Outlook スタイル）
• Office 2007/2010/2016 テーマと Metro スタイルを適用する
• ネストされた GroupBar（GroupBar 内の GroupBar）を作成する
• ナビゲーションアイテムのインプレース名前変更を追加する
• ナビゲーションレイアウトを保存・復元するためのシリアル化を実装する
• ヘッダー、境界線、色、アニメーションをカスタマイズする
• 標準パネルをテーマ対応のナビゲーションコンテナーに置き換える

GroupBar は、カテゴリ分けされたナビゲーション、ツールボックススタイルのインターフェイス、または Outlook に着想を得たサイドバーレイアウトを必要とするアプリケーションに最適です。

コンポーネントの概要

GroupBar（Navigation Pane）は、複数のグループ（GroupBarItems）を表示するコンテナーコントロールです。一度に表示されるのは、選択されたグループのコンテンツのみです。子アイテムの表示には GroupView を使用します。主な機能は次のとおりです。

• GroupBarItem：タブ形式のナビゲーションアイテム（グループ／カテゴリ）
• GroupView：グループ内の子アイテムを表示するクライアントコントロール
• GroupViewItem：GroupView 内の個々の子アイテム
• StackedMode：折りたたみ可能なスタックを備えたナビゲーションペインモード（Outlook のような表示）
• Office テーマ：Office 2007/2010/2016、Metro、Office2016Colorful/White/DarkGray/Black
• ネストされた GroupBar：別の GroupBar 内に GroupBar を配置
• シリアル化：レイアウトの状態とアイテムの位置を保存・復元
• 外観のカスタマイズ：ヘッダー、境界線、色、フォント、アニメーション
• インプレース名前変更：実行時に GroupBarItem の名前を編集
• ローカライズ：多言語対応

標準の Panel/TabControl との主な違い： GroupBar は、GroupView との統合、折りたたみ可能なナビゲーションペインのための StackedMode、Office テーマ、階層型アイテム表示機能を備えた Outlook スタイルのナビゲーションを提供します。

追加リソース

アセンブリ： Syncfusion.Shared.Base.dll
名前空間： Syncfusion.Windows.Forms.Tools
NuGet パッケージ： Syncfusion.Shared.Base 最小 .NET Framework： 4.5

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

はじめにと基本設定

📄 参照： references/getting-started.md

次の情報が必要な場合は、このリファレンスを参照してください。

• アセンブリの依存関係と NuGet パッケージのインストール
• 名前空間：Syncfusion.Windows.Forms.Tools
• デザイナーまたはコードを使用した GroupBar の作成
• コントロールへの GroupBarItems の追加
• GroupBar の基本的な設定
• GroupBar の構造の理解
• 最小限の完全な動作サンプル

GroupBar アイテムと構造

📄 参照： references/groupbar-items-and-structure.md

次の情報が必要な場合は、このリファレンスを参照してください。

• GroupBarItem インスタンスの作成
• アイテムラベル用の Text プロパティ
• アイテムアイコン用の Image プロパティ
• Client プロパティ（GroupView との関連付け）
• GroupBarItems コレクションの管理
• アイテムの選択とナビゲーション
• GroupBarItemSelected イベントの処理
• グループナビゲーションの完全なサンプル

GroupView と子項目

📄 参照： references/groupview-and-child-items.md

次の内容が必要な場合は、このリファレンスを参照してください。

• GroupView の概要（グループを制御するクライアント）
• GroupView インスタンスの作成
• 子項目用の GroupViewItem
• GroupViewItems コレクションへの項目の追加
• GroupView と GroupBarItem.Client のリンク
• GroupView での項目の選択
• GroupViewItem のクリックイベント
• ツールボックス形式のインターフェースの構築

Stacked Mode（ナビゲーションペイン）

📄 参照： references/stacked-mode.md

次の内容が必要な場合は、このリファレンスを参照してください。

• StackedMode プロパティ（Outlook 形式のナビゲーション）
• 下部のナビゲーションペイン
• 折りたたみ状態の HeaderHeight プロパティ
• Stacked 項目間のナビゲーション
• 展開／折りたたみ状態の管理
• Stacked レイアウトのシリアル化
• Outlook の完全なクローンの例

ビジュアルスタイルとテーマ

📄 参照： references/visual-styles-and-themes.md

次の内容が必要な場合は、このリファレンスを参照してください。

• VisualStyle プロパティの概要
• Office2007 テーマ（Blue、Silver、Black、Managed）
• Office2007Outlook テーマ
• Office2010 テーマ（Blue、Silver、Black、Managed）
• Metro テーマ
• Office2016 テーマ（Colorful、White、DarkGray、Black）
• カスタムブランディング向けの Managed カラー
• テーマの比較と選択
• 実行時のテーマの適用

外観のカスタマイズ

📄 参照： references/appearance-customization.md

次の内容が必要な場合は、このリファレンスを参照してください。

• ヘッダーのカスタマイズ（色、フォント、高さ）
• 境界線の設定（スタイル、色）
• テキストの配置と設定
• 画像表示の構成
• ツールチップの設定
• カーソルのカスタマイズ
• アニメーションの設定
• カスタムカラーとグラデーション

高度な機能と構成

📄 参照： references/advanced-features.md

次の内容が必要な場合は、このリファレンスを参照してください。

• GroupBar の入れ子のサポート（GroupBar 内の GroupBar）
• GroupBarItems のインプレースでの名前変更
• レイアウト状態のシリアル化
• ローカライズのサポート
• GroupView でのリンク選択
• カスタムコントロールのホスティング
• イベント処理（GroupBarItemSelected など）
• 複雑なナビゲーションシナリオ

クイックスタートの例

GroupBar と項目および子コンテンツを作成する最小限の例を示します。

using Syncfusion.Windows.Forms.Tools;
using System;
using System.Drawing;
using System.Windows.Forms;

public class GroupBarExample : Form
{
    private GroupBar groupBar1;
    
    public GroupBarExample()
    {
        // Create GroupBar
        groupBar1 = new GroupBar();
        groupBar1.Dock = DockStyle.Left;
        groupBar1.Width = 200;
        
        // Create GroupBarItems
        GroupBarItem mailItem = new GroupBarItem();
        mailItem.Text = "Mail";
        
        GroupBarItem calendarItem = new GroupBarItem();
        calendarItem.Text = "Calendar";
        
        GroupBarItem contactsItem = new GroupBarItem();
        contactsItem.Text = "Contacts";
        
        // Add items to GroupBar
        groupBar1.GroupBarItems.AddRange(new GroupBarItem[] {
            mailItem,
            calendarItem,
            contactsItem
        });
        
        // Add GroupBar to form
        this.Controls.Add(groupBar1);
        
        this.Text = "GroupBar Example";
        this.Size = new Size(600, 400);
    }
}

結果： Microsoft Outlook に似た、3 つのグループ（Mail、Calendar、Contacts）を持つ左側にドッキングされたナビゲーションペインです。

よく使われるパターン

GroupView を使った Outlook 形式のナビゲーション

パターン： 子項目を持つ Outlook 風のナビゲーションペインを作成します。

// Create GroupBar
GroupBar groupBar = new GroupBar();
groupBar.Dock = DockStyle.Left;
groupBar.Width = 220;
groupBar.VisualStyle = VisualStyle.Office2016Colorful;

// Create GroupBarItem
GroupBarItem mailItem = new GroupBarItem();
mailItem.Text = "Mail Folders";

// Create GroupView for child items
GroupView mailView = new GroupView();
mailView.Name = "MailView";
mailView.GroupViewItems.AddRange(new GroupViewItem[] {
    new GroupViewItem("Inbox", 0, true, null, "Inbox"),
    new GroupViewItem("Drafts", 1, true, null, "Drafts"),
    new GroupViewItem("Sent Items", 2, true, null, "Sent"),
    new GroupViewItem("Deleted Items", 3, true, null, "Deleted")
});

// Link GroupView to GroupBarItem
mailItem.Client = mailView;
groupBar.Controls.Add(mailView);
groupBar.GroupBarItems.Add(mailItem);

// Handle item click
mailView.GroupViewItemSelected += (s, e) => {
    string folderName = ((sender as GroupView)?.SelectedItem >= 0 ? (sender as GroupView).GroupViewItems[(sender as GroupView).SelectedItem].Text : null)`;
    LoadMailFolder(folderName);
};

this.Controls.Add(groupBar);

用途： フォルダー階層を持つ Outlook 形式のメールナビゲーションが必要な場合。

Visual Studio のツールボックスのクローン

パターン： カテゴリ別に分類されたコントロールを持つツールボックス形式のインターフェースを作成します。

// Create GroupBar for toolbox
GroupBar toolbox = new GroupBar();
toolbox.Dock = DockStyle.Left;
toolbox.Width = 200;
toolbox.VisualStyle = VisualStyle.Office2010;

// Create "Windows Forms" category
GroupBarItem winFormsItem = new GroupBarItem();
winFormsItem.Text = "Windows Forms";

GroupView winFormsView = new GroupView();
winFormsView.GroupViewItems.AddRange(new GroupViewItem[] {
    new GroupViewItem("Button", 0, true, null, "Button"),
    new GroupViewItem("TextBox", 1, true, null, "TextBox"),
    new GroupViewItem("Label", 2, true, null, "Label"),
    new GroupViewItem("ComboBox", 3, true, null, "ComboBox")
});

// Create "Data" category
GroupBarItem dataItem = new GroupBarItem();
dataItem.Text = "Data";

GroupView dataView = new GroupView();
dataView.GroupViewItems.AddRange(new GroupViewItem[] {
    new GroupViewItem("DataSet", 0, true, null, "DataSet"),
    new GroupViewItem("DataTable", 1, true, null, "DataTable"),
    new GroupViewItem("BindingSource", 2, true, null, "BindingSource")
});

// Link and add
winFormsItem.Client = winFormsView;
dataItem.Client = dataView;

toolbox.Controls.Add(winFormsView);
toolbox.Controls.Add(dataView);

toolbox.GroupBarItems.Add(winFormsItem);
toolbox.GroupBarItems.Add(dataItem);

this.Controls.Add(toolbox);

用途： Visual Studio のように、折りたたみ可能なセクションを持つカテゴリ別のツールボックスが必要な場合。

Stacked ナビゲーションペイン（Outlook モード）

パターン： 下部ペインを持つ Outlook 形式の Stacked ナビゲーションを有効にします。

// Create GroupBar in stacked mode
GroupBar navPane = new GroupBar();
navPane.Dock = DockStyle.Left;
navPane.Width = 220;
navPane.StackedMode = true; // Enable Outlook-style navigation
navPane.VisualStyle = VisualStyle.Office2016White;

// Create multiple GroupBarItems
GroupBarItem mailItem = new GroupBarItem();
mailItem.Text = "Mail";

GroupBarItem calendarItem = new GroupBarItem();
calendarItem.Text = "Calendar";

GroupBarItem contactsItem = new GroupBarItem();
contactsItem.Text = "Contacts";

GroupBarItem tasksItem = new GroupBarItem();
tasksItem.Text = "Tasks";

// Add all items
navPane.GroupBarItems.AddRange(new GroupBarItem[] {
    mailItem,
    calendarItem,
    contactsItem,
    tasksItem
});

// Handle item selection
navPane.GroupBarItemSelected += (s, e) => {
    string selectedSection = ((sender as GroupView)?.SelectedItem >= 0 ? (sender as GroupView).GroupViewItems[(sender as GroupView).SelectedItem].Text : null)`;
    LoadSection(selectedSection);
};

this.Controls.Add(navPane);

用途： Stacked 項目と下部のナビゲーションペインを持つ Outlook 形式のナビゲーションが必要な場合。

主なプロパティ

コアプロパティ

プロパティ	型	説明	使用する場面
GroupBarItems	コレクション	GroupBarItem インスタンスのコレクション	ナビゲーショングループを追加する
SelectedItem	GroupBarItem	現在選択されている項目	アクティブなグループを取得／設定する
StackedMode	bool	Outlook 形式の Stacked ナビゲーションを有効にする	Outlook 風のレイアウト
VisualStyle	VisualStyle	ビジュアルテーマ	Office テーマを適用する
HeaderHeight	int	GroupBar ヘッダーの高さ	ヘッダーのサイズをカスタマイズする

GroupBarItem のプロパティ

プロパティ	型	説明	使用する場面
Text	string	項目の表示テキスト	グループのラベルを設定する
Image	Image	項目のアイコン画像	視覚的な識別子を追加する
Client	Control	クライアントコントロール（通常は GroupView）	コンテンツを項目にリンクする
Selected	bool	項目が選択されているかどうか	選択状態を確認／設定する

GroupView のプロパティ

プロパティ	型	説明	使用する場面
GroupViewItems	Collection	ビュー内の子項目	子項目を追加する
SelectedItem	GroupViewItem	現在選択されている子項目	選択された子項目を取得／設定する
Name	string	ビューの識別子	ビューを参照する

スタイルのプロパティ

プロパティ	型	説明	使用する場面
VisualStyle	VisualStyle	テーマ（Office2007/2010/2016/Metro）	テーマを適用する
Office2007Theme	Office2007Theme	Office2007 の配色	Blue/Silver/Black/Managed
Office2010Theme	Office2010Theme	Office2010 の配色	Blue/Silver/Black/Managed
BorderStyle	BorderStyle	境界線の外観	境界線をカスタマイズする
BackColor	Color	背景色	カスタム背景を設定する

高度なプロパティ

プロパティ	型	説明	使用する場面
AllowCollapse	bool	グループの折りたたみを許可する	折りたたみ動作を有効にする
AllowInPlaceEditing	bool	項目名の変更を有効にする	実行時に編集する
AnimateCollapse	bool	折りたたみ／展開をアニメーション表示する	スムーズな遷移を実現する
ShowToolTips	bool	ツールヒントを表示する	項目の説明を表示する

よくある使用例

メールクライアントのナビゲーション

Outlook 風のメールフォルダーのナビゲーション：

• メールフォルダー（受信トレイ、下書き、送信済み、削除済み）
• 予定を含むカレンダービュー
• カテゴリ別の連絡先リスト
• 優先度別のタスクセクション

IDE のツールボックスインターフェイス

Visual Studio 風のツールボックス：

• カテゴリ別に整理されたコントロールコレクション
• コンポーネントのカテゴリ（データ、レイアウト、コントロール）
• 折りたたみ可能なセクション
• ドラッグ＆ドロップによるツールの選択

ドキュメント管理システム

階層構造のドキュメントナビゲーション：

• ドキュメントのカテゴリとフォルダー
• プロジェクトの階層
• ファイルの種類ごとのグループ
• アーカイブセクション

設定パネルと構成パネル

カテゴリ別の設定ナビゲーション：

• 一般設定セクション
• アカウント設定
• 詳細オプション
• テーマのカスタマイズ

実装チェックリスト

GroupBar（ナビゲーションペイン）を実装する際は、次の点を確認してください。

• ✅ 必要なアセンブリを参照する（Syncfusion.Shared.Base.dll）
• ✅ 名前空間を含める（Syncfusion.Windows.Forms.Tools）
• ✅ GroupBar インスタンスを作成して構成する
• ✅ GroupBarItemsを GroupBarItems コレクションに追加する
• ✅ 子項目を表示する場合はGroupViewを作成する
• ✅ Client プロパティを設定して GroupView を GroupBarItem にリンクする
• ✅ ビジュアルスタイルを適用する（VisualStyle プロパティ）
• ✅ 適切なレイアウトになるようDock プロパティを設定する（通常は DockStyle.Left）
• ✅ イベントハンドラーを追加して項目の選択に対応する
• ✅ 複数の項目とナビゲーションを使ってテストする

トラブルシューティングのクイックリファレンス

問題： GroupBar が表示されない

• GroupBar がフォームの Controls に追加されているか確認します
• Dock プロパティを設定します（DockStyle.Left を推奨）
• Width プロパティに十分な値が設定されているか確認します（通常は 200～250 ピクセル）
• ドッキングされたコントロールを配置できるスペースがフォームにあることを確認します

問題： GroupBarItems が表示されない

• GroupBarItems コレクションに項目が追加されているか確認します
• 各項目に Text プロパティが設定されているか確認します
• GroupBar.Visible = true であることを確認します
• 項目が折りたたまれたり、非表示になったりしていないことを確認します

問題： 子項目（GroupViewItems）が表示されない

• GroupView のインスタンスを作成します
• GroupView.GroupViewItems コレクションに GroupViewItems を追加します
• GroupBarItem.Client = groupView を設定します
• GroupBar.Controls コレクションに GroupView を追加します

問題： StackedMode が機能しない

• StackedMode = true を設定します
• 複数の GroupBarItems があることを確認します（スタッキングには 2 つ以上必要です）
• HeaderHeight プロパティを確認します（0 にするとヘッダーが非表示になります）
• ビジュアルスタイルがスタックモードに対応していることを確認します

問題： テーマが適用されない

• VisualStyle プロパティに目的のテーマを設定します
• Office2007/2010 の場合は、対応するテーマプロパティ（Office2007Theme、Office2010Theme）を設定します
• 管理対象の色を使用する場合は、ApplyManagedColors メソッドを呼び出します
• Syncfusion.Shared.Base アセンブリが参照されていることを確認します

問題： GroupView の選択が機能しない

• GroupViewItemSelected イベントを処理します
• GroupView.SelectedItem プロパティを確認します
• GroupViewItems に一意の識別子が設定されていることを確認します
• クリックイベントが正しく設定されていることを確認します

まとめ

GroupBar（ナビゲーションペイン）は、Outlook 形式のナビゲーション機能を提供します。

• 階層型ナビゲーション：GroupView の子項目を含む GroupBarItem グループ
• スタックモード：折りたたみ可能なセクションを備えた Outlook 形式のナビゲーションペイン
• Office テーマ：Office 2007/2010/2016、Metro、カスタムテーマ
• ネストのサポート：GroupBar 内に GroupBar を配置可能
• シリアル化：レイアウト状態の保存と復元
• 外観のカスタマイズ：ヘッダー、境界線、色、アニメーション

Outlook 形式のナビゲーション、ツールボックスインターフェイス、カテゴリ分けされた階層、またはテーマ対応のナビゲーションコンテナーが必要な場合は、GroupBar を使用して、プロフェッショナルで整理された WinForms アプリケーションを作成できます。