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") ☰ .

Answer 3

If you wrap the master page in a navigation page, put the icon on the navigation page.

This works for me:

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) { Title = "Sample", Icon = "menuIcon.png" };
    }
}

Answer 4

In case it helps someone You can set the title of the menu right before setting your MainPage as I have done in the sample code below:

var master = new MasterPage();
master.Master.Icon = "my_icon.png";
master.Master.Title = AppResources.Menu; // To get the value from resource files
MainPage = master;

MasterPage inherits from MasterDetailsPage And I was unable to directly set the value from constructor of MasterPage because of Xamarin's weird errors.

Answer 5

I think you have to add to your AddDelegate a common fix

namespace myApp.iOS
{
    [Register("AppDelegate")]
    public partial class AppDelegate : 
                         global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
    {
        UIWindow window;

        public override bool FinishedLaunching(UIApplication app, NSDictionary options)
        {
            global::Xamarin.Forms.Forms.Init();

            // fix for iOS
            window = new UIWindow(UIScreen.MainScreen.Bounds);
            window.RootViewController = App.GetMainPage().CreateViewController();
            window.MakeKeyAndVisible();

            LoadApplication(new App());

            return base.FinishedLaunching(app, options);
        }
    }
}

In your PCL project in App.xaml.cs you have to add

public App()
{
    // The root page of your application
    MainPage = GetMainPage();
}

public static Page GetMainPage()
{
    return new RootPage();
}