Navigation back inside tabbed page using Prism Xamarin forms

Question

I am creating Xamarin forms application using Prism library. Structure of pages looks like:

MyTabbedPage : TabbedPage
MyFirstPage : ContentPage (it is the first child of MyTabbedPage)
MySecondPage : ContentPage (separate page, not a child of MyTabbedPage)

My goal is: Application starts, user see tabs and ListView in MyFirstPage. When user tapping on any item - MySecondPage should be shown and user can see back button in navigation bar, that will return him to the MyFirstPage.

Below examples what I tried to do and results which I got:

1.

//when app started
_prismNavService.NavigateAsync(new System.Uri(@"/MyTabbedPage?selectedTab=MyFirstPage", UriKind.Absolute));
//when item in listview tapped
_prismNavService.NavigateAsync("MySecondPage", parameters: param);

result: second page is shown but no navigation bar on the top

2.

_prismNavService.NavigateAsync(new System.Uri(@"/MyTabbedPage?selectedTab=MyFirstPage", UriKind.Absolute));

_prismNavService.NavigateAsync("NavigationPage/MySecondPage", parameters: param);

result: second page has navigation bar, device's back button returns user to MyFirstPage, but there is no back button(left arrow) on navigation bar

3.

_prismNavService.NavigateAsync(new System.Uri(@"/MyTabbedPage?selectedTab=MyFirstPage", UriKind.Absolute));

_prismNavService.NavigateAsync("MySecondPage", param, false); //useModalNavigation : false

result: second page isn't shown

4.

_prismNavService.NavigateAsync(new System.Uri(@"/MyTabbedPage?selectedTab=MyFirstPage", UriKind.Absolute));
When tapped:
_prismNavService.NavigateAsync("MySecondPage", param, true);

result: second page has navigation bar, device's back button returns user to MyFirstPage, but there is no back button(left arrow) on navigation bar

5.

_prismNavService.NavigateAsync(new System.Uri(@"/NavigationPage/MyTabbedPage/MyFirstPage", UriKind.Absolute));
_prismNavService.NavigateAsync("MySecondPage", param, false); //useModalNavigation : false

result: second page has navigation bar, device's back button goes out from App, and there is no back button(left arrow) on navigation bar

6.

_prismNavService.NavigateAsync(new System.Uri(@"/MyTabbedPage/NavigationPage/MyFirstPage", UriKind.Absolute));
_prismNavService.NavigateAsync("MySecondPage", param, false); //useModalNavigation : false

result: second page isn't shown

Could someone explain which structure and navigation should be implemented to make it working?

Dean Puckett Dean Puckett · Accepted Answer · 2020-04-30T15:43:23

You need to put the page being displayed in the tab inside of a NavigationPage, then when you navigate to the child page from the tab make sure you are doing so that it adds to the stack rather than popping a modal over it.

so for example if you are creating Tabs dynamically using the query string

await NavigationService.NavigateAsync("MainPageTabbed?createTab=NavigationPage|ViewsA&createTab=NavigationPage|ViewB");

And when navigating to the child page from the tab ViewA

await NavigationService.NavigateAsync("SomeChildPage");

Make sure that when you are dynamically creating the tabs that you use a pipe | to separate the NavigationPage from the tab page to be displayed, and that when navigating there is no / at the start of your path to navigate to.

Likewise you can achieve the same if you are creating your tab page statically in the XAML

<TabbedPage>
 <NavigationPage Title="View A">
    <x:Arguments>
        <local:ViewA Title="View A" />
    </x:Arguments>
 </NavigationPage>
</TabbedPage>

Navigation back inside tabbed page using Prism Xamarin forms

1 Answers