Xamarin forms MasterDetailPage Menu icon not shown on iOS

Question

I have Xamarin.Forms project. I have MasterDetailPage inside NavigationPage. I set icon property of the MasterDetailPage so that icon is supposed to be set as the top left position on the navigation bar. But it does not work.

public partial class App : Application
{
    public App()
    {
        InitializeComponent();

        var masterDetailpage = new MasterDetailPage {
            Icon = "menuIcon.png",
            Master = new Page { Title = "Sample"},
            Detail = new Page()
        };

        MainPage = new NavigationPage(masterDetailpage);
    }
}

This never works. If I put NavigationPage as MasterDetailPage's Detail property, and set icon on the Master. It works. But it is very important to have MasterDetailPage inside NavigationPage and not vise versa.

Answer 1

The solution is to set the Icon property of the Page being used for the Master.

 var masterDetailpage = new MasterDetailPage {            
        Master = new Page { Title = "Sample", Icon = "menuIcon.png"},
        Detail = new NavigationPage(new Page())
    };

This assumes you have a png in your iOS project under the Resources folder named menuIcon.png that is the hamburger icon you want. You will also need to use a NavigationPage around the Detail because the Icon is shown in the Navigation Bar area.

Answer 2

The Unicode char can be used to show the "hamburger" menu icon.

You may specify Title="☰" for the master page ContentPage-top level tag.

If you use an icon, you may draw a better icon than char. But using Unicode char is simple enough if this is acceptable for you.

It works for iOS and doesn't break Android.

Links:

• Trigram for heaven (U+2630)
• The Unicode character for menu icons ("navicons") ☰.