Xamarin forms MasterDetailPage Menu icon not shown on iOS

5
votes

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.

5
iosxamlxamarinxamarin.iosxamarin.forms
I might be wrong. But Xamarin Docs only show Page Icons for Android versions in Master Detail Pages or do you mean something else? developer.xamarin.com/guides/xamarin-forms/… – Lepidopteron
By default icon on the iOS is not shown but you can generally add icon on iOS and add it as an icon property of the page. And it works on some cases but not on mine. – mister_giga
Does the Navigation page maybe somehow override this property setting? – Lepidopteron
I have no idea. In the documentation it is explained that navigation page should be set as a Detail page of MasterDetailPage. But I dont want that – mister_giga
Do you set the Detail page? – Enrico

5 Answers

5
votes

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.

3
votes

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:

0
votes

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" };
    }
}
0
votes

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.

-1
votes

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();
}