syncfusion-wpf-navigation-drawer

Syncfusion WPF Navigation Drawer の実装

WPF Navigation Drawer コントロールは、アプリケーション内で直感的かつ効率的なナビゲーションメニューを作成するためのサイドバーナビゲーションコンポーネントです。コンパクト表示モードと展開表示モードに対応しており、利用可能な画面サイズに応じて動的に切り替えられます。また、このコントロールには、開発者が完全にカスタマイズしたペインビューを定義できるデフォルトモードも用意されており、ナビゲーション体験を設計する際の柔軟性が高まります。

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

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

• WPF アプリケーションでサイドバーナビゲーションメニューを作成する
• ハンバーガーメニューを備えた折りたたみ式ドロワーナビゲーションを実装する
• コンパクトモードと展開モードを備えたレスポンシブナビゲーションを構築する
• アイコン付きの階層型ナビゲーションメニュー項目を追加する
• スワイプ可能なサイドパネルを実装する
• ヘッダーとフッターを備えたカスタムナビゲーションビューを作成する
• ナビゲーションイベントと選択を処理する
• ドロワーメニューでキーボードナビゲーションに対応する
• WPF でモダンな UI ナビゲーションパターンを構築する

コンポーネントの概要

Syncfusion WPF Navigation Drawer（SfNavigationDrawer） は、次の機能を備えたサイドバーナビゲーションコントロールです。

• 3 つの表示モード： デフォルト（折りたたみ可能）、コンパクト（アイコンのみ）、展開（全幅）
• 柔軟な配置： 左、右、上、下への配置
• 組み込みのナビゲーション項目： 階層構造に対応した Tab、Button、Header、Separator タイプ
• カスタムビュー： ヘッダー、コンテンツ、フッターの各セクションを完全にカスタマイズ可能
• データバインディング： 階層型データバインディングに対応した ItemsSource
• 豊富なイベント： Opening、Opened、Closing、Closed、ItemClicked、ItemExpanded、ItemCollapsed
• キーボードサポート： 完全なキーボードナビゲーション（Tab、矢印キー、Enter、Space）
• スムーズなアニメーション： SlideOnTop、Push、Reveal のトランジション効果
• レスポンシブデザイン： 利用可能な幅に応じて表示モードを自動で切り替え

ユースケース：

• メールクライアントのナビゲーション（受信トレイ、送信済み、下書きとネストされたカテゴリ）
• E コマースアプリのメニュー（商品、カート、注文とサブカテゴリ）
• 銀行アプリのナビゲーション（口座、振込、支払い）
• マルチレベルナビゲーションを備えた管理ダッシュボード
• デスクトップ WPF アプリにおけるモバイル風ナビゲーション

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

はじめに

📄 参照先： references/getting-started.md 次の場合に使用： 初めて実装する場合、コントロールを設定する場合、基本構造を理解する場合

• インストールとアセンブリの配置
• XAML と C# で基本的な NavigationDrawer を作成する
• コンテンツビューとサイドバーメニュー項目を追加する
• アイコン付きのナビゲーション項目を設定する
• 最小限の動作するサンプル

表示モード

📄 参照先： references/display-modes.md 次の場合に使用： デフォルト、コンパクト、展開モードから選択する場合、レスポンシブナビゲーションを実装する場合

• デフォルトモード（カスタムビューを備えた折りたたみ式ドロワー）
• コンパクトモード（切り替え時に展開する細いアイコンバー）
• 展開モード（全幅のサイドバー）
• ウィンドウ幅に応じた表示モードの自動切り替え
• CompactModeWidth と ExpandedModeWidth の設定
• レスポンシブ動作のための ExpandedModeThresholdWidth

データの設定

📄 参照先： references/populating-data.md 次の場合に使用： メニュー項目を追加する場合、データソースをバインドする場合、階層型ナビゲーションを作成する場合

• 組み込み NavigationItem のプロパティ（Header、Icon、Items）
• ItemsSource のデータバインディング
• ネストされた項目を含む階層型データバインディング
• IconTemplate と ItemTemplate のカスタマイズ
• 各種項目タイプ：Tab、Button、Header、Separator
• DisplayMemberPath と IconMemberPath
• サブ項目の IndentationWidth
• サブ項目のポップアップ対応

カスタムビューとカスタマイズ

📄 参照： references/custom-views.md 使用する場面： カスタムドロワーレイアウトの作成、ドロワーの配置、アニメーションの追加

• DrawerHeaderView、DrawerContentView、DrawerFooterView
• DrawerWidth と DrawerHeight のカスタマイズ
• Position プロパティ（Left、Right、Top、Bottom）
• スワイプジェスチャーと TouchThreshold
• トランジションアニメーション（SlideOnTop、Push、Reveal）
• AnimationDuration の設定
• DrawerBackground のカスタマイズ
• IsOpen プロパティによるプログラムからの制御
• ToggleDrawer() メソッド

ヘッダーとフッターのカスタマイズ

📄 参照： references/header-and-footer.md 使用する場面： 切り替えボタン、ヘッダー、またはフッターセクションのカスタマイズ

• ToggleButtonContentTemplate と ToggleButtonIconTemplate
• IsToggleButtonVisible プロパティ
• FooterItems コレクション
• HeaderHeight と FooterHeight プロパティ
• Default モードでのカスタムヘッダービューとフッタービュー

コマンドとイベント

📄 参照： references/commands-and-events.md 使用する場面： ドロワーの状態変更、項目クリック、ナビゲーションイベントの処理

• Opening および Opened イベント（キャンセルに対応）
• Closing および Closed イベント（キャンセルに対応）
• ItemClicked イベント（Compact／Expanded モードのみ）
• ItemExpanded および ItemCollapsed イベント
• Command と CommandParameter によるコマンドバインディング
• DelegateCommand の実装例

選択の処理

📄 参照： references/handling-selection.md 使用する場面： 選択項目の管理、ナビゲーション状態の追跡

• SelectedItem プロパティの使用
• NavigationItem による選択
• カスタムデータオブジェクトによる選択
• SelectionBackground のカスタマイズ

キーボードサポート

📄 参照： references/keyboard-support.md 使用する場面： キーボードナビゲーションの実装、アクセシビリティの確保

• Tab キーによる要素間の移動
• 上／下矢印キーによる項目の移動
• Enter キーと Space キーによる項目の選択
• フォーカス管理

クイックスタートの例

項目を含む基本的なナビゲーションドロワー

<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <syncfusion:SfNavigationDrawer x:Name="navigationDrawer" 
                                   DisplayMode="Expanded">
        
        <syncfusion:NavigationItem Header="Inbox" IsSelected="True">
            <syncfusion:NavigationItem.Icon>
                <Path Data="M32.032381,16.445429 L25.410999..." Fill="White"/>
            </syncfusion:NavigationItem.Icon>
        </syncfusion:NavigationItem>
        
        <syncfusion:NavigationItem Header="Sent mail">
            <syncfusion:NavigationItem.Icon>
                <Path Data="M42.128046,6.7269681..." Fill="White"/>
            </syncfusion:NavigationItem.Icon>
        </syncfusion:NavigationItem>
        
        <syncfusion:NavigationItem Header="Drafts">
            <syncfusion:NavigationItem.Icon>
                <Path Data="M6.9999996,48.353..." Fill="White"/>
            </syncfusion:NavigationItem.Icon>
        </syncfusion:NavigationItem>
        
        
        <syncfusion:SfNavigationDrawer.ContentView>
            <Grid>
                <Label Content="Content View" 
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center"/>
            </Grid>
        </syncfusion:SfNavigationDrawer.ContentView>
    </syncfusion:SfNavigationDrawer>
</Window>

コードビハインド（C#）

using Syncfusion.UI.Xaml.NavigationDrawer;

// Create navigation drawer
SfNavigationDrawer navigationDrawer = new SfNavigationDrawer();
navigationDrawer.DisplayMode = DisplayMode.Expanded;

// Add items
navigationDrawer.Items.Add(new NavigationItem()
{
    Header = "Inbox",
    Icon = new Path() { Data = Geometry.Parse("M32.032381...") },
    IsSelected = true
});

navigationDrawer.Items.Add(new NavigationItem()
{
    Header = "Sent mail",
    Icon = new Path() { Data = Geometry.Parse("M42.128046...") }
});

// Set content
Label label = new Label { Content = "Content View" };
navigationDrawer.ContentView = label;

よく使われるパターン

パターン 1：レスポンシブナビゲーション（モードの自動切り替え）

<syncfusion:SfNavigationDrawer DisplayMode="Expanded"
                               AutoChangeDisplayMode="True"
                               ExpandedModeThresholdWidth="700">
    
</syncfusion:SfNavigationDrawer>

使用する場面： ウィンドウサイズの変更に応じて適応する必要があるデスクトップアプリ

パターン 2：サブ項目を含む階層型ナビゲーション

<syncfusion:NavigationItem Header="Inbox" IsExpanded="True">
    <syncfusion:NavigationItem.Icon>
        <Path Data="..." Fill="White"/>
    </syncfusion:NavigationItem.Icon>
    
    <syncfusion:NavigationItem Header="Primary">
        <syncfusion:NavigationItem.Icon>
            <Path Data="..." Fill="White"/>
        </syncfusion:NavigationItem.Icon>
    </syncfusion:NavigationItem>
    <syncfusion:NavigationItem Header="Social">
        <syncfusion:NavigationItem.Icon>
            <Path Data="..." Fill="White"/>
        </syncfusion:NavigationItem.Icon>
    </syncfusion:NavigationItem>
</syncfusion:NavigationItem>

使用する場面： マルチレベルのナビゲーションメニュー（例：メールのカテゴリ、製品カテゴリ）

パターン 3：ヘッダーとフッターを含むカスタムドロワー

<syncfusion:SfNavigationDrawer DisplayMode="Default" DrawerWidth="300">
    <syncfusion:SfNavigationDrawer.DrawerHeaderView>
        <Grid Background="#31ade9">
            <Label Content="User Profile" />
        </Grid>
    </syncfusion:SfNavigationDrawer.DrawerHeaderView>
    
    <syncfusion:SfNavigationDrawer.DrawerContentView>
        <ListBox ItemsSource="{Binding MenuItems}"/>
    </syncfusion:SfNavigationDrawer.DrawerContentView>
    
    <syncfusion:SfNavigationDrawer.DrawerFooterView>
        <Button Content="Logout" />
    </syncfusion:SfNavigationDrawer.DrawerFooterView>
    
    <syncfusion:SfNavigationDrawer.ContentView>
        <Grid></Grid>
    </syncfusion:SfNavigationDrawer.ContentView>
</syncfusion:SfNavigationDrawer>

使用する場面： 組み込みの項目以外のカスタムドロワーレイアウトが必要なアプリ

パターン 4：ItemsSource によるデータバインディング

<syncfusion:SfNavigationDrawer DisplayMode="Compact"
                               ItemsSource="{Binding NavigationItems}"
                               DisplayMemberPath="Title"
                               IconMemberPath="Icon">
</syncfusion:SfNavigationDrawer>

使用する場面： データベースまたは API から動的に生成するナビゲーションメニュー

主なプロパティ

必須プロパティ

プロパティ	型	説明
DisplayMode	DisplayMode	Default、Compact、Expanded のいずれか
Items	NavigationItemsCollection	NavigationItem オブジェクトのコレクション
ContentView	object	メインコンテンツ領域
IsOpen	bool	ドロワーの開閉状態を取得／設定します
SelectedItem	object	現在選択されているナビゲーション項目
Position	Position	Left、Right、Top、Bottom（Default モード）

表示モードのプロパティ

プロパティ	型	既定値	説明
AutoChangeDisplayMode	bool	false	幅に応じてモードを自動的に切り替えます
ExpandedModeThresholdWidth	double	1007	モード自動切り替えの幅のしきい値
CompactModeWidth	double	48	コンパクトモード時の幅
ExpandedModeWidth	double	320	展開モード時の幅

カスタマイズ用プロパティ

プロパティ	型	説明
DrawerWidth	double	ドロワーの幅（Default モード、Left／Right）
DrawerHeight	double	ドロワーの高さ（Default モード、Top／Bottom）
DrawerBackground	Brush	ドロワーの背景色
HeaderHeight	double	ヘッダーセクションの高さ
FooterHeight	double	フッターセクションの高さ
IndentationWidth	double	サブ項目の水平方向の間隔

アニメーション用プロパティ

プロパティ	型	オプション
Transition	Transition	SlideOnTop、Push、Reveal
AnimationDuration	TimeSpan	開閉アニメーションの時間
EnableSwipeGesture	bool	スワイプによる開閉を有効化
TouchThreshold	double	スワイプ感度（ピクセル）

テンプレート用プロパティ

プロパティ	型	説明
ToggleButtonContentTemplate	DataTemplate	トグルボタンのコンテンツをカスタマイズ
ToggleButtonIconTemplate	DataTemplate	トグルボタンのアイコンをカスタマイズ
ItemTemplate	DataTemplate	ナビゲーション項目のテンプレート
ItemTemplateSelector	DataTemplateSelector	動的なテンプレート選択

一般的なユースケース

ユースケース 1：メールクライアントのナビゲーション

シナリオ： メイン、ソーシャル、プロモーションを含む複数階層の受信トレイ 解決策： IsExpanded を備えた階層構造の NavigationItem と、Compact／Expanded モードを使用します 参照： references/populating-data.md

ユースケース 2：管理者ダッシュボード

シナリオ： サブセクションを含むトップレベルメニュー（ダッシュボード、ユーザー、設定） 解決策： ItemsSource によるデータバインディングと、階層型データ構造を使用します 参照： references/populating-data.md

ユースケース 3：モバイルスタイルのアプリ

シナリオ： コンテンツの上にスライドして表示されるハンバーガーメニュー 解決策： DrawerHeaderView を備えた Default モードを使用し、スワイプジェスチャを有効にします 参照： references/custom-views.md

ユースケース 4：レスポンシブなデスクトップアプリ

シナリオ： ウィンドウ幅が狭いときに自動的にコンパクトモードに切り替える 解決策： AutoChangeDisplayMode=true を設定した Expanded モードを使用します 参照： references/display-modes.md

ユースケース 5：銀行アプリ

シナリオ： イベント処理を伴う口座、振込、支払い 解決策： ItemClicked イベントと、ナビゲーション用の Command バインディングを使用します 参照： references/commands-and-events.md

実装のヒント

1. 適切な表示モードを選択する：

   • カスタムビューを使ったモバイルスタイルのオーバーレイには Default を使用します
   • 全幅に展開できるアイコンのみのサイドバーには Compact を使用します
   • 常に表示する全幅のサイドバーには Expanded を使用します

2. 組み込み項目とカスタムビューを使い分ける：

   • 標準的なナビゲーションメニューには NavigationItem（Compact／Expanded）を使用します
   • 独自のレイアウトには Custom Views（Default モード）を使用します

3. パフォーマンスを最適化する：

   • 大規模なデータセットには ItemsSource によるデータバインディングを使用します
   • 異種の項目には ItemTemplateSelector を実装します
   • 階層は浅く保ちます（最大 2～3 レベル）

4. 状態を適切に処理する：

   • 状態の変更をキャンセルするには Opening／Closing イベントを使用します
   • ナビゲーション状態を復元できるよう SelectedItem を保存します
   • ページ遷移には ItemClicked を処理します

5. アクセシビリティを確保する：

   • キーボードナビゲーションを実装します（すでに組み込まれています）
   • スクリーンリーダー向けに意味のある Header テキストを設定します
   • SelectionBackground に十分な色のコントラストを確保します