Application Bar Icon Buttons for Windows Phone
March 22, 2012
The default Application 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 application. 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 Application Bar Overview for Windows Phone.
The following illustration shows an example of an Application Bar.
A set of Application Bar icons that can be used directly by your application or as guides for creating your own icons is installed with Windows Phone SDK. You can find the sample icons at one of the following locations:
C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Icons\dark
C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Icons\dark
 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). |
The following are best practices for the icon buttons displayed by the Application 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 Application 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 Application 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 >>.
Before you can use images for icon buttons on the Application Bar, you must first add them to your application. 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 Application Bar.
To add icon button images to your Windows Phone application
-
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
Copy if newer
Caution:
Build Action must be set to Content to use the icons as button images.
-
(Optional) Rename the icon files in the project.
