Show "Back to Menu" Button in iOS NavigationBar with Xamarin.Forms

Question

I'm trying to build a cross-platform app using C# and Xamarin.Forms. It contains a slide-out menu implemented in form of a MasterDetailPage. While on Android there is a button with the app icon in the top left corner, which toggles the slide-out page, there is no such navigation bar item on iOS.

I broke it down to the following minimum example derived from the Xamarin solution template "Blank App (Xamarin.Forms Shared)" and replacing the implementation of the App-class:

public class App
{
    static MasterDetailPage MDPage;

    public static Page GetMainPage()
    {
        return new NavigationPage(
            MDPage = new MasterDetailPage {
                Master = new ContentPage {
                    Title = "Master",
                    Content = new StackLayout {
                        Children = { Link("A"), Link("B"), Link("C") }
                    },
                },
                Detail = new ContentPage { Content = new Label { Text = "A" } },
            });
    }

    static Button Link(string name)
    {
        var button = new Button { Text = name };
        button.Clicked += delegate {
            MDPage.Detail = new ContentPage { Content = new Label { Text = name } };
            MDPage.IsPresented = false;
        };
        return button;
    }
}

The solution as well as resulting screenshots can be found at GitHub.

My idea was to add such a "menu" or "back" button in the iOS-specific code modifying the window.RootViewController.NavigationController.NavigationBar within the AppDelegate class. But window.RootViewController.NavigationController is null.

Replacing the return type of GetMainPage() by NavigationPage instead of Page does not help.

I could add toolbar items via MDPage.ToolbarItems.Add(...), but they appear in the top right corner.

score 5 · Answer 1 · answered Jul 15 '14 at 20:05

5

TL;DR

Essentially, your Detail page needs to be wrapped in a NavigationPage for the back button to appear in iOS.

Here's an example of how I structure my apps.

App.cs

    public static INavigation Navigation { get; set; }

    public static Page GetMainPage(IContainer container)
    {
        return new MainPage();
    }

MainPage.cs

public class MainPage : MasterDetailPage
{

    public MainPage()
    {
        Title = "Some Title";
        var master = new MainMenu();
        var detail = new NavigationPage(new FirstPage());

        if (App.Navigation == null)
        {
            App.Navigation = detail.Navigation;
        }

        Master = master;
        Detail = detail;
    }
}

Now that you've done this, your Navigation Drawer will behave as expected, and so will your ActionBar.

When you want to navigate throughout the app, you use the statically defined Navigation

await App.Navigation.PushAsync(new FooPage());
// or
await App.Navigation.PopAsync();

answered Jul 15 '14 at 20:05

Chase Florell

46,378
57
186
376

Ok, doing the ```PushAsync``` on ```button.Clicked()``` opens a new detail page with a "Back" button, which - however - links back to the previous detail page, not the menu (a.k.a. master or MainMenu) as intended. Furthermore, the ```window.RootViewController.NavigationController``` is still ```null```, thus I can't modify the button this way. – Falko Jul 16 '14 at 16:14
What I'm trying to achieve is a similar behavior as in [this video](https://www.youtube.com/watch?v=yVbcBdxIDwQ). – Falko Jul 16 '14 at 16:19
what's in that video is the default behavior if you do what I did above. Your `FirstPage` would be the page with that image on it. Note you also have to set the icon on the MainMenu (Master) page. – Chase Florell Jul 17 '14 at 15:09
Sorry, but I can't achieve the desired behavior using your approach ([see App.cs at GitHub](https://github.com/perpetual-mobile/FormsMenuIcon/blob/master/App.cs)). The "Back" button always brings me back to ```"FirstPage"``` and not the ```MainMenu```. – Falko Jul 21 '14 at 04:51
That's how it's designed to work, are you trying to reveal the navigation menu? – Chase Florell Jul 21 '14 at 14:50
Yes, that's what I want: A button to open the ```MainMenu``` - like it is in Android. – Falko Jul 25 '14 at 05:37
@Falko - Did you succeed in android when hardware "Back" button is pressed? I have problem as it minimize the application instead of going back. – SoftSan Jan 08 '15 at 11:16
@SoftSan: In ```MainActivity``` you can override ```OnBackPressed``` setting ```IsPresented=false``` if it is currently ```true```. – Falko Jan 08 '15 at 11:39
isPresented is for showing/hiding menu (if I don't misunderstood), I do it in my NavigateTo Method inside masterdetail page. IsPresented = false; You can visit [this](http://stackoverflow.com/questions/27836805/xamarin-forms-master-detail-page-and-navigation-history-issue) – SoftSan Jan 08 '15 at 11:42

score 1 · Answer 2 · answered Jul 12 '14 at 20:37

1

Your on the right track, your NavigatePage needs to go on the Detail so

Detail = new ContentPage { Content = new Label { Text = "A" } }

and

MDPage.Detail = new ContentPage { Content = new Label { Text = name } };

would be

Detail = new NavigationPage(new ContentPage { Content = new Label { Text = "A" } })

and

MDPage.Detail = new NavigationPage(new ContentPage { Content = new Label { Text = name } });

answered Jul 12 '14 at 20:37

lee

738
1
7
18

This sounds very promising. (Since Android does not allow multiple navigation pages on screen at a time, I replaced ```return new NavigationPage(MDPage = ...)``` with ```return MDPage``` as well.) But now I see an icon on Android and the title of the ```Master``` page on iOS. And ```window.RootViewController.NavigationController``` is still null, thus I don't see how to further control the appearance of the toolbar or the back button, respectively. – Falko Jul 14 '14 at 07:27

score 1 · Accepted Answer · answered Jan 19 '16 at 14:08

I finally found a solution. The code basically needs two minor corrections:

Wrap all DetailPages in a NavigationPage, but not the MasterDetailPage (see #1, #2 and #3 below).
Add an Icon to the MasterPage when on iOS (see #4 below). Don't forget to a the actual PNG(!) to the iOS resources.

The minimum working example is as follows:

public static class App
{
    static MasterDetailPage MDPage;

    public static Page GetMainPage()
    {
        return MDPage = new MasterDetailPage { // #1
            Master = new ContentPage {
                Title = "Master",
                Icon = Device.OS == TargetPlatform.iOS ? "menu.png" : null, // #4
                Content = new StackLayout {
                    Children = { Link("A"), Link("B"), Link("C") }
                },
            },
            Detail = new NavigationPage(new ContentPage { Content = new Label { Text = "A" } }), // #2
        };
    }

    static Button Link(string name)
    {
        var button = new Button { Text = name };
        button.Clicked += delegate {
            MDPage.Detail = new NavigationPage(new ContentPage { Content = new Label { Text = name } }); // #3
            MDPage.IsPresented = false;
        };
        return button;
    }
}

Originally I posted this solution as an update to my question. Just now I decided to move it into an explicit answer. — Falko, Jan 19 '16 at 14:10
Is this App class is not same as the App class which extends the Application class ? — Krrish, Mar 22 '16 at 14:14
@Krrish: When I found this solution (shortly after posting the question), this was the way to extend the Application class. Due to a Xamarin.Forms update, this changed quite a bit. See [here](http://xforms-kickstarter.com/#a-slide-out-menu-using-a-master-detail-page) for a more up-to-date example of master-detail pages. — Falko, Mar 22 '16 at 14:27
The icon was the key missing ingredient for me. Poof, the back button shows up. — Lee McPherson, Oct 19 '16 at 03:43

Show "Back to Menu" Button in iOS NavigationBar with Xamarin.Forms

3 Answers3

Linked