Xamarin: Back button in Detail of MasterDetailPage

Question

I'm using Xamarin.Forms 2.3.1.114 to build a cross platform app. I'm starting with the UWP app, right now debugging as a desktop application.

This is the current navigation path:

Main menu (ContentPage) -> Contents (MasterDetailPage)

MasterDetailPage:

-> Master (ContentPage) contains a list of items showing via ListView

-> Detail (ContentPage) displays data from a single list item

The Xamarin documentation says:

The detail page is presented to the user by setting the MasterDetailPage.IsPresented property to false.

https://developer.xamarin.com/guides/xamarin-forms/user-interface/navigation/master-detail-page/

So I made the ListView in the master page public, and added code similiar to the following to the MasterDetailPage:

public MyMasterDetailPage()
{
    this.Master.ItemsListView.ItemSelected += MasterListView_ItemSelected;
}

private void MasterListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
{
    if (this.Master.ItemsListView.SelectedItem == null)
    {
        return;
    }

    this.Detail.BindingContext = this.Master.ItemsListView.SelectedItem;

    this.IsPresented = false;
}

The detail page shows the details of the selected item, so this is working fine.

However, there is a back button showing. When being on the Detail page, the back button brings me back to the Main menu content page, as opposed to the Master page, which would be the expected behavior in my eyes. What is the intended way to achieve this behavior?

Here is what I've tried:

Of course this behavior is because the Detail page has not been pushed into the navigation stack. Pushing the Detail page instance in there in the ItemSelected event causes an exeption, because its Parent property is already set.

I've tried wrapping the Detail page in a Navigation page when setting the Detail property of the MasterDetailPage, but this prevents the back button from showing, which is apparently caused by the NavigationPage claiming the Navigation stack or something along those lines. I've also tried making the Detail page inherit from NavigationPage as opposed to ContentPage, with the same result.

I'm not sure whether I'm looking for the right thing here, seems to me like I have some misunderstanding in the way MasterDetailPages are supposed to be used. Any help is appreciated.

This is the project which shows this behavior.

https://1drv.ms/u/s!At78FKXjEGEohocQQgxaZuCYT2rwMw

Start the UWP app, click on "List", click on any item on the left. Click the back button and you should see my problem.

Hi Daniel, you said the current code makes the Back Button visible, how did you do that? Any demo will be helpful to understand your question. The detail page should only be populated with TabbedPage, NavigationPage, and ContentPage instances, if you are choosing MasterDetailPage, the NavigationPage is used to fit your scenario — Franklin Chen - MSFT
Hi Franklin, I added a link to the problematic project at the end of the post. I did not do anything special to make the back button show up, it must be automatic due to there being a navigation stack. — Daniel Schmid
Its weird because I get no back button. So once I get to the master/detail page I'm stuck there — djack109

Franklin Chen - MSFT Franklin Chen - MSFT · Accepted Answer · 2016-08-26T05:03:17

When being on the Detail page, the back button brings me back to the Main menu content page, as opposed to the Master page, which would be the expected behavior in my eyes. What is the intended way to achieve this behavior?

Yes, your assumption is correct, this is due to the specific page was missing in navigation back stack.

The default behavior of Xamarin Master Detail page can't implement your full requirement.

The right way in this scenario is to use Navigation.PushAsync. This method asynchronously adds a Page to the top of the navigation stack.

Pushing the Detail page instance in there in the ItemSelected event causes an exeption, because its Parent property is already set.

Looks like you have assinged the Detail property of MasterDetailPage in xaml

  <MasterDetailPage.Detail>
    <pages:LeadDetailPage />
  </MasterDetailPage.Detail>

Please directly add a ContentPage to stack, this will make your navigation correctly.

Use the following code in the LeadsMainPage.xmal.cs file:

private void LeadsList_ItemSelected(object sender, SelectedItemChangedEventArgs e)
{
            if (_masterPage.LeadsList.SelectedItem == null)
            {
                return;
            }

            ContentPage detailpage = new LeadDetailPage();
            detailpage.BindingContext= _masterPage.LeadsList.SelectedItem;
            Navigation.PushAsync(detailpage);

            this.IsPresented = false;
}

Screenshot:

Xamarin: Back button in Detail of MasterDetailPage

1 Answers