Windows Dev Center

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 if there's enough space in the AppBar and secondary commands are always hidden as menu commands in the overflow area.

App bar example

The AppBar is a specialized form of the ToolBar, which 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.

In this section

TopicDescription

Adding an AppBar with custom content (HTML)

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

Adding an AppBar with commands (HTML)

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

Styling AppBars and ToolBars (HTML)

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

Adding a tool bar with commands

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 AppBar, Flyout and on canvas.

Adding a custom tool bar with commands

TBD

How to make app bars work with ListViews

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

 

 

 

Show:
© 2015 Microsoft