How can I create a drawer / slider menu with Xamarin.Forms?

Question

How do I create an a slider menu using Xamarin.Forms? Is it baked in or something custom?

Solution 1

You create a new class which contains all the definitions for both the Master - i.e. the menu - and the Detail - i.e. the main page. I know, it sounds back-to-front, but for example..

using System;
using Xamarin.Forms;

namespace testXamForms
 {
   public class HomePage : MasterDetailPage
   {
   public HomePage()
   {
     // Set up the Master, i.e. the Menu

     Label header = new Label
     {
       Text = "MENU",
       Font = Font.BoldSystemFontOfSize(20),
       HorizontalOptions = LayoutOptions.Center
     };
    // create an array of the Page names
     string[] myPageNames = {
       “Main”,
       “Page 2”,
       “Page 3”,
     };

     // Create ListView for the Master page.
     ListView listView = new ListView
     {
       ItemsSource = myPageNames,
     };

     // The Master page is actually the Menu page for us
    this.Master = new ContentPage
     {
       Title = "The Title is required.",
       Content = new StackLayout
       {
         Children = 
         {
           header, 
           listView
         },
       }
     };

     // Define a selected handler for the ListView contained in the Master (ie Menu) Page.

     listView.ItemSelected += (sender, args) =>
     {
       // Set the BindingContext of the detail page.
       this.Detail.BindingContext = args.SelectedItem;
        Console.WriteLine("The args.SelectedItem is
       {0}",args.SelectedItem);


     // This is where you would put your “go to one of the selected pages” 

       // Show the detail page.
       this.IsPresented = false;
     };
    // Set up the Detail, i.e the Home or Main page.
     Label myHomeHeader = new Label
     {
       Text = "Home Page",
       HorizontalOptions = LayoutOptions.Center
     };

     string[] homePageItems = { “Alpha”, “Beta”, “Gamma” };
     ListView myHomeView = new ListView {
       ItemsSource = homePageItems,
     };

     var myHomePage = new ContentPage();
     myHomePage.Content = new StackLayout
     {
       Children = 
       {
         myHomeHeader, 
         myHomeView
       } ,
     };
     this.Detail = myHomePage;
   }  
   }
 }

Solution 2

It is built in: MasterDetailPage. You'd set the Detail and Master properties of it to whatever kinds of Pages you'd like. I found Hansleman.Forms to be quite enlightening.

Solution 3

My minimum example (as posted here) is as follows:

public class App
{
    static MasterDetailPage MDPage;

    public static Page GetMainPage()
    {
        return MDPage = new MasterDetailPage {
            Master = new ContentPage {
                Title = "Master",
                BackgroundColor = Color.Silver,
                Icon = Device.OS == TargetPlatform.iOS ? "menu.png" : null,
                Content = new StackLayout {
                    Padding = new Thickness(5, 50),
                    Children = { Link("A"), Link("B"), Link("C") }
                },
            },
            Detail = new NavigationPage(new ContentPage {
                Title = "A",
                Content = new Label { Text = "A" }
            }),
        };
    }

    static Button Link(string name)
    {
        var button = new Button {
            Text = name,
            BackgroundColor = Color.FromRgb(0.9, 0.9, 0.9)
        };
        button.Clicked += delegate {
            MDPage.Detail = new NavigationPage(new ContentPage {
                Title = name,
                Content = new Label { Text = name }
            });
            MDPage.IsPresented = false;
        };
        return button;
    }
}

An example solution is hosted on GitHub.

On iOS the result looks like this (left: menu open, right: after clicking on "B"):

Note that you need to add the menu icon as a resource in your iOS project.

Solution 4

If you are looking for simple example of MasterDetailPage please have a look at my sample repo at GitHub. Very nice example is also presented here

Solution 5

Slideoverkit is a great plugin available for Xamarin Forms. There is a github to see free samples and you could find documentation about it here.

View more solutions

Comments

[Manish Jain]

developer.xamarin.com/guides/xamarin-forms/user-interface/…

[Jesse]

This is good, but for anyone that can't get it to work, you need to init myHomePage as a new ContentPage. i.e. var myHomePage = new ContentPage();

[rufo]

This solution is not hiding the Master view (in an iPad iOS 7.0.2). The MDPage.IsPresented= false statement is basically ignored. Xamarin Forms 1.2.3.6257.

[SoftSan]

I found an issue with masterdetail page.It minimize the application when hardware back button pressed. It does not remember the navigation history. I have an app which uses masterdetail page to show menu in all page. The navigation is happened in two way in my app. one from the menu and second way from Dashboard. so if i navigate to another page, and then press "BACK" button, it closes the application. so any ideas how to overcome this problem?

[animaonline]

You´re getting a downvote from me because of the formatting, what´s up with “Main”?

[JoshJordan]

@animaonline it would be much more helpful for you to fix formatting problems than to downvote a valid answer.