Search code examples
c#xamarinnavigationxamarin.formsmaster-detail

MasterDetailPage and NavigationPage combination within Xamarin


I'm creating a Xamarin application where I want to combine multiple pages, the MasterDetailPage and the NavigationPage.

My MainPage contains the MasterDetailPage, the master of the MasterDetailPage contains a list of views (custom class which stores information such as the class type, image to show and the name) the user can view. Those views are all ContentPages. When an item of the list is clicked, the ContentPage gets initialized by using reflection and is then stored within the MasterDetailPage. At the moment everything has been made as Xamarin suggests.

But one of those ContentPages contains a ListView.

Example of the ListView

When an item has been selected, the ListView has to open a detailview and the user must be able to return to the ListView. Because of that I'm using the Navigation class and push the page within the NavigationPage, as following (binding can be done better, but it's just to get feeling with Xamarin):

private async Task Handle_ItemSelected(object sender, Xamarin.Forms.SelectedItemChangedEventArgs e)
{
        if (_detail == null)
        {
            _detail = new Detail();

        }
        _detail.BindingContext = SelectedTrack;
        await Navigation.PushAsync(new NavigationPage(_detail));
}

When done like this, the Back button is rendered above the MasterDetailPage.

Example of the NavigationPage

Is there any way I can remove the 'burger' button of the MasterDetailPage when going to the ListView's detail page? Or am I currently using the wrong workflow?


Solution

  • Set your detail page as NavigationPage.

    _masterDetailPage.Detail = new NavigationPage(page);
    

    Or

    MainPage = new MasterDetailPage
                {
                    Master = new MyMasterPage(),
                    Detail = new NavigationPage(MyHomePage())
                });
    

    And then in your from detail view you can Navigate to your other pages by :

    await Navigation.PushAsync(new NavigationPage(_detail));
    

    You will see back button and not Hamburger.

    Have a look at the sample.