XAML Xamarin Forms navigation drawer sample code for iOS/Android

Question

Does anyone know how a navigation drawer similar to the one in the Sonos app can be implemented? I have checked both Android and iOS versions of the app and see that the navigation drawer has been implemented in the same way for both platforms.

The two key things that I like and want to implement are:

the slide out drawer is below the navigation bar. When it slides out, the navigation bar is still visible it appears as if it is the drawer that slides out, rather than the detail view moving to the right. I've noticed that the default master detail page slides out in a different way and it's not what we want. Have a look at the images below so see I mean.

thanks

cvanbeek cvanbeek · Accepted Answer · 2017-03-10T04:23:36

Although not technically a good practice, if you put a MasterDetailPage into a NavigationPage, it will slide out like in the above pictures. Here's how you do that:

In the App.cs constructor or your app's OnStart() method:

MainPage = new NavigationPage(new MyMasterDetailPage()) {
     Title = "Your Title"
};

Create a new MasterDetailPage called MyMasterDetailPage. In the constructor, add the following code:

Detail = new HomePage();
Master = new MenuPage()
{
    Title = "Menu"
};

You then need to create a ContentPage for both HomePage and MenuPage.

One issue that you will run into if you use this method, is that if you don't call MyMasterDetailPage as the first page upon opening the app, the three horizontal bars on the NavigationBar won't appear, which will make it hard for users to tell there is a drawer. So if you need users to go to a login page or another page before your MasterDetailPage, you may want to find another implementation.

XAML Xamarin Forms navigation drawer sample code for iOS/Android

1 Answers