syncfusion-maui-navigation-drawer

ナビゲーションドロワーの実装

.NET MAUI Navigation Drawer（SfNavigationDrawer）は、スライド式ドロワー機能を備えたナビゲーションペインを作成するためのコンポーネントです。メインコンテンツ領域と、画面の任意の端から展開するスライド式ペインで構成されます。ドロワーはスワイプジェスチャーまたはプログラムから開くことができ、複数の位置、アニメーション、カスタマイズオプションに対応しています。

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

ユーザーが次の機能を必要としている場合に、このスキルを使用します。

• ナビゲーションメニュー - メニュー項目を含む、アプリ内ナビゲーション用のサイドパネル
• ハンバーガーメニュー - スライド式ドロワーを使った、モバイルで一般的なナビゲーションパターン
• ドロワーベースのレイアウト - 画面の任意の端からスライドするパネルを必要とするアプリ
• 複数ドロワー UI - 左右の両側など、複数の側面にドロワーを持つアプリケーション
• スワイプナビゲーション - ジェスチャーに対応した、タッチ操作によるドロワーの操作
• アニメーション付きのトランジション - 滑らかなドロワーアニメーション（SlideOnTop、Push、Reveal）
• コンテキストパネル - 必要に応じてスライドイン／アウトするセカンダリコンテンツ領域

コンポーネントの概要

SfNavigationDrawer コントロールは、次の機能を提供します。

• 4方向の配置（Left、Right、Top、Bottom）
• 3種類のアニメーション（SlideOnTop、Push、Reveal）
• コンテンツ領域：ドロワーヘッダー、ドロワーフッター、ドロワーコンテンツ、メインコンテンツ
• プログラムおよびジェスチャーによる操作
• ドロワーの状態を管理するイベント駆動型アーキテクチャ
• 複数ドロワーへの対応（プライマリ＋セカンダリ）
• サイズと背景のカスタマイズ
• スワイプジェスチャーの設定
• リキッドグラス効果（iOS 26+、macOS 26+、.NET 10+）

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

はじめに

📄 参照： references/getting-started.md

参照する場面：ユーザーが初めて NavigationDrawer を設定する場合や、インストール方法を知りたい場合。

• NuGet パッケージのインストール（Syncfusion.Maui.NavigationDrawer）
• Syncfusion ハンドラーの登録（.ConfigureSyncfusionCore()）
• ContentView を使用した基本的なドロワーの実装
• ハンバーガーメニューの切り替えボタンの作成
• ドロワーコンテンツを使った最初の動作例

ドロワーの配置とサイズ

📄 参照： references/drawer-positioning.md

参照する場面：ユーザーがドロワーを特定の側に配置したい場合や、ドロワーの寸法を調整したい場合。

• Position プロパティ（Left、Right、Top、Bottom）
• 左右に配置する場合の DrawerWidth
• 上下に配置する場合の DrawerHeight
• 側面ごとの設定例
• サイズ設定のベストプラクティス

コンテンツ管理

📄 参照： references/content-management.md

参照する場面：ユーザーがドロワーのコンテンツ領域、ヘッダー、フッター、またはメインコンテンツを設定したい場合。

• ContentView（メインコンテンツ領域。必須）
• DrawerHeaderView の設定
• DrawerContentView（ナビゲーションメニューのコンテンツ）
• DrawerFooterView の設定
• ヘッダー／フッターの高さのカスタマイズ
• ContentBackground のスタイル設定
• ドロワーコンテンツとして CollectionView を使用
• コンテンツを動的に切り替えるパターン

アニメーションとトランジション

📄 参照： references/animations-transitions.md

参照する場面：ユーザーがドロワーの開閉アニメーションや効果をカスタマイズしたい場合。

• トランジションの種類（SlideOnTop、Push、Reveal）
• アニメーションの違いと用途
• アニメーション速度を設定する Duration プロパティ
• AnimationEasing のカスタマイズ
• パフォーマンスに関する考慮事項
• アニメーションの種類の視覚的な比較

ドロワーの切り替えと操作

📄 参照： references/toggling-drawer.md

参照する場面：ユーザーがプログラムからドロワーを開閉したり、ドロワーの状態を制御したりしたい場合。

• ToggleDrawer() メソッド
• 状態管理用の IsOpen プロパティ
• プログラムによる開閉操作
• ドロワーの初期状態の設定
• メニュー項目の選択時にドロワーを閉じる
• ハンバーガーボタンとの連携

イベント処理

📄 参照: references/events.md

参照するタイミング：ユーザーがドロワーの状態変化に応答したい場合、またはドロワーの動作を制御したい場合。

• DrawerOpening イベント（キャンセル可能）
• DrawerOpened イベント
• DrawerClosing イベント（キャンセル可能）
• DrawerClosed イベント
• DrawerToggled イベント
• イベント引数と使用パターン
• Cancel プロパティによるドロワーの開閉の防止

スワイプジェスチャー

📄 参照: references/swipe-gestures.md

参照するタイミング：ユーザーがスワイプジェスチャーを有効／無効にしたい場合、またはタッチ感度を調整したい場合。

• EnableSwipeGesture プロパティ
• スワイプ領域の TouchThreshold
• スワイプによる開き方
• スワイプによる閉じ方
• 必要に応じたジェスチャーの無効化
• デバイスに応じた感度の調整

高度な機能

📄 参照: references/advanced-features.md

参照するタイミング：ユーザーが複数のドロワーの設定、リキッドグラス効果、または複雑なドロワーのシナリオを必要とする場合。

• 複数のドロワーの実装（DrawerSettings + SecondaryDrawerSettings）
• ToggleSecondaryDrawer() メソッド
• 異なる側に複数のドロワーを開く
• リキッドグラス効果（EnableLiquidGlassEffect）
• iOS 26+/macOS 26+ 向けの LiquidGlassSettings
• 複雑なナビゲーションパターン
• パフォーマンス最適化の手法