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.
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,
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
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
BuildFrame function that returns a
OnLaunched event handler add the code to set the new root frame.
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
That’s it. Run the app in the emulator and it should work perfectly. Download the source code and use it as an reference.