Adding app bars (XAML)

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

Use app bars to present navigation, commands, and tools to users. App bars are hidden by default and appear when users swipe a finger from the bottom edge of the screen or right-click with a mouse. They cover the content of the application and can be dismissed by the user with an edge swipe, or by interacting with the application. App bars automatically respond to the edge swipe and can be shown or hidden programmatically.

The XAML framework provides the CommandBar and AppBar controls that make it easy to display UI that appears at the top or bottom edge of the screen on an edge swipe.

When you need an app bar that contains only AppBarButton, AppBarToggleButton , and AppBarSeparator controls, use a CommandBar. The CommandBar simplifies the creation of basic app bars by providing:

  • Automatic layout of commands, with primary commands on the right and secondary commands on the left.
  • Automatic resizing of app bar commands when the app size changes.

If you need more complex content, such as images, progress bars, or text blocks, use an AppBar control. You can use an AppBar with custom content to create a bar of tools or navigation UI. When you put your commands in a AppBar control, you have to resize and rearrange the AppBar content as the screen size changes.

For more info about designing app bars, see Guidelines for app bars.

If you’d like to try working with app bars and other key Windows 8 features, download the hands-on labs for Windows 8. These labs provide a modular, step-by-step introduction to creating a sample Windows Store app in the programming language of your choice (JavaScript and HTML or C# and XAML).

In this section

Topic Description

Quickstart: Adding app bars

Use app bars to show navigation, commands, and tools that can be hidden away when they aren't needed.

Quickstart: Adding app bar buttons

Commands in an app bar are typically shown using a special style with a round button, an icon, and a text label. You can use AppBarButton, AppBarToggleButton , and AppBarSeparator controls to more easily create app bars that reflect the proper design guidelines and behaviors.

How to use an app bar at different sizes

When a user makes an app narrower, there isn't as much horizontal space to show commands. If you have more than a few buttons in the app bar, you must make some adjustments to make the buttons show correctly at narrower widths.

How to add contextual commands to an app bar

Add commands to an app bar based on user selection or navigation.

How to add a menu to an app bar

Use a menu to add a set of related commands to an app bar.

How to share an app bar across pages

Use an app bar across related pages in your app.

AppBar styles and templates

This topic describes the styles and templates for the AppBar control.

CommandBar styles and templates

This topic describes the styles and templates for the CommandBar control.

AppBarButton styles and templates

This topic describes the styles and templates for the AppBarButton control.

AppBarToggleButton styles and templates

This topic describes the styles and templates for the AppBarToggleButton control.

AppBarSeparator styles and templates

This topic describes the styles and templates for the AppBarSeparator control.

AppBar button style images

Images of AppBar button styles included in StandardStyles.xaml.

 

Adding controls and content

For designers

Navigation patterns

Command patterns

Layout

Hub

Bottom app bar

Back button

Making the app bar accessible

For developers (XAML)

Your first app - Part 3: Navigation, layout, and views

Your first app - Add navigation and views in a C++ Windows Store app (tutorial 3 of 4)

Navigating between pages

Windows.UI.Xaml.Controls AppBar class

Windows.UI.Xaml.Controls CommandBar class

Windows.UI.Xaml.Controls Hub class

XAML AppBar control sample

XAML Navigation sample

XAML Hub control sample