C# Designing Drawer Menu

Drawer Menu in C

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:

Designing Drawer

Source Code:

9 comments

  1. I wanted to write a small note so as to appreciate you for those remarkable tips and hints you are sharing on this site. My incredibly long internet lookup has now been recognized with wonderful tips to exchange with my family members. I ‘d express that most of us visitors actually are rather blessed to exist in a fabulous website with very many marvellous people with valuable strategies. I feel truly fortunate to have come across your entire web pages and look forward to tons of more fabulous times reading here. Thanks a lot once again for a lot of things.

  2. I have read several good stuff here. Definitely worth bookmarking for revisiting. I surprise how much effort you put to make such a fantastic informative website.

  3. It’s difficult to find knowledgeable people for this topic, but you seem like you know what you’re talking about! Thanks

Comments are closed.