App bar for Windows Phone
[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]
You can create an Application Bar to provide users with quick access to an application’s most common tasks. By using the Windows Phone Application Bar, you help to create a consistent user experience across all applications on the device.
This topic contains the following sections.
- Application bar user interface
- Application bar development
- Application bar properties
- Application bar best practices
- Related Topics
Application bar user interface
The default Application Bar is a row of icon buttons and an ellipsis along the bottom of the phone’s screen. The user can click the ellipsis to display the labels for the icon buttons and menu items if they are enabled. The Application Bar has built-in animation that is displayed as the menu is shown or hidden. Also, the Application Bar automatically adjusts when the phone changes orientation. When the phone is in landscape orientation, the Application Bar appears on the side of the screen vertically. This maximizes the remaining space for page content.
The App Bar height in portrait mode and width in landscape mode is fixed at 72 pixels and can’t be modified. The app bar can be set to be displayed or hidden.
The following illustration shows an example of an Application Bar that uses the mini size.
.png)
The following illustration shows an example of an Application Bar that uses the default size.
.png)
The following illustration shows an example of an Application Bar after the user clicks the ellipsis. In this example, the menu items are unavailable.
.png)
Menu items
In addition to the icon buttons, you can add one or more text-based menu items. These items are displayed in a list that slides up from underneath the icon buttons when the user clicks the ellipsis. The menu items are used for application actions that are less frequently used, or for actions that are difficult to convey with only an icon. To create a consistent user experience with the rest of the device, the text for menu items is automatically converted to all lowercase characters. The Application Bar menu is not hierarchical and the menu item list is not a submenu of any of the icon buttons.
The following illustration shows an example of an Application Bar after the user clicks the ellipsis. In this example, the menu items are enabled.
.png)
Application bar development
The easiest way to create an Application Bar is by using XAML. The page templates that ship with the Windows Phone SDK contain the XAML code for a sample Application Bar commented out. Uncomment the XAML to create an Application Bar. For more information, see How to create an app bar using XAML for Windows Phone.
You can also create an Application Bar by using only C# or Visual Basic code. For more information, see How to create an app bar using code for Windows Phone.
The Application Bar does not support some of the common control features, such as data-binding. This means that you cannot change the icon buttons and menu items by using name properties set in XAML. If you want to dynamically modify the text or icons at run time, you should create the Application Bar by using C# or Visual Basic. For more information, see How to change app bar icon buttons and menu items dynamically for Windows Phone.
If you intend to localize your application, see How to build a localized app for Windows Phone 8.
Application bar properties
This section describes the main properties of the Application Bar. You can set these properties in XAML or in code. You can set them once when you first create your Application Bar, or you can change them dynamically. To test the different properties and how they interact with each other, download the Application Bar Sample, or complete the procedures in Walkthrough: Creating an app bar test app for Windows Phone.
Property |
Notes |
|---|---|
Specifies the size of the Application Bar when it first appears on a page, default or mini. This is also the size that the Application Bar returns to after the user expands it and collapses it using the ellipsis. Use the mini size on pages where you want to maximize screen space, such as on panorama pages. .jpeg "Note") Note:
On pages that support landscape orientation, when in landscape orientation, the Application Bar appears with the default size regardless of the Mode value, to improve usability.
|
|
Expected values are between 0.0 and 1.0. The opacity of the Application Bar can be adjusted finely, but we recommend that you use only values of 0.0, 0.5, and 1.0.
|
|
The background color of the Application Bar. |
|
The foreground color of the Application Bar. This is the color of the icon button labels, and the menu item text. If you use transparent icon button images, this is also the color of the icon buttons. |
|
Indicates whether the user can see the menu items when they expand the Application Bar. |
|
Indicates whether the Application Bar is visible. |
Application bar best practices
The following are best practices for using an Application Bar:
Use the Windows Phone Application Bar instead of creating your own menu system.
Use the default system theme colors for the Application Bar unless there is a compelling reason to customize the colors. Using custom colors for the Application Bar can affect the display quality of the button icons, can cause unusual visual effects in menu animations, and can even influence power consumption on some display types.
Avoid using long text for menu items because the text will run off the screen. The recommended maximum length is between 14 and 20 characters.
Avoid using more than five menu items on an Application Bar because it will force the user to scroll.
See Also
Reference
Other Resources
Essential graphics, visual indicators, and notifications for Windows Phone