App bar icon buttons for Windows Phone
[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]
The default app bar is a row of icon buttons and an ellipsis along the bottom of the phone’s screen. Use icon buttons for the primary, most common actions in your app. Some actions are difficult to convey clearly with an icon. If this is the case, consider using a menu item instead. For more information, see App bar for Windows Phone.
The following illustration shows an example of an app bar.
.png)
A set of app bar icons that can be used directly by your app or as guides for creating your own icons is installed with Windows Phone SDK. You can find sample icons for both dark and light backgrounds at the following location:
C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0\Icons
Note
You need to use only the icon files in the dark folder. Windows Phone automatically colors the icon according to the theme selection (light or dark).
This topic contains the following sections.
Icon button best practices
The following are best practices for the icon buttons displayed by the app bar:
Icon images should be 48 x 48 pixels in size. The foreground graphic for the button should fit in a 26 x 26 area in the center of the image so that it does not overlap the circle.
The circle displayed on each button is drawn by the app bar and should not be included in the source image.
Icon images should use a white foreground on a transparent background using an alpha channel. Windows Phone automatically colors the icon according to the theme selection (light or dark), and colored icons can cause this effect to display unpredictably.
Do not create a button that navigates backward in the page stack. All Windows Phones have a dedicated hardware Back button that should be used for backward navigation.
Keep Icon Button labels as short as possible. If the language of the device is English, labels appear on only one line, and are truncated if necessary.
Choose icons that have clear meanings when the phone is rotated. When the phone is in landscape orientation, the app bar appears on the side of the screen vertically. The icon buttons are rotated so that they appear upright to the user. It is possible for icon meanings to be confused when this occurs, particularly if two of the icons are mirror images of each other such as << and >>.
Adding icon button images to your Windows Phone app
Before you can use images for icon buttons on the app bar, you must first add them to your app. In this procedure, you create a folder called Images and add icon files to it. You can name the folder whatever you want, but Images matches the name in the default XAML app bar.
To add icon button images to your Windows Phone app
In Solution Explorer, right-click your project, point to Add and then click New Folder.
Name the folder Images.
In Solution Explorer, right-click the folder Images, point to Add and then click Existing Item.
Browse to the location of the icon files, select one or more files, and then click Add.
In Solution Explorer, select all the new files.
In the Properties window, set the following properties for the new files.
Property |
Value |
|---|---|
Build Action |
Content |
Copy to Output Directory |
Do not copy |
Warning
Build Action must be set to Content to use the icons as button images.
- (Optional) Rename the icon files in the project.
See Also
Other Resources
How to change app bar icon buttons and menu items dynamically for Windows Phone
How to create an app bar using XAML for Windows Phone