Loading...
Loading...
Implement Syncfusion NavigationDrawer control in Windows Forms - a sliding panel menu that appears from screen edges. Use when creating drawer navigation, side menus, or hamburger menus with panel transitions. Covers DrawerMenuItem configuration, DrawerHeader setup, slide-out menus, and panel transitions (SlideOnTop, Push, Reveal) for modern sliding panel navigation.
npx skill4agent add syncfusion/winforms-ui-components-skills syncfusion-winforms-navigation-drawerusing 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);// 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);// Toggle drawer visibility on button click
private void hamburgerButton_Click(object sender, EventArgs e)
{
navigationDrawer1.ToggleDrawer();
}// 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;// 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");
}// 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);| Property | Type | Description |
|---|---|---|
| | Drawer sliding position: Left, Right, Top, Bottom |
| | Animation type: SlideOnTop, Push, Reveal |
| | Width of the drawer panel |
| | Height of the drawer panel |
| | Duration in milliseconds for drawer animation |
| | Visual theme: Default, Office2016Colorful, etc. |
| | Collection of DrawerHeader and DrawerMenuItem objects |
| | Container for main content area controls |
| Method | Description |
|---|---|
| Toggles drawer visibility (open ↔ closed) |
| Event | Description |
|---|---|
| Occurs when expand transition begins |
| Occurs when expand transition ends |
| Occurs when collapse transition begins (cancelable) |
| Occurs when collapse transition ends |