C# Designing Drawer Menu

C# Designing Drawer Menu drawer is a UI panel that shows your app’s main navigation menu. The drawer appears when the user touches the drawer icon in the app bar or when the user swipes a finger from the left edge of the screen. The drawer icon is displayed on all top-level destinations that use a this panel.

Tools Required:

1. Visual Studio 2010 or later Version.
2. Pichon Desktop app (Optional) for icons. Download it from Here.

Steps to Follow:

Drawer menu works like a collapsible menu in any application. It collapse and expands on a click event of any button (or other control). In this article we will talk about designing drawer menu in C# without using any third party tool.

First of all create a New Windows Forms Applications Project. Set its Form Border Style Property to None. Also set AutoScaleMode to None. Set the background color to (43,43,43). Now add 4 panel controls. These panels will maintain layout of our application.

Dock the first panel to the top, second and third panel to Left. Now Dock the last panel to Fill Parent. Design your menu in the third panel and add a button on second panel by clicking on which our third panel will collapse. Name the third panel as ‘PanelSlide’

Go to the Code View of your form and declare an integer and a Boolean variable like,

int panelWidth;
bool Hidden;

Now initialize these variables inside the constructor of the class like,

panelWidth = PanelSlide.Width;
Hidden = false;

Add a timer control from the toolbox and double click on that time. It will create a Timer1_Tick event and add the following Code:

if (Hidden)
            {
                PanelSlide.Width = PanelSlide.Width + 10;
                if (PanelSlide.Width >= panelWidth)
                {
                    timer1.Stop();
                    Hidden = false;
                    this.Refresh();
                }
            }
            else
            {
                PanelSlide.Width = PanelSlide.Width - 10;
                if (PanelSlide.Width <= 0)
                {
                    timer1.Stop();
                    Hidden = true;
                    this.Refresh();
                }
            }

The double click on your Button and add timer1.Start(); inside the Click event of that button. That’s all. our slider Menu is ready.

Full Video Tutorial:

Source Code: