App Shell : Hide TabBar element without disabling it

Question

Hi,

I have a problem using the Xamarin.Forms App Shell :

<TabBar>
    <ShellContent Route="CharacterSelectionPage" IsVisible="False" ContentTemplate="{DataTemplate local:CharacterSelectionPage}"/>
    <ShellContent Route="CharConfirmPage" IsVisible="False" ContentTemplate="{DataTemplate local:CharConfirmPage}"/>
    <ShellContent Title="Haut-faits" Icon="icon_about.png" Route="AboutPage" ContentTemplate="{DataTemplate local:AchievPage}" />
    <ShellContent Title="Réputations" Icon="icon_feed.png" ContentTemplate="{DataTemplate local:ReputPage}" />
</TabBar>

My two first ShellContents references two pages I have to use in my app, but I don't wanna display them in the TabBar while arriving on my app main page. So I've set the "IsVisible" property to False to hide them, but if I do that my Shell doesn't want to navigate to these pages, and my app directly jumps to the third ShellContent.

What should I do to only hide the ShellContents without disabling the navigation to the related pages?

Answer 1

I think there's impossible to do it, so I've set up a workaround using a TabbedPage, like this :

<TabBar>
    <ShellContent Route="CharacterSelectionPage" IsVisible="False" ContentTemplate="{DataTemplate local:CharacterSelectionPage}"/>
    <ShellContent Route="CharConfirmPage" IsVisible="False" ContentTemplate="{DataTemplate local:CharConfirmPage}"/>
    <ShellContent Route="MainTabbedPage" ContentTemplate="{DataTemplate local:MainTabbedPage}"/>
</TabBar>

And in my MainTabbedPage :

<TabbedPage ...
            Shell.TabBarIsVisible="False"
            xmlns:local="clr-namespace:MyProject.Views"
            ...
            >

    <local:AchievPage IconImageSource="icon_about.png" Title="Haut-faits"/>
    <local:ReputPage IconImageSource="icon_feed.png" Title="Réputations"/>
</TabbedPage>

And now I have my main screen with only two tabs.

This workaround sucks. Xamarin sucks.

Answer 2

Hello,

Welcome to Microsoft Q&A!

If you need to hide the TabItem and make it be able to navigate, you could register it by using code .

For example, register it as follows:

Routing.RegisterRoute("CharConfirmPage", typeof(CharConfirmPage));  

And navigate as follows:

private async void OnMenuItemClicked(object sender, EventArgs e)  
{  
    await Shell.Current.GoToAsync("CharConfirmPage");  
}  

Best Regards,

Junior Jiang

----------

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 3

@Junior Jiang-MSFT Thank you for you reply, but I cannot do it like that : If my page is not referenced as a ShellContent in my TabBar, I cannot reach it using Shell.Current.GoToAsync().

Answer 4

@Yowims , a little late maybe, but if you add your ShellContent outside the TabBar you will have a stand alone route that you can use with GotoAsync.