Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
MSDN Library
Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

Adding AppBars and ToolBars (HTML)

Use AppBars to display commands that are relevant to the user's context, typically the current page or the current selection. The AppBar represents a commanding surface that goes to the opened state when the user taps the ellipsis on the AppBar, displaying the labels for the icon buttons and menu items (if enabled). An AppBarCommand can be either "primary" or "secondary." Primary commands are visible as button commands in the action area of the AppBar and secondary commands are always hidden as menu commands in the overflow area. AppBars are constrained to the top or bottom of the application's display and always overlays the canvas.

App bar example

The ToolBar is a specialized form of the AppBar and is a simple control that addresses command scalability. This control has an action area where commands are immediately available and an overflow area where commands are hidden but can be displayed upon request by the end user. The control supports adaptive behavior by allowing commands to dynamically move from the primary to the secondary area when space is limited. ToolBar is not constrained to a single location in an app but can be found in various places such as AppBar, Flyout and on canvas.

You can try working with AppBars, ToolBars and other key Windows Library for JavaScript (WinJS) features on the Try WinJS website.

The important thing to remember is that AppBars and ToolBars are different in only some ways:

  • AppBar is a light dismissible overlay, which means it will always cover some part of the screen.
  • AppBar, like all light dismissible overlays, must always be a direct child of the <body> element.
  • ToolBar, when closed, is not an overlay, which means that it must have its own layout space like any other component.
  • ToolBar, when opened, acts like an overlay by covering neighboring content as it expands vertically.

In this section

TopicDescription

Adding a ToolBar with commands (HTML)

ToolBar is a simple control that addresses command scalability. It has an action area where commands are immediately available and an overflow area where commands are hidden but can be displayed upon request by the end user. The control supports adaptive behavior by allowing commands to dynamically move from the primary to the secondary area when space is limited. ToolBar is not constrained to a single location in an app but can be found in various places such as Splitview, Flyout and on canvas.

Adding an AppBar with commands (HTML)

This article explains how to add an AppBar to your Windows Runtime app using JavaScript.

Adding an AppBar with custom content (HTML)

You can add an AppBar with custom content to your Windows Store app using JavaScript.

How to make app bars work with ListViews

This how-to explains the interaction between the ListView and the AppBar to support these scenarios while following the AppBar best practices.

Styling AppBars and ToolBars (HTML)

Provides examples of how to style an AppBar or ToolBar and their controls.

 

 

 

Show:
© 2015 Microsoft