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

Answers

  • MacKenzieMickelsenMacKenzieMickelsen USMember ✭✭

    bump

  • 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)
                    return;
    
                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;
                    break;
    
                case "App Settings":
                    if (appSettingsPage == null)
                        appSettingsPage =   new NavigationPage (new AppSettingsPage ()) { BarBackgroundColor = Color.FromHex ("333333")};
                    NavigationPage.SetHasBackButton (appSettingsPage, false);
                    master.Detail = appSettingsPage;
                    break;
    
                };
                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.

    https://syntaxismyui.com/xamarin-forms-masterdetail-page-navigation-recipe/

    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)
    "itemIcon1@2x.png" (96x96 px)

Sign In or Register to comment.