How to hide net maui tabbar correctly?

Question

How to hide net maui tabbar correctly?

How to hide net maui bottom tabs correctly?

To see it, create maui project, add two pages, name them FirstPage, SecondPage.

add shell tabbar, for example two tabs: 1st tab, 2nd tab, set datatemplate for them FirstPage.

Then create in FirstTab Button to navigate to the SecondPage, in the SecondPage set "TabBarIsvisible=False", then you'll see that Shell.Tab's not disappearing immediately, how it was in Xamarin.Forms,

How can i fix that?

Канат Кудайбергенов 40 Reputation points

2023-03-29T03:45:57.51+00:00

How it looks like you can see in github:
https://github.com/dotnet/maui/discussions/14226
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-03-29T05:44:15.7966667+00:00
The two videos at the link are both for MAUI, do you want to compare the behavior between MAUI and Xamarin.Forms? As you describe, I test with the following code, but the Tab will disappear immediately, I cannot reproduce your issue. Would you mind sharing some code snippets and the detailed environment information so that I can test?
And You can try to change another emulator to test if it is related to the performance of emulator.

And you can try setting TabBarIsVisible in OnAppearing method.

protected override void OnAppearing(){ base.OnAppearing(); Shell.SetTabBarIsVisible(Application.Current.MainPage, false);// set false in second page, set true in first page }

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Microsoft External Staff

AppShell

 <TabBar>
        <Tab  Title="1">
            <ShellContent Route="Main" ContentTemplate="{DataTemplate local:MainPage}" />
        </Tab>
        <Tab  Title="2">
            <ShellContent Route="first" ContentTemplate="{DataTemplate local:FirstPage}" />
        </Tab>
        <Tab  Title="3">
            <ShellContent Route="third"  ContentTemplate="{DataTemplate local:FirstPage}" />
        </Tab>
  </TabBar>

Register router for second page.

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

Click Button on first page to navigate to second page.

await Shell.Current.GoToAsync("SecondPage");

Set "TabBarIsvisible=False" in second page

<ContentPage ...
             Shell.TabBarIsVisible="False"
             Title="SecondPage">

Канат Кудайбергенов 40 Reputation points

2023-03-31T08:19:41.6333333+00:00

Yes, two videos both for maui, thank you for your answer. I didn't override the OnAppearing method, maybe shell tabbar is hiding slowly because of this. I tested in two emulators, and two physical devices, in all of them tabbar disappears slowly as in my video, first, tabbar disappears in firstpage where tabbar is visible, and only after that navigates to second page. In xamarin forms when navigating to the page where bottoms tabs are hidden, tabbar hiding happens instantly, later i will send to the link of the video with xamarin forms. Anyway i will try your code today
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-03-31T09:17:25.13+00:00

OK, waiting for your updates. I watched the videos and noticed that you were testing on Android platform. And I tested on Android emulator as well. Besides, you could provide some code snippets so that I can test again.
Tim Schaffert 0 Reputation points

2023-10-16T11:19:41.9966667+00:00
I was searching for a method to disable the visibility of the TabBar.

Only this solution worked properly for me and I'm happy with it:

<ContentPage ... Shell.TabBarIsVisible="False" Title="SecondPage">

1 answer

Your answer

Канат Кудайбергенов 40 Reputation points

2023-03-29T03:45:57.51+00:00

How it looks like you can see in github:
https://github.com/dotnet/maui/discussions/14226
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-03-29T05:44:15.7966667+00:00

The two videos at the link are both for MAUI, do you want to compare the behavior between MAUI and Xamarin.Forms? As you describe, I test with the following code, but the Tab will disappear immediately, I cannot reproduce your issue. Would you mind sharing some code snippets and the detailed environment information so that I can test?
And You can try to change another emulator to test if it is related to the performance of emulator.

And you can try setting TabBarIsVisible in OnAppearing method.

protected override void OnAppearing(){ base.OnAppearing(); Shell.SetTabBarIsVisible(Application.Current.MainPage, false);// set false in second page, set true in first page }
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-03-29T05:44:27.25+00:00

AppShell

<TabBar> <Tab Title="1"> <ShellContent Route="Main" ContentTemplate="{DataTemplate local:MainPage}" /> </Tab> <Tab Title="2"> <ShellContent Route="first" ContentTemplate="{DataTemplate local:FirstPage}" /> </Tab> <Tab Title="3"> <ShellContent Route="third" ContentTemplate="{DataTemplate local:FirstPage}" /> </Tab> </TabBar>

Register router for second page.

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

Click Button on first page to navigate to second page.

await Shell.Current.GoToAsync("SecondPage");

Set "TabBarIsvisible=False" in second page

<ContentPage ... Shell.TabBarIsVisible="False" Title="SecondPage">
Канат Кудайбергенов 40 Reputation points

2023-03-31T08:19:41.6333333+00:00

Yes, two videos both for maui, thank you for your answer. I didn't override the OnAppearing method, maybe shell tabbar is hiding slowly because of this. I tested in two emulators, and two physical devices, in all of them tabbar disappears slowly as in my video, first, tabbar disappears in firstpage where tabbar is visible, and only after that navigates to second page. In xamarin forms when navigating to the page where bottoms tabs are hidden, tabbar hiding happens instantly, later i will send to the link of the video with xamarin forms. Anyway i will try your code today
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-03-31T09:17:25.13+00:00

OK, waiting for your updates. I watched the videos and noticed that you were testing on Android platform. And I tested on Android emulator as well. Besides, you could provide some code snippets so that I can test again.
Tim Schaffert 0 Reputation points

2023-10-16T11:19:41.9966667+00:00

I was searching for a method to disable the visibility of the TabBar.

Only this solution worked properly for me and I'm happy with it:

<ContentPage ... Shell.TabBarIsVisible="False" Title="SecondPage">

Answer 1

Канат Кудайбергенов 40

I overrided the OnAppearing method, but anyway bottom tabs disappears in main(parent page), only after that navigates to the second page, you can see it:
https://github.com/dotnet/maui/discussions/14226

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-04-04T08:21:52.41+00:00

The tabbar is hidden smoothly on my side like the last video you post. Since I still could not reproduce the issue, it's recommended that you follow the progress at GitHub or it is recommended to open a support ticket for this. Please contact our paid phone support at MS Support. You will get 1:1 support on that.

Share via

How to hide net maui tabbar correctly?

1 answer

Your answer