Use app bars to show navigation, commands, and tools that can be hidden away when they aren't needed. You can put an app bar at the top of the page, at the bottom of the page, or both. App bars are hidden by default, and are shown or dismissed when the user right-clicks, presses Windows+Z, or swipes from the top or bottom edge of the screen. They can be shown programmatically when the user makes a selection or interacts with the app.

Opening an app bar programmatically

By default, app bars appear when the user right-clicks, or presses Windows+Z, or swipes from the top or bottom edge of the screen. When the user performs one of these actions, both the top and bottom app bars appear, if the page has both. You can open an app bar programmatically by setting the IsOpen property to true. When you do this, only the specific app bar you set the property value for (top or bottom) is opened.

To initially open your app bar when the page is loaded, set the IsOpen property to true in your Extensible Application Markup Language (XAML).

You typically open the app bar programmatically to show contextual commands when the user interacts with an item in your app. For example, you might show an app bar with formatting commands when the user selects text in your app. When you show contextual commands, set the app bar dismissal mode to sticky until the context changes to keep the commands visible.

Making an app bar sticky

By default, app bars are dismissed when the user interacts with your app anywhere outside of the app bar. To keep commands visible, you can change the dismissal mode by setting the IsSticky property to true. When an app bar is sticky, it's dismissed only when the user right-clicks, presses Windows+Z, or swipes from the top or bottom edge of the screen.

To make your app bar remain visible when the user interacts with your app, set the IsSticky property to true in your XAML.

Handling the Opened and Closed events

You can respond to the app bar being opened or dismissed by handling the Opened and Closed events.

For example, this is useful if you need to open an app bar over a WebView control. Other content can't be rendered over the top of aWebView. When the app bar is opened over a WebView, the WebView covers the app bar.

You can work around this problem by handling the app bar's Opened and Closed events. When a user opens the app bar, you create aWebViewBrush and set the WebView as its source. Then call the Redraw method, which takes a visual snapshot of the WebView. You then use that brush to fill a Rectangle, and hide the WebView. The app bar renders its content over the top of the Rectangle. When the user closes the app bar, you no longer need the simulated WebView, so you can put things back the way they were in the Closed event handler.

This example shows how to handle the Opened and Closed events. When the app bar is opened, the WebView is replaced with aWebViewBrush. When the app bar is dismissed the WebViewBrush is replaced with the WebView. The button in the app bar refreshes the web page and programmatically dismisses the app bar.