syncfusion-winforms-navigation-drawer

Windows Forms ナビゲーションドロワー

Syncfusion Windows Forms ナビゲーションドロワーは、ウィンドウの端からスライドして表示されるメニューパネルです。非表示のパネルにコンテンツを表示できます。画面の4辺のいずれかからスワイプして表示するか、必要に応じてプログラムから開くことができます。

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

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

• 画面の端（左、右、上、または下）からスライドするメニューパネルを実装する
• 折りたたみ可能なサイドバーパネルを備えたハンバーガーメニューのナビゲーションを作成する
• 滑らかなアニメーションでスライドして表示される非表示パネルを構築する
• Windows Forms アプリケーションにドロワー形式のナビゲーションを追加する
• 遷移効果（SlideOnTop、Push、Reveal）を設定する
• 組み込みの Office 2016 テーマでドロワーの外観をカスタマイズする
• ドロワーのイベント（Opening、Closing、Opened、Closed）を処理する
• プログラムまたはユーザー操作によってドロワーの表示を切り替える
• 設定可能なアニメーションを使用して、画面の異なる端にナビゲーションパネルを配置する

コンポーネントの概要

主な機能：

• 4種類の配置オプション： 左、右、上、下
• 3種類の遷移タイプ： SlideOnTop、Push、Reveal
• 組み込みテーマ： Default、Office2016Colorful、Office2016White、Office2016DarkGray、Office2016Black
• ドロワーイベント： Opening、Closing、Opened、Closed
• アニメーション時間の設定
• プログラムから制御するドロワー切り替えメソッド
• 画像に対応したヘッダーとメニュー項目

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

はじめに

📄 参照： references/getting-started.md

次のような場合に、このリファレンスを参照してください。

• NuGet またはデザイナーを使用して NavigationDrawer コントロールをインストールする
• Windows Forms プロジェクトにコントロールを追加する
• プログラムから NavigationDrawer インスタンスを作成する
• ヘッダー（DrawerHeader）とメニュー項目（DrawerMenuItem）を追加する
• 基本的なドロワーのサイズ（DrawerWidth、DrawerHeight）を設定する
• メニュー項目に画像を追加する
• テキストと画像の配置（TextAlign、TextImageRelation）を設定する
• 基本的なサイドバーの配置を理解する

ドロワーの機能と設定

📄 参照： references/drawer-features.md

次のような場合に、このリファレンスを参照してください。

• ContentView（メインビューのコンテンツ）を設定する
• DrawerView の構造を理解する
• 遷移タイプ（SlideOnTop、Push、Reveal）を実装する
• ドロワーの位置（左、右、上、下）を設定する
• ドロワーのサイズとアニメーション時間を設定する
• プログラムから制御する ToggleDrawer メソッドを使用する
• 遷移効果の違いを理解する

カスタマイズとスタイル設定

📄 参照： references/customization.md

次のような場合に、このリファレンスを参照してください。

• 組み込みテーマ（Default、Office2016Colorful、Office2016White、Office2016DarkGray、Office2016Black）を適用する
• ドロワー項目の色（DefaultColor、BackColor、HoverColor）をカスタマイズする
• カスタムカラーでメニュー項目のスタイルを設定する
• アプリケーション全体に一貫したビジュアルテーマを適用する

イベント

📄 参照： references/events.md

次のような場合に、このリファレンスを参照してください。

• Opening イベント（展開遷移の開始時）を処理する
• Closing イベント（折りたたみ遷移の開始時）を処理する
• Opened イベント（展開遷移の終了時）を処理する
• Closed イベント（折りたたみ遷移の終了時）を処理する
• ドロワーの状態変化に応答する
• ドロワー操作をキャンセルする
• 遷移中にカスタムロジックを実装する

高度な使用方法

📄 参照： references/advanced-usage.md

次のような場合に、このリファレンスを参照してください。

• 複雑なコントロールを含む ContentViewContainer を設定する
• ContentView に RichTextBox やその他のコントロールを統合する
• 項目の動的な追加と削除を管理する
• 複雑な項目階層を実装する
• 大規模なメニューのパフォーマンスを最適化する
• ドロワー実装のベストプラクティスに従う

クイックスタート

基本的なナビゲーションドロワー

using Syncfusion.Windows.Forms.Tools;

// Create NavigationDrawer instance
NavigationDrawer navigationDrawer1 = new NavigationDrawer();
this.Controls.Add(navigationDrawer1);

// Set drawer dimensions
navigationDrawer1.DrawerWidth = this.Width / 4;
navigationDrawer1.DrawerHeight = this.Height;

// Set position and transition
navigationDrawer1.Position = SlidePosition.Left;
navigationDrawer1.Transition = Transition.SlideOnTop;

// Add header
DrawerHeader drawerHeader1 = new DrawerHeader();
drawerHeader1.Text = "Menu";
navigationDrawer1.Items.Add(drawerHeader1);

// Add menu items
DrawerMenuItem menuItem1 = new DrawerMenuItem();
menuItem1.Text = "Home";
menuItem1.Image = Image.FromFile(@"home.png");

DrawerMenuItem menuItem2 = new DrawerMenuItem();
menuItem2.Text = "Settings";
menuItem2.Image = Image.FromFile(@"settings.png");

navigationDrawer1.Items.Add(menuItem1);
navigationDrawer1.Items.Add(menuItem2);

// Add content to ContentView
RichTextBox richTextBox = new RichTextBox();
richTextBox.Text = "Main content area";
navigationDrawer1.ContentViewContainer.Controls.Add(richTextBox);

よく使われるパターン

パターン 1：Push 遷移を使った左スライドパネル

// Create drawer that pushes content when opened
NavigationDrawer drawer = new NavigationDrawer();
drawer.Position = SlidePosition.Left;
drawer.Transition = Transition.Push;
drawer.DrawerWidth = 250;
drawer.DrawerHeight = this.Height;
drawer.AnimationDuration = 150; // milliseconds

this.Controls.Add(drawer);

パターン 2：ボタンのクリックでドロワーを切り替える

// Toggle drawer visibility on button click
private void hamburgerButton_Click(object sender, EventArgs e)
{
    navigationDrawer1.ToggleDrawer();
}

パターン 3：カスタムカラーのテーマ付きドロワー

// Apply Office 2016 theme with custom item colors
navigationDrawer1.Style = NavigationDrawerStyle.Office2016Colorful;

// Customize menu item colors
drawerMenuItem1.DefaultColor = System.Drawing.Color.LightBlue;
drawerMenuItem1.HoverColor = System.Drawing.Color.SkyBlue;
drawerMenuItem1.BackColor = System.Drawing.Color.LightBlue;

パターン 4：ドロワーイベントの処理

// Subscribe to drawer events
navigationDrawer1.Opening += NavigationDrawer1_Opening;
navigationDrawer1.Opened += NavigationDrawer1_Opened;
navigationDrawer1.Closing += NavigationDrawer1_Closing;
navigationDrawer1.Closed += NavigationDrawer1_Closed;

private void NavigationDrawer1_Opening(object sender, OpeningEventArgs e)
{
    // Logic when drawer starts opening
    Console.WriteLine("Drawer is opening...");
}

private void NavigationDrawer1_Opened(object sender, EventArgs e)
{
    // Logic when drawer is fully open
    Console.WriteLine("Drawer opened");
}

private void NavigationDrawer1_Closing(object sender, CancelEventArgs e)
{
    // Can cancel closing if needed
    // e.Cancel = true;
    Console.WriteLine("Drawer is closing...");
}

private void NavigationDrawer1_Closed(object sender, EventArgs e)
{
    // Logic when drawer is fully closed
    Console.WriteLine("Drawer closed");
}

パターン 5：リビールトランジションを使用した右側ドロワー

// Create drawer that reveals from behind content
NavigationDrawer drawer = new NavigationDrawer();
drawer.Position = SlidePosition.Right;
drawer.Transition = Transition.Reveal;
drawer.DrawerWidth = 300;
drawer.AnimationDuration = 200;

// Add items
DrawerHeader header = new DrawerHeader { Text = "Options" };
drawer.Items.Add(header);

string[] menuItems = { "Profile", "Settings", "Notifications", "Help" };
foreach (string item in menuItems)
{
    DrawerMenuItem menuItem = new DrawerMenuItem { Text = item };
    drawer.Items.Add(menuItem);
}

this.Controls.Add(drawer);

主なプロパティ

プロパティ	型	説明
Position	SlidePosition	ドロワーのスライド位置：Left、Right、Top、Bottom
Transition	Transition	アニメーションの種類：SlideOnTop、Push、Reveal
DrawerWidth	int	ドロワーパネルの幅
DrawerHeight	int	ドロワーパネルの高さ
AnimationDuration	int	ドロワーアニメーションの時間（ミリ秒）
Style	NavigationDrawerStyle	ビジュアルテーマ：Default、Office2016Colorful など
Items	Collection	DrawerHeader オブジェクトと DrawerMenuItem オブジェクトのコレクション
ContentViewContainer	Control	メインコンテンツ領域のコントロール用コンテナー

主なメソッド

メソッド	説明
ToggleDrawer()	ドロワーの表示状態を切り替えます（開く ↔ 閉じる）

主なイベント

イベント	説明
Opening	展開トランジションの開始時に発生します
Opened	展開トランジションの終了時に発生します
Closing	折りたたみトランジションの開始時に発生します（キャンセル可能）
Closed	折りたたみトランジションの終了時に発生します