App Shell : Hide TabBar element without disabling it

Yowims 96 Reputation points
2021-02-15T09:48:00.78+00:00

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?

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,326 questions
0 comments No comments
{count} votes

Accepted answer
  1. Yowims 96 Reputation points
    2021-02-16T13:27:12.707+00:00

    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.

    0 comments No comments

3 additional answers

Sort by: Most helpful
  1. Junior Jiang-MSFT 11 Reputation points
    2021-02-16T07:24:37.8+00:00

    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.

    0 comments No comments

  2. Yowims 96 Reputation points
    2021-02-16T08:31:22.103+00:00

    @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().


  3. Leo Wagner de Souza 691 Reputation points
    2023-08-21T17:43:37.21+00:00

    @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.

    0 comments No comments