Search code examples
xamarinxamarin.formsnavigationprismmaster-detail

How do I navigate from MasterDetailPage to ContentPage in Xamarin forms using Prism saving the navigation stack?

I'm working on a Xamarin+Prism app and now facing an issue. The application uses MasterDetailPage as a layout. The details page contains a google map with few markers. When you tap the marker, a popup appears, if you tap this popup, a separate view should be opened (let's call it Page1).

I want this view NOT to be a part of MasterDetailsPage and at the same time to have a "Back" button on the top navigation panel. This "Back" button should lead back to MasterDetailsPage. And here comes the issue. I haven't found a way to do this. If you don't use Prism, it's done very simple by pushing directly to NavigationStack. But Prism doesn't allow you to do so, you only have NavigationService with NavigateAsync. Is there a way to implement this kind of behavior? Or maybe any hacks?

MasterDetailsPage code

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="Find.Views.MainPage"
             xmlns:pages="clr-namespace:Find.Views">
    <MasterDetailPage.Master>
        <pages:MenuPage />
    </MasterDetailPage.Master>
</MasterDetailPage>

I've tried few ways of navigation like:

await NavigationService.NavigateAsync($"Page1");
await NavigationService.NavigateAsync($"/Page1");
await NavigationService.NavigateAsync($"NavigationPage/Page1");

and others, but nothing worked.

I've found the similar question, but an answer there is not correct. How do you navigate Xamarin Forms using Prism from Master Detail to Content Page without Master Detail

Solution

  • Do you want to achieve the result like following GIF?(Note: I will navigate a page1 when click the Button)

    enter image description here

    First of all, I registered my pages in RegisterTypes method like following code.

     protected override void RegisterTypes(IContainerRegistry containerRegistry) {

            containerRegistry.RegisterForNavigation<MenuPage>();
            containerRegistry.RegisterForNavigation<NavigationPage>();

            containerRegistry.RegisterForNavigation<ViewA>();
            containerRegistry.RegisterForNavigation<Page1>();
            containerRegistry.RegisterForNavigation<ViewB>();
        }

    If you want to have a back arrow, you need keep your navigted page not in root navigate stack.

    For example. I display the ViewA by default, this navigate code like following

     await _navigationService.NavigateAsync(nameof(NavigationPage) + "/" + "ViewA");

    Then, when we want to navigate to the Page1 from ViewA, we should use following code that will display the backarrow.

     await _navigationService.NavigateAsync(nameof(NavigationPage) + "/" + "ViewA" + "/" + "Page1");

    I upload my demo, you can refer to it.

    https://github.com/851265601/XFromsPrismNavi