Xamarin forms MasterDetailPage navigation

Question

So ive been working on an app that uses a MasterDetail page and its going fine but Im just a little bit confused on how its suppose to navigate through pages.

At the moment i have the menu items opening some pages in the app and that parts working great, the side menu stays. The thing im confused with is how to handle having buttons on the main page being displayed. My buttons at the moment just open up a new page but the side menu of the MasterDetail page just disappears into the regular NavigationPage.

I will give my button code below.

btnSocial.GestureRecognizers.Add(new TapGestureRecognizer
{
    Command = new Command(() =>
    {
        Navigation.PushAsync(new SocialPage());
    })
});

Is this just how a MasterDetail page navigates or do you think im doing something wrong?

** EDITED **

Just incase this helps, i will attach my menuopage and launchpage code:

MenuPage.cs

public class MenuPage : ContentPage
{
    public Action<ContentPage> OnMenuSelect { get; set; }

    public MenuPage()
    {
        Title = "Menu";
        Icon = "ic_menu.png";
        BackgroundColor = ProjectVariables.PRIMARY_COLOR;

        var items = new List<MenuItems>()
        {
            new MenuItems("Social", () => new SocialPage()),
            new MenuItems("Career", () => null),
            new MenuItems("MySchedule", () => null),
            new MenuItems("Videos", () => null),
            new MenuItems("Contact", () => null),
            new MenuItems("Sign in", () => null)
        };

        var dataTemplate = new DataTemplate(typeof(TextCell));

        dataTemplate.SetValue(TextCell.TextColorProperty, Color.White);
        dataTemplate.SetBinding(TextCell.TextProperty, "Name");

        var listview = new ListView()
        {
            ItemsSource = items,
            ItemTemplate = dataTemplate
        };

        listview.BackgroundColor = ProjectVariables.PRIMARY_COLOR;
        listview.ItemSelected += (object sender, SelectedItemChangedEventArgs e) =>
        {
            if(OnMenuSelect != null)
            {
                var item = (MenuItems)e.SelectedItem;
                var itemPage = item.PageFn();

                OnMenuSelect(itemPage);
            }
        };

        Content = new StackLayout
        {
            Orientation = StackOrientation.Vertical,
            Children =
            {
                listview
            }
        };
    }
}

LaunchPage.cs

public class LaunchPage : MasterDetailPage
{
    public LaunchPage()
    {
        var menuPage = new MenuPage();

        menuPage.OnMenuSelect = (categoryPage) =>
        {
            Detail = new NavigationPage(categoryPage);
            //Detail.Navigation.PushAsync(categoryPage);
            IsPresented = false;
        };

        Master = menuPage;
        Detail = new NavigationPage(new MainPage())
        {
            BarTextColor = Color.White,
            BarBackgroundColor = ProjectVariables.PRIMARY_COLOR
        };

        MasterBehavior = MasterBehavior.Split;
    }
}

Gerald Versluis Gerald Versluis · Accepted Answer · 2016-09-16T11:14:40

Have a look at this documentation page from Xamarin.

It looks like you do not use the navigation service for this. You need a reference to your master page and set the Detail property for it.

Look at this section in particular.

public partial class MainPage : MasterDetailPage
{
    public MainPage ()
    {
        ...
        masterPage.ListView.ItemSelected += OnItemSelected;
    }

    void OnItemSelected (object sender, SelectedItemChangedEventArgs e)
    {
        var item = e.SelectedItem as MasterPageItem;
        if (item != null) {
            Detail = new NavigationPage ((Page)Activator.CreateInstance (item.TargetType));
            masterPage.ListView.SelectedItem = null;
            IsPresented = false;
        }
    }
}

On the selection of a ListView item they set the Detail property and it will do the navigation for you.

Xamarin forms MasterDetailPage navigation

1 Answers