Back to Details

syncfusion-winforms-navigation-drawer

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Windows Forms Navigation Drawer

Windows Forms 导航抽屉

The Syncfusion Windows Forms Navigation Drawer is a sliding panel menu that comes out from the edge of the window, allowing content to be displayed in a hidden panel. It can be shown by swiping from any of the four screen edges or opened programmatically on demand.
Syncfusion Windows Forms NavigationDrawer是一种从窗口边缘滑出的滑动面板菜单，可将内容展示在隐藏面板中。你可以通过从屏幕四个边缘任意一侧滑动唤出它，也可以按需通过编程方式打开。

When to Use This Skill

何时使用本技能

Use this skill when you need to:
  • Implement sliding panel menus from screen edges (left, right, top, or bottom)
  • Create hamburger menu navigation with collapsible sidebar panels
  • Build hidden panels that slide in with smooth animations
  • Add drawer-based navigation to Windows Forms applications
  • Configure transition effects (SlideOnTop, Push, Reveal)
  • Customize drawer appearance with built-in Office 2016 themes
  • Handle drawer events (Opening, Closing, Opened, Closed)
  • Toggle drawer visibility programmatically or through user interaction
  • Position navigation panels at different screen edges with configurable animations
当你需要完成以下需求时可使用本技能：
  • 实现从屏幕边缘（左、右、上、下）弹出的滑动面板菜单
  • 创建带可折叠侧边面板的汉堡菜单导航
  • 开发带流畅动画滑入效果的隐藏面板
  • 为Windows Forms应用添加基于抽屉的导航功能
  • 配置过渡效果（SlideOnTop、Push、Reveal）
  • 通过内置Office 2016主题自定义抽屉外观
  • 处理抽屉事件（Opening、Closing、Opened、Closed）
  • 通过编程方式或用户交互切换抽屉可见性
  • 将导航面板放置在不同屏幕边缘并配置对应动画

Component Overview

组件概述

Key Features:
  • Four position options: Left, Right, Top, Bottom
  • Three transition types: SlideOnTop, Push, Reveal
  • Built-in themes: Default, Office2016Colorful, Office2016White, Office2016DarkGray, Office2016Black
  • Drawer events: Opening, Closing, Opened, Closed
  • Configurable animation duration
  • Toggle drawer method for programmatic control
  • Header and menu items with image support
核心特性：
  • 四种位置选项： 左、右、上、下
  • 三种过渡类型： SlideOnTop、Push、Reveal
  • 内置主题： 默认、Office2016Colorful、Office2016White、Office2016DarkGray、Office2016Black
  • 抽屉事件： Opening、Closing、Opened、Closed
  • 可配置的动画时长
  • 支持编程控制的抽屉切换方法
  • 支持图片的头部与菜单项配置

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md
Read this reference when you need to:
  • Install the NavigationDrawer control via NuGet or designer
  • Add the control to a Windows Forms project
  • Create a NavigationDrawer instance programmatically
  • Add header (DrawerHeader) and menu items (DrawerMenuItem)
  • Set up basic drawer dimensions (DrawerWidth, DrawerHeight)
  • Add images to menu items
  • Configure text and image positioning (TextAlign, TextImageRelation)
  • Understand basic sidebar placement
📄 阅读： references/getting-started.md
当你需要完成以下操作时阅读本参考文档：
  • 通过NuGet或设计器安装NavigationDrawer控件
  • 将控件添加到Windows Forms项目中
  • 通过编程方式创建NavigationDrawer实例
  • 添加头部（DrawerHeader）和菜单项（DrawerMenuItem）
  • 设置基础抽屉尺寸（DrawerWidth、DrawerHeight）
  • 为菜单项添加图片
  • 配置文本与图片位置（TextAlign、TextImageRelation）
  • 了解基础侧边栏放置规则

Drawer Features and Configuration

抽屉功能与配置

📄 Read: references/drawer-features.md
Read this reference when you need to:
  • Configure ContentView (main view content)
  • Understand DrawerView structure
  • Implement transition types (SlideOnTop, Push, Reveal)
  • Set drawer position (Left, Right, Top, Bottom)
  • Configure drawer dimensions and animation duration
  • Use ToggleDrawer method for programmatic control
  • Understand the differences between transition effects
📄 阅读： references/drawer-features.md
当你需要完成以下操作时阅读本参考文档：
  • 配置ContentView（主视图内容）
  • 了解DrawerView结构
  • 实现过渡类型（SlideOnTop、Push、Reveal）
  • 设置抽屉位置（左、右、上、下）
  • 配置抽屉尺寸与动画时长
  • 使用ToggleDrawer方法进行编程控制
  • 了解不同过渡效果的差异

Customization and Styling

自定义与样式设置

📄 Read: references/customization.md
Read this reference when you need to:
  • Apply built-in themes (Default, Office2016Colorful, Office2016White, Office2016DarkGray, Office2016Black)
  • Customize drawer item colors (DefaultColor, BackColor, HoverColor)
  • Style menu items with custom colors
  • Apply consistent visual themes across the application
📄 阅读： references/customization.md
当你需要完成以下操作时阅读本参考文档：
  • 应用内置主题（默认、Office2016Colorful、Office2016White、Office2016DarkGray、Office2016Black）
  • 自定义抽屉项颜色（DefaultColor、BackColor、HoverColor）
  • 使用自定义颜色设置菜单项样式
  • 在整个应用中应用统一的视觉主题

Events

事件

📄 Read: references/events.md
Read this reference when you need to:
  • Handle Opening event (when expand transition begins)
  • Handle Closing event (when collapse transition begins)
  • Handle Opened event (when expand transition ends)
  • Handle Closed event (when collapse transition ends)
  • Respond to drawer state changes
  • Cancel drawer operations
  • Implement custom logic during transitions
📄 阅读： references/events.md
当你需要完成以下操作时阅读本参考文档：
  • 处理Opening事件（展开过渡开始时触发）
  • 处理Closing事件（收起过渡开始时触发）
  • 处理Opened事件（展开过渡结束时触发）
  • 处理Closed事件（收起过渡结束时触发）
  • 响应抽屉状态变化
  • 取消抽屉操作
  • 在过渡过程中实现自定义逻辑

Advanced Usage

高级用法

📄 Read: references/advanced-usage.md
Read this reference when you need to:
  • Configure ContentViewContainer with complex controls
  • Integrate RichTextBox or other controls in ContentView
  • Manage dynamic item addition/removal
  • Implement complex item hierarchies
  • Optimize performance for large menus
  • Follow best practices for drawer implementation
📄 阅读： references/advanced-usage.md
当你需要完成以下操作时阅读本参考文档：
  • 为ContentViewContainer配置复杂控件
  • 在ContentView中集成RichTextBox或其他控件
  • 管理动态项的添加/移除
  • 实现复杂的项层级结构
  • 为大型菜单优化性能
  • 遵循抽屉实现的最佳实践

Quick Start

快速开始

Basic Navigation Drawer

基础导航抽屉

csharp
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);
csharp
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);

Common Patterns

常用模式

Pattern 1: Left Slide Panel with Push Transition

模式1：带Push过渡效果的左侧滑动面板

csharp
// 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);
csharp
// 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);

Pattern 2: Toggle Drawer with Button Click

模式2：点击按钮切换抽屉

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

Pattern 3: Themed Drawer with Custom Colors

模式3：带自定义颜色的主题化抽屉

csharp
// 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;
csharp
// 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;

Pattern 4: Handle Drawer Events

模式4：处理抽屉事件

csharp
// 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");
}
csharp
// 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");
}

Pattern 5: Right-Side Drawer with Reveal Transition

模式5：带Reveal过渡效果的右侧抽屉

csharp
// 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);
csharp
// 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);

Key Properties

核心属性

PropertyTypeDescription
Position
SlidePosition
Drawer sliding position: Left, Right, Top, Bottom
Transition
Transition
Animation type: SlideOnTop, Push, Reveal
DrawerWidth
int
Width of the drawer panel
DrawerHeight
int
Height of the drawer panel
AnimationDuration
int
Duration in milliseconds for drawer animation
Style
NavigationDrawerStyle
Visual theme: Default, Office2016Colorful, etc.
Items
Collection
Collection of DrawerHeader and DrawerMenuItem objects
ContentViewContainer
Control
Container for main content area controls
属性类型描述
Position
SlidePosition
抽屉滑动位置：Left、Right、Top、Bottom
Transition
Transition
动画类型：SlideOnTop、Push、Reveal
DrawerWidth
int
抽屉面板宽度
DrawerHeight
int
抽屉面板高度
AnimationDuration
int
抽屉动画时长，单位为毫秒
Style
NavigationDrawerStyle
视觉主题：默认、Office2016Colorful等
Items
Collection
DrawerHeader与DrawerMenuItem对象的集合
ContentViewContainer
Control
主内容区域控件的容器

Key Methods

核心方法

MethodDescription
ToggleDrawer()
Toggles drawer visibility (open ↔ closed)
方法描述
ToggleDrawer()
切换抽屉可见性（打开 ↔ 关闭）

Key Events

核心事件

EventDescription
Opening
Occurs when expand transition begins
Opened
Occurs when expand transition ends
Closing
Occurs when collapse transition begins (cancelable)
Closed
Occurs when collapse transition ends
事件描述
Opening
展开过渡开始时触发
Opened
展开过渡结束时触发
Closing
收起过渡开始时触发（可取消）
Closed
收起过渡结束时触发

Related Components

相关组件

  • TreeNavigator - For hierarchical tree-based navigation
  • Wizard - For multi-step workflows and wizards
  • TabControlAdv - For tabbed navigation interfaces
  • TreeNavigator - 用于层级树形结构导航
  • Wizard - 用于多步工作流与向导
  • TabControlAdv - 用于标签式导航界面