How to implement Hamburger menu in Xamarin.Forms – Working with Master Detail Page

How to implement Hamburger menu in Xamarin.Forms – Working with Master Detail Page

In the previously article I was showing you how to implement MVVMLight library in your Xamarin.Forms project. Now I will try to show you how to implement Hamburger Menu in Xamarin.Forms, and how to work with it.

 

What is Hamburger Menu in Xamarin.Forms?

There is a many popular patterns how to navigate user between screens or get important options close at hand, but the most popular is Hamburger Menu, Xamarin’s developers call it Master Detail Page. Probably you have seen this many times in applications, for example in google play.

Hamburger Menu in Xamarin.Forms

 

How Hamburger Menu in Xamarin.Forms works? 

The idea of hamburger menu is very simple, mobile developers don’t have enought space to show available options for navigation in one screen, so they need to hide it, and show only when users need it. In most projects hamburger menu is hidden under icon in the upper left corner. User needs tap this icon or just slide from the left to the right to see the menu. The Hamburger menu is in the above screenshot.

 

Ok, when you know what is hamburger menu it’s time to write some code. I am using XAML solution in implementation.

At the start lets create view of Master Page and define it (MasterPage.xaml):

In lines 7-23 is defined menu which user can see. In this solution I defined simple ListView control with my own Behavior (I will write more about it in next article). Block <MasterDetailPage.Detail></MasterDetailPage.Detail> shows which view should be loaded as default, in my example it’s DashboardPage view, and here is a code of this page (DashboardPage.xaml):

If you want to create custom ListView  with some options what you need, you should create ListView model with fields what you need. In this example model has three positions (MasterMenuModel.cs):

  • string ListViewText – Text to show
  • Image ListViewIconSource – Image to show next to the text
  • Page NavigationPage – object of page where should navigate after tap a text

When master page and custom model are created, it’s time to fill ListView with sample data. Lets go to Master Page ViewModel (MasterPageViewModel.cs):

In SetMasterMenu function I added all visible options in the menu for user, in your case you can put here whatever you want. I think it’s clearly enough.

In InitCommands function I added command for item select in the listview. In line 21 is cast of current page to master detail page object. Next line is responsible for navigate to the proper page, object of this page is defined in SetMasterMenu function in 44 line of code in this example. Property IsPresented says Hamburger menu should be hided or not after tap.

Last step is define MainPage in App.cs as MasterDetailPage:

Important is to define NavigationPage in MasterPage.Detail not MasterPage in NavigationPage, if you do it you will not lose your hamburger menu after navigation.

 

I hope article will be helpful for you and you will give me like on my fanpage 😉 If you have better solution or you don’t understand something, let me know in comment.

 

  • abrasat

    Thank you for the very useful article.
    One question about the IsPresented property: in your sample the property is set to false, but never to true. Is this not necessary ?
    Could you please post the link to the sample project ?

    • IsPresented property defines when hamburgermenu is presented for user. For example if you click on hamburgermenu icon in left upper corner, property IsPresented will be set on true automatically, when you will set false on this property you will hide menu for the user.

      I will post the link to the sample project in few hours.

      • abrasat

        Ok, thanks.
        Would be possible to use the navigation service passed in the MasterViewModel constructor to navigate to the new Detail page when the item selection in MasterMenu changes ?

  • Anna

    Hello, I am not sure how to use NavigationService. In App.xaml in line 7 there is navigation.Initialize(detailPage); Where do you initialize navigation?

    • Few lines before. Try use this should work:
      var navigation = new NavigationService();

  • sumeet saraf

    do you have any git solution on this MVVM Lite and Master detail implementation .
    so please provide us.
    Thanks

Comments are closed.