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;