Features in Windows Forms Navigation Drawer

18 Nov 20185 minutes to read

ContentView

ContentView is the main view of the NavigationDrawer on which the desired items can be placed. For example, RichTextBox can be used in this sample.

//Creates RichTextBox instance.

RichTextBox richTextBox = new RichTextBox();

//Specifies the Text

richTextBox.Text = "Content View" + "\n" + "\n" + "This is Navigation Drawer content View";

//Add RichTextBox into the NavigationDrawer Container Control.

this.navigationDrawer1.ContentViewContainer.Controls.Add(richTextBox);
'Creates RichTextBox instance.

Dim richTextBox As New RichTextBox()

'Specifies the Text

richTextBox.Text = "Content View" & vbLf & vbLf & "This is Navigation Drawer content View"

'Add RichTextBox into the NavigationDrawer Container Control.

Me.navigationDrawer1.ContentViewContainer.Controls.Add(richTextBox)

ContentView

DrawerView

DrawerView is a container that is displayed on top, alongside, or below the Content view section. This will contain the sections below.

DrawerView

Default color customization

The default color of an item can be customized by using DefaultColor property of DrawerMenuItem. The back color of the item is updated based on the value of DefaultColor.

// Back color
this.drawerMenuItem1.BackColor = System.Drawing.Color.Silver; 

// Hover color
this.drawerMenuItem1.HoverColor = System.Drawing.Color.White;           

// Default color
this.drawerMenuItem1.DefaultColor = System.Drawing.Color.Silver;
' Back color
Me.drawerMenuItem1.BackColor = System.Drawing.Color.Silver

' Hover color
Me.drawerMenuItem1.HoverColor = System.Drawing.Color.White

' Default color
Me.drawerMenuItem1.DefaultColor = System.Drawing.Color.Silver

Color customization

Transition

This support specifies the animations for the DrawerView panel. Transition needs to have following three options.

  • SlideOnTop
  • Push
  • Reveal

SlideOnTop

This draws the Drawer Content on top of the Content view content.

//Adds Transition property into NavigationDrawer

this.navigationDrawer1.Transition = Transition.SlideOnTop;
‘Adds Transition property into NavigationDrawer

Me.navigationDrawer1.Transition = Transition.SlideOnTop

SlideOnTop transition

Push

This Transition moves the Drawer and content view section simultaneously.

//Adds Transition property into NavigationDrawer

this.navigationDrawer1.Transition = Transition.Push;
'Adds Transition property into NavigationDrawer

Me.navigationDrawer1.Transition = Transition.Push

Push transition

Reveal

In this transition, the Drawer content section remains stable and the content view section moves to reveal the drawer content.

//Adds Transition property into NavigationDrawer

this.navigationDrawer1.Transition = Transition.Reveal;
'Adds Transition property into NavigationDrawer

Me.navigationDrawer1.Transition = Transition.Reveal

Reveal transition

Position

The Position property helps user to specify the sliding position of the DrawerView and it will have the following four options.

  • Left – Slides from left direction.
  • Right – Slides from right direction.
  • Top – Slides from Top direction.
  • Bottom – Slides from Bottom direction.
//Adds Position property into the NavigationDrawer

this.navigationDrawer1.Position = Position.Left;
'Adds Position property into the NavigationDrawer

Me.navigationDrawer1.Position = Position.Left
  • Left

left side

  • Right

Right side

  • Top

Top

  • Bottom

Bottom

Animation duration

The AnimationDuration property specifies the TimeSpan value by which the DrawerContent can be brought into view. Values are specified as milliseconds.

//Sets AnimationDuration for the NavigationDrawer (in milliseconds)

this.navigationDrawer1.AnimationDuration = 100;
'Sets AnimationDuration for the NavigationDrawer (in milliseconds)

Me.navigationDrawer1.AnimationDuration = 100

Toggle drawer

The ToggleDrawer method toggles the sliding panel visibility.

//Calls the ToggleDrawer function

this.navigationDrawer1.ToggleDrawer();
'Calls the ToggleDrawer function

Me.navigationDrawer1.ToggleDrawer()