Prism - Xamarin Forms: How to keep bottom tab active during navigation

Question

I am a xamarin forms prism app, I have 3 tabs and the tab bar is active only on that specific page, If i navigate deep inside a specific tab, the bottom tab is gone. Is there a way to keep the bottom tab active through even when we navigate to other pages inside these tabs?

I tried to do something like this but i am not able to do it in prism.

Without prism it’s pretty straight forward to do as shown in above link but I’m not ablr todo with prism. Can anyone suggest how I can achieve it?

MY CODE: App.Xaml.cs

protected override async void OnInitialized()
        {
            InitializeComponent();
            await NavigationService.NavigateAsync("NavigationPage/MainPage");
        }

MainPage.XML

<?xml version="1.0" encoding="UTF-8"?>
< TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core" 
             xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core" 
             xmlns:windows="clr-namespace:Xamarin.Forms.PlatformConfiguration.WindowsSpecific;assembly=Xamarin.Forms.Core"


             xmlns:local="clr-namespace:MyTabs.Common.Views"
             x:Class="MyTabs.Common.Views.MainPage" BackgroundColor="Olive" BarBackgroundColor="Maroon">
     <TabbedPage.Children>
     <local:PageOne Title="PageOne"
                         Icon="PageOne.png" />

    <local:PageTwo Title="PageTwo"
                         Icon="PageTwo.png" />

    <NavigationPage Title="PageThree" Icon="PageThree s.png">
        <x:Arguments> 
                    <local: PageThree/> 
        </x:Arguments>
        </NavigationPage>
    <local:PageFour Title="PageFour"
                         Icon="PageFour.png" />
    </TabbedPage.Children>
</TabbedPage>

PageThreeViewModel:

public class PageThreeViewModel : ViewModelBase
    {
        private ICommand pageFiveCommand;
        public ICommand PageFiveCommand { get { return pageFiveCommand; } }

        private void OnCloseCommand()
        {
            _navigationService.GoBackAsync();
        }

        public PageThreeCommand ViewModel()
        {
            pageFiveCommand = new DelegateCommand(OnPageFiveCommand);
        }

        private async void OnPageFiveCommand()
        {
            //await _navigationService.NavigateAsync(?NavigationPage/PageFive");
            await _navigationService.NavigateAsync("GiftCardPage");
        }
    }

Have you tried making the Pages inside the Tab a NavigationPage. That way the tab will stick around — AbsoluteSith
So only PageThree needs the navigation inside? Can you paste the code where you're navigating in Page3 to some other page? Also can you try removing the NavigationPage in await NavigationService.NavigateAsync("NavigationPage/MainPage"); — AbsoluteSith
All the pages need it, but currently just testing out Page three. its just a blank page. Did not add anything in that page. — TheDeveloper
You have to Navigate from PageThreeViewModel then it should work. Cause I have done the same — AbsoluteSith

AbsoluteSith AbsoluteSith · Accepted Answer · 2018-06-08T07:06:02

You can achieve this by Wrapping the ContentPage inside the TabbedPage with NavigationPage.

Code :

<TabbedPage>
    <TabbedPage.Children>
        <NavigationPage Title="Home" Icon="home.png">
            <x:Arguments>
                <ContentPage>
                    //Your ContentPage here
                    //You can have a ViewModel for this ContentPage and Navigate inside that and will still have the Tabbed Page outside.
                </ContentPage>
            </x:Arguments>
        </NavigationPage>
    </TabbedPage.Children>
</TabbedPage>

Prism - Xamarin Forms: How to keep bottom tab active during navigation

1 Answers