Reader Level:

How to Show and Hide an App Bar Dynamically

By Mahesh Chand on Jan 05, 2013
This tip shows how to show and hide a Windows Store app bar from your code.

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.

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

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;

Mahesh Chand
Mahesh Chand

C# Corner founder, 10-times Microsoft MVP, technical author, and software architect. Mahesh authored his first book, A Programmer’s Guide to ADO.NET in C# with APress at the age of 25. C# Corner is a memb... Read more



Custom Software Development
MCN is your source for developing solutions involving websites, mobile apps, cloud-computing, databases, BI, back-end services and processes and client-server applications.

Trending up

Infragistics jQuery Controls