How to make MAUI Shell TabBar conditionally visible (auto-hide)?

Question

Hello !

I have this bottom bar, in a MAUI Shell app.

As you can see, when I have only 7 itens in the collection views, the navigation bar overlaps the last entry info.

I want to auto-hide the bar, make it visible only when the user touch the button of the screen.

Any ideas for iOS?

Answer 1

Hello,

I want to auto-hide the bar, make it visible only when the user touch the button of the screen.

You could try setting Shell.TabBarIsVisible="False" to hide the bottom bar (Tabbar).

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XXX"
            Shell.TabBarIsVisible="False"
            >

You could also try to hide the Tabbar when scroll the CollectionView:

private void CollectionView_Scrolled(object sender, ItemsViewScrolledEventArgs e)
    {
       Shell.SetTabBarIsVisible(this, false);
    }

Add make it visible when touch a button

private void Button_Clicked(object sender, EventArgs e)
    {
        Shell.SetTabBarIsVisible(this, true);
    }

Best Regards,

Wenyan Zhang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

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.