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.

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 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

public class MasterMenuModel
    {
        public string ListViewText { get; set; }
        public Image ListViewIconSource { get; set; }
        public Page NavigationPage { get; set; }
    }

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):

public class MasterViewModel : BaseViewModel
    {
        private INavigationService _navigation;
        public Command ListViewItemSelected { get; set; }

        public ObservableCollection _listViewIS = new ObservableCollection();
        public ObservableCollection ListViewIS { get { return _listViewIS; } set { _listViewIS = value; } }
        public MasterViewModel(INavigationService navigationService)
        {
            _navigation = navigationService;
            InitCommands();
            SetMasterMenu();
        }

        private void InitCommands()
        {
            try
            {
                ListViewItemSelected = new Command( (sender) =>
                {
                    var mdp = App.Current.MainPage as MasterDetailPage;
                    mdp.Detail.Navigation.PushAsync(((MasterMenuModel)sender).NavigationPage);
                    mdp.IsPresented = false;
                });
            }
            catch (Exception ex)
            {
               //log here
                throw;
            }
        }
        private void SetMasterMenu()
        {
            try
            {
                _listViewIS.Add(new MasterMenuModel
                {
                    ListViewText = "Edit Profile",
                    ListViewIconSource = new Image
                    {
                        Aspect = Aspect.AspectFit,
                        Source = ImageSource.FromFile("pencil.png")
                    },
                    NavigationPage = new EditProfilePage()
                });
                OnPropertyChanged("ListViewIS");
            }
            catch (Exception ex)
            {
                //log here
                throw;
            }
        } 
    }

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:

detailPage = new NavigationPage(new DashboardPage());
MainPage = new MasterPage();

var masterPage = MainPage as MasterDetailPage;
masterPage.Detail = detailPage;

navigation.Initialize(detailPage);

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.

The post How to Implement Hamburger Menu in Xamarin.Forms – Working with Master Detail Page appeared first on Adrian Szeń.