Hamburger Menu In Windows 10 Apps

Hamburger menu/button is a simple navigation design which we can see in most modern app platforms. And finally we have it on Windows 10 apps. In most of the default Windows 10 apps Microsoft has used this navigation pattern and also recommends it to the developers. The following images are the default Windows 10 weather app’s screenshots. (1st one with the hamburger menu collapsed and 2nd one with the menu opened.)



Implementing this navigation pattern is pretty simple. We will use the ‘Split View’ control which is a pre-built control in the Windows 10 SDK.

Split View Control

This is an xaml user control with a pane and a content area. We use this pane area to implement our hamburger menu. This pane has four display modes.

1. Overlay: In this mode the pane is not visible while it’s closed. When it's opened its laid over the content area.
   
   
2. Inline: In this mode the pane is not visible while it’s closed. When opened the content area pushes to the opposite side and both content and pane is fully visible.
   
   
3. CompactOverlay and CompactInline: In these modes everything is same as above except a little area of the pane is visible while it’s opened. We can adjust that width we want it to be shown.

Implementing the Hamburger Navigation

Step 1: Firstly, create a new universal windows project.



Add a SplitView control to the main grid, a new grid to the pane of our SplitView and a button to the grid we created. This button is our Ham button . We will use “Segoe MDL2 Assets” font to use new symbols in Windows 10. You can find these in the character map.

Next add a ListBox or a LisView control to our grid in the pane. This list view is the item container for our page buttons. We will use an item template to our page items. We can also just use a label and a button to do this. But when using an item template it’s easy to handle and its nice and clean XAML code.

So create an item template to our ListView. Xaml will look like the following,



txtSymbol is the textblock where we will show our symbol. txtContent is the textblock where we will show the name.

Now we must add our content area for our SplitView. Add these lines inside the SplitView tags in your XAML code.



We are using a frame to navigate within the pages.

Step 2 Add 2 new pages to your project and name those “Page1” and “Page2”.

Now add a click event to the hamburger button and add these lines to it.



This code will handle the opening and closing of our SplitView.

Now add a new class named “Scenario”. Edit the code so it will look like the following,



Scenario is an object we use to handle a one page. We have 2 pages so we need 2 scenarios.

Now add the following lines to the MainPage() method in MainPage.xaml.cs .



Now we must add an event handler to the SelectionChanged event of our ListView . Add the following code inside it.



That’s all. Now build the project and run it and see .