How to navigate in TabbedPage and keep TabbedPage as Host

Question

When I select a record in my list, I want the app to navigate inside the active tab like this:

My TabbedPage-Xaml looks like this

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             xmlns:views="clr-namespace:Futura.SA.CustomerModule.Views;assembly=Futura.SA.CustomerModule"
             x:Class="Futura.SA.CustomerModule.Views.CustomerDetailPage">
    <TabbedPage.Children>
        <NavigationPage Title="Main">
            <x:Arguments>
                <views:CustomerDetailMainDataPage x:Name="TbpgMainData"  Icon="barcode_white_24.png"/>
            </x:Arguments>
        </NavigationPage>

        <NavigationPage Title="Address">
            <x:Arguments>
                <views:CustomerDetailAddressSelectionPage x:Name="TbpgAddressSelectionPage"/>
            </x:Arguments>
        </NavigationPage>
    </TabbedPage.Children>
</TabbedPage>

When I select the Page "Adresses" and call _navigationService.NavigateAsync("NextPage") I assume that the Page of the Tab is replaced with the "NextPage". But instead it is navigating away from my TabbedPage and the NextPage is displayed as a regular page. When I go back I can see my TabbedPage again. Can I some how achieve my desired behavior?

I am using Prism 6.3 with Xamarin.Forms 2.4.

Thanks alot

Is it intentional that the NavigationPages are below the TabbedPage? — Paul Kertscher
Yes, wenn I navigate inside the view model of a TabbedPage, (e. g. CustomerDetailAddressSelectionPage) I want to navigate from that Page to another page. In my szenario I have a list of addresses and the user should select one for editing. I want that the Tab Host stays. Can add some images if that helps clarifying — Grrbrr404
Not sure without more code, but I think your _navigationservice instance is the wrong one... you'll need the one from the CustomerDetailAddressSelectionPage and not the one from the app root that kicked of the tabbed page. Are you constructor injecting a nav service in the VM for CustomerDetailAddressSelectionPage? — Depechie
You're right about the nav service instance! Because every TabbedPage is just a different view for parts of a specific Model I shared a ViewModel between all TabPages (Therefore nav service instance as well). Sadly I can't accept your comment as answer — Grrbrr404

Depechie Depechie · Accepted Answer · 2018-02-27T14:07:11

Best take a look at what _navigationservice instance you are targeting, most likely it's the wrong one...

For PRISM to know what navigation page it should use to actually navigate, you'll need to target the one from the CustomerDetailAddressSelectionPage and not the one from the app root that kicked of the tabbed page.

Check if you are constructor injecting a nav service in the VM for CustomerDetailAddressSelectionPage.

How to navigate in TabbedPage and keep TabbedPage as Host

1 Answers