Adding app bars (XAML)

[アーティクル]
03/01/2016

[ 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.