Language: HTML | XAML

Adding app bars (XAML)

Applies to Windows and Windows Phone

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.

Bottom app bar control

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

TopicDescription

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.

 

Related topics

Adding controls and content
For designers
Navigation patterns
Command patterns
Layout
Hub
Bottom app bar
Top app bar
Back button
Guidelines for app bars
Guidelines for the hub control
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

 

 

Show:
© 2014 Microsoft