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 t

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

Answer 2

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

1. Wrap all DetailPages in a NavigationPage, but not the MasterDetailPage (see #1, #2 and #3 below).
2. 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;
    }
}

Answer 3

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