How to Show and Hide an App Bar Dynamically

Show and Hide AppBar

An app bar is hidden by default and shown when a user presses WIN+Z, right clicks or swipes from the top or bottom edge of the screen. We can control the visibility of an app bar dynamically by using the IsOpen property. The following code snippet shows or hides an app bar.

bottomAppBar.IsOpen = true;

Let's say, you want to show an app bar at a button click. Write this code on the button click event handler. Here bottomAppBar is the Name of the BottomAppBar or TopAppBar.

Here is the AppBar code look like.

<Page.BottomAppBar>
<AppBar x:Name="bottomAppBar" Padding="10,0,10,0" Background="Green" Foreground="Orange">
<Grid>
<Button Content="Button" HorizontalAlignment="Left" Height="49" Margin="380,25,0,0"
VerticalAlignment="Top" Width="289"/>
</Grid>
</AppBar>
</Page.BottomAppBar>

There is no need to set IsOpen property to false. The default behavior will hide it automatically if an app bar is visible.

If an app bar is sticky app bar (bottomAppBar.IsSticky = true;), you will need to set IsOpen property to false to hide the app bar. The following code snippet shows an app bar if it is hidden and vice-versa.

if (bottomAppBar.IsOpen) bottomAppBar.IsOpen = false;
else bottomAppBar.IsOpen = true;