Hiding the Tab Bar

Frameworks

.NET MAUI

The tab bar of a ShinyTabbedPage can get out of the way. You can hide it from a flag, for example during a full-screen photo, a checkout step or a video. You can also hide it automatically while the user is scrolling down through a feed.

On a flag

TabBarIsVisible animates. Set it to false and the bar slides off the bottom edge; set it back to true and it slides back up. While the bar is gone, the page’s content takes its space.

<shiny:ShinyTabbedPage TabBarIsVisible="{Binding ShowTabs}"
                       TabBarHideAnimation="Slide"
                       TabBarHideDuration="250">

Property	Type	Default	Notes
TabBarIsVisible	bool	true	Shows or hides the bar, animated.
TabBarHideAnimation	TabBarHideAnimation	Slide	Slide off the bottom edge, Fade in place, or None.
TabBarHideDuration	uint	250	Milliseconds. 0 hides and shows instantly.

These forward to IsBarVisible, HideAnimation and HideAnimationDuration on the ShinyTabBar, so a bar used on its own, or under Shell, animates the same way.

A docked bar gives its row to the content before it starts sliding away, and takes the row back only after it has slid back in. The resize happens while the bar still covers that strip, so the content never jumps. A hidden bar ignores taps and closes its centre or overflow menu if one is open.

Note

IsVisible still works and still removes the bar instantly, with no animation. Use TabBarIsVisible (or IsBarVisible) when you want the motion.

While scrolling

Set shiny:ShinyTabs.HideOnScroll="True" on the ScrollView or CollectionView (any ItemsView) inside a tab:

<shiny:ShinyTabItem Title="Feed" Icon="home">
    <CollectionView ItemsSource="{Binding Posts}"
                    shiny:ShinyTabs.HideOnScroll="True" />
</shiny:ShinyTabItem>

• The bar slides away once the user has scrolled down by HideOnScrollThreshold units (24 by default) in one go, so a finger resting on the screen doesn’t flicker it.
• It comes back after the same distance scrolling up, as soon as the list reaches the top, and whenever the user changes tab.
• Turning HideOnScroll off while the bar is hidden brings it back.

Scroll hiding never writes TabBarIsVisible. It drives a separate flag, and the bar shows only when both allow it. A page that hid the bar on purpose is not re-shown by a scroll, and a binding on TabBarIsVisible is never overwritten.

Attached property	Type	Default	Set on
ShinyTabs.HideOnScroll	bool	false	a ScrollView or ItemsView
ShinyTabs.HideOnScrollThreshold	double	24	the same view

Under Shell

HideOnScroll works the same way on a Shell page running ShinyTabBarBehavior. The bar is found by walking up from the scroller, so nothing needs to be wired. Shell lays its bar over the page rather than in a row, so only the slide happens there. To hide it from code with the animation, set IsBarVisible on the behavior’s Bar. ShinyTabs.IsTabBarVisible="False" on a page still removes the bar for that page outright.