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

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");
}
}

Answer 1

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>