Facebook like Hamburger Menu on Windows Phone 8

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

Vivek Maskara

I am pursuing BTech in Software Engineering from Delhi Technological University. I develop apps, create websites and blog about my app experiences.

  • Javier González Viveros

    Hi!!!

    First of all, this is one of the best Slideview
    tutorial I have read, so congrats!!!

    I have a question, I hope you can help me with
    this. I have been using the example code to make experiments, everything works
    fine, but I can’t hide the header.
    Can you help me with this?

    Thanks a lot!!

    Greetings from Mexico.

    • Saber Marandi

      hi dear

      this code , maybe work :

      • El

        Perfect! Thanks!

  • Ravi Kumar

    I can’t navigate from the Main Panel to the LeftView or Rightview by the buttons present on Main Panel. I even tried with your sample project, no success even there.

    • Hoàng Nguyễn

      You know ?

  • Hoàng Nguyễn

    I also can’t navigate from Mainpage to the leftview or rightview (App.RootFrame.Navigate(typeof(LeftView)) Offcouse i referenced, And I want ask how to remove Top bar (bar in top with violet color).

  • Hoàng Nguyễn

    Anyone know ?

  • anhduc1188

    Great! But how to hide the header? I tried but it not work

  • akhil tadikamalla

    x:Key=”RootFrame” is not there in the slideview library. when i tried to add that code it shows errors and can update the latest version which is compatable for VS2012

  • Nikhil

    I can’t get the Application.Resources tag .I have to include any library to get the Application.Resources tag

Read more:
How to create your first Windows Phone app
How to change the App name and Tile name of your Windows phone app
Data binding in Windows Phone app – One way binding
Close