Application Bar Icon Buttons for Windows Phone

This article based on Application Bar Icon Buttons for Windows Phone in MSDN is for my own reference purpose only. Go to MSDN if you want to have a deep understanding on it.

Where are the sample icons?

First, Microsoft has provided a set of sample icons for you after you install the Windows Phone SDK (To download the Windows Phone SDK, see Installing the Windows Phone SDK.) And 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

To add icon button images to your Windows Phone application

1. In Solution Explorer, right-click your project, point to Add and then click New Folder.
2. Name the folder Images.
3. In Solution Explorer, right-click the folder Images, point to Add and then click Existing Item.
4. Browse to the location of the icon files, select one or more files, and then click Add.
5. In Solution Explorer, select all the icon files.
6. In the Properties window, set the following properties for the new files.
   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.
7. (Optional) Rename the icon files in the project.

Make your very own icons

If you would like to make your own icons, here are recommendations you should know:

• 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.