Adding AppBars and ToolBars (HTML)
[ 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 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.
.png "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
| Topic | Description |
|---|---|
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. |
|
This article explains how to add an AppBar to your Windows Runtime app using JavaScript. |
|
You can add an AppBar with custom content to your Windows app using JavaScript. |
|
This how-to explains the interaction between the ListView and the AppBar to support these scenarios while following the AppBar best practices. |
|
Provides examples of how to style an AppBar or ToolBar and their controls. |