How to make tab bar disappear when navigating to details page

Question

I am trying to implement the simple following navigation scenario:

I have "Page 1", which has a tab bar, and it allows navigation to "DetailsPage" which is defined as a global route, and only displays a back button to navigate back to "Page 1". This video shows this scenario exactly: https://user-images.githubusercontent.com/74175405/229085788-05809927-904b-4503-8b33-c8a45204e7a2.mp4

I have tried different approaches usingthe Shell.SetTabarIsVisible method but without success, the last one that I have tried after doing some researches and that seems the most cohesive is doing this respectively in FirstPage.xaml.cs and DetailsPage.xaml.cs:

protected override void OnAppearing()
{
    base.OnAppearing();

    Shell.SetTabBarIsVisible(workoutSelectionPage, false); //This is Page 2, in page 1 I set true 
}

AppShell.xaml:

<TabBar>
    <Tab Title="Page 1">
        <ShellContent ContentTemplate="{DataTemplate local:FirstPage}"/>
    </Tab>
</TabBar>

AppShell.xaml.cs:

Routing.RegisterRoute("Page 2", typeof(DetailsPage));

This is a pretty basic scenario so I'm sure I am missing something simple here any input is much appreciated, thanks!

Answer 1

You only need to set SetTabBarIsVisible in DetailPage.

The following code could be used to achieve the scenario in the video.

AppShell.xaml, don't need to set the ShellContent for DetailPage.

<TabBar>
    <Tab Title="MainPage">
        <ShellContent ContentTemplate="{DataTemplate local:MainPage}"/>
    </Tab>
    <Tab Title="First Page">
        <ShellContent ContentTemplate="{DataTemplate local:FirstPage}"/>
    </Tab>
</TabBar>

AppShell.cs, register routes here,

Routing.RegisterRoute("mainpage", typeof(MainPage));
Routing.RegisterRoute("firstpage", typeof(FirstPage));
Routing.RegisterRoute("detailpage", typeof(DetailPage));

FirstPage.cs, use shell navigation,

async void Navigate()
{
    ...
    await Shell.Current.GoToAsync("detailpage");
}

DetailPage.cs, use SetTabBarIsVisible in OnAppearing or constructor

public DetailPage()
{
    InitializeComponent();

    Shell.SetTabBarIsVisible(this, false);
}

This is the effect:

Hope it helps!