syncfusion-wpf-navigation-pane

WPF GroupBar の実装（ナビゲーションペイン）

GroupBar コントロールは、Microsoft Outlook Bar に似たナビゲーションペインを実装します。項目のカテゴリ別コレクションやカスタムコントロールを、展開・折りたたみ可能なセクションに配置します。複数のビジュアルモード、データバインディング、ドラッグアンドドロップによる並べ替え、コンテキストメニュー、ツールバー、テーマを完全にサポートします。

アセンブリ： Syncfusion.Tools.WPF + Syncfusion.Shared.WPF
名前空間： Syncfusion.Windows.Tools.Controls
XAML スキーマ： xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

コントロールの階層

GroupBar                    ← Root navigation container
└── GroupBarItem            ← Category tab/header (e.g., "Mailbox", "Contacts")
    ├── GroupView           ← List container for link-style items
    │   └── GroupViewItem   ← Clickable item with text and icon
    └── Panel / any UIElement ← Or use any WPF panel as content

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

• Outlook スタイルのナビゲーションサイドバーやアコーディオンパネルが必要な場合
• 内部にコンテンツを含む、展開・折りたたみ可能なセクションが必要な場合
• GroupBar、GroupBarItem、GroupView、GroupViewItem について質問がある場合
• StackMode（Outlook バー）、MultipleExpansion（ツリービュー）、または Default モードが必要な場合
• MVVM を使用した、データバインドされたナビゲーション項目が必要な場合
• ナビゲーション項目のドラッグアンドドロップによる並べ替えについて質問がある場合
• Navigation Pane のポップアップ、グリッパー、またはサイズ変更の動作について質問がある場合

クイックスタート

xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

<syncfusion:GroupBar Height="300" Width="230" VisualMode="StackMode" Name="groupBar">
    <syncfusion:GroupBarItem Header="Mailbox" HeaderImageSource="Images/mail.png">
        <syncfusion:GroupView>
            <syncfusion:GroupViewItem Text="Inbox"     ImageSource="Images/inbox.png"/>
            <syncfusion:GroupViewItem Text="Sent Items" ImageSource="Images/sent.png"/>
            <syncfusion:GroupViewItem Text="Deleted"   ImageSource="Images/trash.png"/>
        </syncfusion:GroupView>
    </syncfusion:GroupBarItem>
    <syncfusion:GroupBarItem Header="Contacts">
        <syncfusion:GroupView>
            <syncfusion:GroupViewItem Text="All Contacts"/>
            <syncfusion:GroupViewItem Text="Favorites"/>
        </syncfusion:GroupView>
    </syncfusion:GroupBarItem>
</syncfusion:GroupBar>

using Syncfusion.Windows.Tools.Controls;

GroupBar groupBar = new GroupBar();
groupBar.VisualMode = VisualMode.StackMode;

GroupBarItem item = new GroupBarItem { Header = "Mailbox" };
GroupView view = new GroupView();
view.Items.Add(new GroupViewItem { Text = "Inbox" });
item.Content = view;
groupBar.Items.Add(item);
this.Content = groupBar;

よくあるパターン

目的	方法
Outlook スタイルのナビゲーション	VisualMode="StackMode"
ツリースタイルで複数項目を展開	VisualMode="MultipleExpansion"
一度に 1 つだけ展開	VisualMode="Default"
折りたたみ可能なバー	AllowCollapse="True" + VisualMode="StackMode"
データバインドされた項目	ItemsSource + HeaderText/Content セッターを含む ItemContainerStyle
カスタム項目コンテンツ	任意の Panel または UIElement を GroupBarItem.Content に配置
リストビュー形式の項目	IsListViewMode="True" を指定した GroupView
ドラッグによる項目の並べ替え	DragItemVisibility="True"
ナビゲーションポップアップのサイズ変更	PopupResizeDirection="Both"
StackMode のグリッパー	ShowGripper="True" + VisualMode="StackMode"
バーの状態を保存・復元	SaveBarState() / LoadBarState() / ResetBarState()

主なプロパティ

プロパティ	型	説明
VisualMode	VisualMode	Default / MultipleExpansion / StackMode
AllowCollapse	bool	折りたたみを許可します（StackMode）
ShowGripper	bool	サイズ変更用グリッパーを表示します（StackMode）
ItemsSource	IEnumerable	データバインドされた項目
ItemContainerStyle	Style	各 GroupBarItem に適用するスタイル
DragItemVisibility	bool	ドラッグアンドドロップによる並べ替えを有効にします
DragMarkerBrush	Brush	ドラッグ時の挿入マーカーの色
PopupResizeDirection	PopupResizeDirection	ナビゲーションペインのポップアップのサイズ変更方向（Both/H/V/None）
ItemContentLength	double	選択した項目のコンテンツ領域の高さ／幅
GroupBarHeaderStyle	Style	GroupBar のヘッダー境界線に適用するスタイル
GroupBarItem.Header	string	項目ヘッダーの表示テキスト
GroupBarItem.HeaderImageSource	ImageSource	項目ヘッダーのアイコン
GroupBarItem.IsSelected	bool	この項目を初期状態で展開します
GroupBarItem.GroupBarItemCornerRadius	CornerRadius	項目ヘッダーの角丸
GroupView.IsListViewMode	bool	リストビュー形式（アイコン形式との切り替え）
GroupViewItem.Text	string	ビュー項目のテキストラベル
GroupViewItem.ImageSource	ImageSource	ビュー項目のアイコン
SaveOriginalState	bool	読み込み時に状態を自動保存します

---

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

はじめに

📄 参照： references/getting-started.md

• アセンブリ参照（Tools.WPF + Shared.WPF）
• デザイナー、XAML、または C# から追加
• GroupView コンテンツを含む宣言型の GroupBarItems
• GroupBarItem へのパネルコンテンツの追加
• VisualMode の基本概要
• SfSkinManager を使用したテーマ設定

GroupBar の項目

📄 参照： references/groupbar-items.md

• GroupBarItem のプロパティ（Header、HeaderText、HeaderImageSource）
• IsSelected、ShowInGroupBar、GroupBarItemCornerRadius
• GroupBarItemCursorType（Default/Hand）
• ItemContentLength（コンテンツ領域の高さ／幅）
• DraggingItemInProgress、HiddenItemsCount
• GroupBarItemAdded／GroupBarItemRemoved イベント

GroupView とコンテンツ

📄 参照： references/groupview-and-content.md

• GroupView は GroupViewItem 要素を含む項目コンテナーです
• GroupViewItem（Text、ImageSource、ツールチップ）
• IsListViewMode（リスト表示とアイコン表示の切り替え）
• GroupViewItem の既定の画像
• パネルやカスタム UIElements をコンテンツとして追加する方法
• 項目のコンテンツを回転する方法

表示モード

📄 参照： references/visual-modes.md

• 既定のモード（一度に 1 つの項目を展開）
• MultipleExpansion モード（ツリービュー形式）
• StackMode（Outlook バー形式、下部にポップアップメニューを表示）
• AllowCollapse、ShowGripper
• StackMode での ThemeStudio とクラシックテーマのレイアウトの違い

データバインディング

📄 参照： references/data-binding.md

• ItemsSource と ItemContainerStyle を使い、HeaderText／Content を設定する方法
• ObservableCollection を使った Model と ViewModel
• DataContext のバインディングパターン
• XML を使ったデータバインディング（XmlDataProvider）
• HeaderTemplate と ContentTemplate のカスタマイズ
• 条件付きスタイルに使う ItemContainerStyleSelector

方向とレイアウト

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

• GroupBar の向き（Horizontal/Vertical）
• GroupView と GroupViewItem の向き
• GroupBar の幅の調整、ヘッダーの高さの変更
• GroupBar の回転
• RTL サポートのための FlowDirection
• ナビゲーションペイン：PopupResizeDirection、ShowGripper

動作と機能

📄 参照： references/behavior-and-features.md

• ドラッグ＆ドロップによる並べ替え（DragItemVisibility、DragMarkerBrush）
• 組み込みのコンテキストメニュー（並べ替え、追加、名前変更、移動）
• GroupBar 内のツールバー
• GroupViewItem のツールチップ
• 展開／折りたたみ時のアニメーション
• StackMode での折りたたみと閉じる操作
• 状態の保存（SaveBarState/LoadBarState/ResetBarState）
• ローカライズ

外観

📄 参照： references/appearance.md

• GroupBarHeaderStyle（背景、角の丸み、高さ）
• CollapseButtonTemplate と CollapseButtonBackground
• ItemContainerStyle（HeaderTemplate と ContentTemplate）
• ItemContainerStyleSelector
• DragMarkerBrush
• SfSkinManager のテーマテーブル
• ThemeStudio のカスタムテーマ