The Hamburger menu bar is quite popular among developers. This tutorial shows how you can build if for your Windows Phone 8 app. There’s an awesome library that lets us do this easily. This library contains many controls inspired by the official Facebook app on Windows Phone.

https://slideview.codeplex.com/

We will be working with a Windows Phone 8.1 XAML app for this tutorial but it can be implemented in a WP 8 app also. Here’s how,

Step 1: Install SlideView library using Nuget

Install the SlideView library that provides a SlideView control inspired by the official Facebook app using Nuget package manager. If you need help installing the library refer to,

How to integrate a Toolkit or Third party SDK with windows phone app using NuGet Package Manager

Step 2: Set your app’s RootFrame to SlideApplicationFrame

If you want a SlideView already packaged with a main panel + 2 side panels, you can use the SlideApplicationFrame . The other benefit from it is the navigation occuring only on the main panel. In App.xaml add the following code for SlideApplicationFrame control.

Here’s the code you need to add to App.xaml.



Note: You can set the SlideView ‘s header or choose to hide it.

Next at the top of your app’s App.xaml.cs declare a RootFrame variable.

Add a BuildFrame function that returns a RootFrame of SlideApplicationFrame type.

In the OnLaunched event handler add the code to set the new root frame.

The final OnLaunched event handler looks similar to this,



Tip: Download our project source code for see where exactly to put the code pieces in App.xaml.cs.



Step 3: Add User Controls for Left View and Right View

The hamburger menu has a left view and right view that appears when someone swipes left or right from the main panel. Create a new folder Pages and add two user controls to it. RightView.xaml and LeftView.xaml. Note that these two pages are set as the left content and the right content of the SlideApplicationFrame . Put some content in these user controls. Just design the left and right views as you wish and put the main content in MainPage.xaml.

We have put a Button which when clicked, navigates you to the Main Panel.

Note: You can choose to hide either the left view or the right view from SlideApplicationView ‘s properties.

That’s it. Run the app in the emulator and it should work perfectly. Download the source code and use it as an reference.

Download Hamburger-menu.zip