Forum Xamarin.Forms

MasterDetailsPage Menu Icon not showing up on iOS

Hi all,

I have an app with a MasterDetailsPage that I use for the main navigation. I am using the "hamburger" icon for my menu icon. On Android this works great. I set the Icon property on the MenuPage which is a ContentPage. And the "hamburger" appears. But on iOS nothing shows up no matter what I do. Anyone have any advice on what might be wrong or how to fix this?

Best Answer


  • MacKenzieMickelsenMacKenzieMickelsen USMember ✭✭


  • KimNieblingKimNiebling DKMember ✭✭

    To help others answer your question, it might be an idea to post the code where you experience an issue.

    Anywho. Have you added the icon to your "Resources" folder in your iOS project and marked it as "BundleResource"? At least, the Hamburger menu works fine for me personally on iOS.

    This guide might also provide you a hint of what's wrong.

  • MiguelCervantesMiguelCervantes MXMember ✭✭✭

    You need to wrap your Detail as a NavigationPage

        MasterDetailPage.Detail = new NavigationPage(...);

    Hope this helps!

  • MacKenzieMickelsenMacKenzieMickelsen USMember ✭✭

    Ok sorry I was hoping it might have been a simple known issue.

    Here is the MainPage:

                    public MainPage ()
                menuPage = new TableMenuPage (this);
                Master = menuPage;
                Detail = new NavigationPage (new WelcomePage ()){BarBackgroundColor=Color.FromHex("333333")};
            void NavigateTo (TestTracker.UX.MenuItem menu)
                if (menu == null)
                Page displayPage = (Page)Activator.CreateInstance (menu.TargetType);
                Detail = new NavigationPage (displayPage);
                IsPresented = false;

    Here is the menu page code

            public class MenuTableView : TableView 
        public class TableMenuPage : ContentPage
            MasterDetailPage master;
            TableView tableView;
            public TableMenuPage (MasterDetailPage m)
                master = m;
                Title = "Menu";
                Icon = "settings.png";
                var section = new TableSection () {
                    new TableMenuCell {Text = "Welcome", ImageSource = "icon.png", Host = this},
                    new TableMenuCell {Text = "App Settings", ImageSource = "contacts.png", Host = this},
                var root = new TableRoot () {section} ;
                tableView = new MenuTableView ()
                    Root = root,
                    //HeaderTemplate = new DataTemplate (typeof(TableMenuHeader)),
                    Intent = TableIntent.Menu,
                Content = new StackLayout {
                    BackgroundColor = Color.FromHex("333333"),//Color.Gray,
                    VerticalOptions = LayoutOptions.FillAndExpand,
                    Children = {tableView}
            NavigationPage welcomePage, appSettingsPage,
            public void Selected (string item) {
                switch (item) {
                case "Welcome":
                    if (welcomePage == null)
                        welcomePage = new NavigationPage (new WelcomePage ()) { BarBackgroundColor = Color.FromHex ("333333") };
                    NavigationPage.SetHasBackButton (welcomePage, false);
                    master.Detail = welcomePage;
                case "App Settings":
                    if (appSettingsPage == null)
                        appSettingsPage =   new NavigationPage (new AppSettingsPage ()) { BarBackgroundColor = Color.FromHex ("333333")};
                    NavigationPage.SetHasBackButton (appSettingsPage, false);
                    master.Detail = appSettingsPage;
                master.IsPresented = false;  // close the slide-out

    I think this is the main code that would be in question. From how it works on the Android version its the

    Icon = "settings.png"
    That sets the icon to the title bar. And like I said this works find on Android just not on iOS.

    Thanks. Please let me know if you'd like anything else.

  • MacKenzieMickelsenMacKenzieMickelsen USMember ✭✭

    @David - So I used that guide initially. However, I found that on iOS 8 that there are separator lines in the slide out menu. So I found another example that I am currently using that uses a TableView and then we overload the renderer to get rid of the lines. But thank you for the suggestion

  • MatoMato GBMember, University

    @MacKenzieMickelsen Did you find solution to the reported problem? I am facing the same issue with iOS.

  • Sorry to leave you hanging so long Mato, was on vacation. What I ended up doing which solved the problem was just implement the MasterDetailPage EXACTLY like it is in this guide.

    Hope this helps

  • chris_riesgochris_riesgo USUniversity ✭✭✭

    @Mato - in your Menu page constructor, make sure that you set the icon BEFORE anything else. Seems to be some sort of bug if you set the Title first and then the Icon. Hope that helps.

  • MauricioRojasMauricioRojas USMember

    in my case it was two things. icon must be set. so a hamburger icon must be present on the resources folder and title property must have a value

  • KurtZieglerKurtZiegler USMember ✭✭

    I recently had a similar problem in a xamarin forms app that uses a NavigationDrawer (not strictly master-detail). The image is loaded in the constructor with
    hamburgerButton.Image = (FileImageSource)ImageSource.FromFile("hamburger_icon.png");
    Android showed the hamburger normally (image in Resources/Drawable). iOS and UWP were blank.

    The solution for me was:
    iOS: marking the image file in Resources folder as Build Action = BundleResource (thanks @KimNiebling)
    UWP: marking the image file in root folder as Build Action = Content

  • I had a similar problem , the solution for me was:
    Add 2 icons in Resources folder into ios project
    "itemIcon1.png" (48x48 px)
    "[email protected]" (96x96 px)

  • gtgatsbygtgatsby JPMember

    So I've hit the same problem, with a twist that the menu icon does show up on an iPhone 5s. Just not anything later than that.

    I'm wrapping the Detail page in a NavigationPage, I have the icon (and [email protected], @3x) in the iOS project resources folder, marked as BundleResource, I set the Icon before anything else, and the Title is set.

    I also have a problem with Toolbar icons not showing up - again, only after the iPhone 5s.

    Anyone have any ideas what the problem could be? The link posted a couple years back is dead, and I'm at a loss. Especially since it works fine on a iPhone 5s.

  • gtgatsbygtgatsby JPMember

    And to answer my own question, I was able to get it working, with the help of the KickassTwitter Xamarin example by thewissen

    Basically, I had to use the custom renderer provided in that example to make the image show up. In case it helps others:

    `[assembly: ExportRenderer(typeof(ToolbarItem), typeof(UntintedToolbarItemRenderer))]
    namespace StudyHerdMobile.iOS.CustomControls
    public class UntintedToolbarItemRenderer : too
    public override void ViewDidLoad()

            var item = this.NavigationBar?.TopItem?.LeftBarButtonItem;
            if (item != null)
                item.Image = item.Image.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);


Sign In or Register to comment.