Windows Phone Application Bar and Icons
By on May 10th, 2011

The Application Bar, the quick and easy toolbar for your application, is displayed as a row of between one and four icon buttons along the bottom of the phone’s screen. The icon buttons are used to provide users with quick access to an application’s most common tasks.

In addition to the row of icon buttons, applications can provide additional actions to the Application Bar by adding 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 to the right of the icon buttons or the empty space to the left of the icon buttons.

Using the Application Bar instead of creating your own menu system helps to create a consistent user experience across all applications on the device. Also, the Application Bar provides menu animation and rotation support for you.

Check out this useful article from MSDN – How to: Add an Application Bar to Your Application for Windows Phone – and this step-by-step tutorial by Kirupa on creating custom application bar icons.

IconsWindows Phone 7 Developer Tools ship with a set of sample Icons based on Metro design language. The set includes 32 icons in both light and dark shade, and also in vector form. The icons can be found at Program FilesMicrosoft SDKsWindows Phonev7.0Icons on your computer once you have installed the developer tools.

You only need to use the icon files in the dark folder. The Application Bar will colorize the icon according to the current style settings.

There’s also a popular icon set – MetroStation Icons Pack available as a free download. There are 7 main sections, with total 209 icons*3 colors – white, blue and black (overall 627 icons). The files are 256 x 256px .ico files (from 16 to 256px) and 256 x 256px .png files.

Tags: , ,
Author: Abhishek Baxi
Abhishek Baxi is an independent technology columnist for several international publications and a digital consultant. He speaks incessantly on Twitter (@baxiabhishek) and dons the role of Editor-in-Chief here at Techie Buzz.

Abhishek Baxi has written and can be contacted at abhishek@techie-buzz.com.
  • http://www.pedrolamas.com Pedro Lamas

    Might I add another link with appbar icons? :)

    http://www.pedrolamas.com/2011/03/12/wp7-application-bar-icons/

    • http://www.baxiabhishek.info Abhishek Baxi

      That’s actually a useful link, @PedroLamas:disqus ! Thanks.

      • http://www.pedrolamas.com Pedro Lamas

        Glad you like it, @baxiabhishek:disqus :D

 
Copyright 2006-2012 Techie Buzz. All Rights Reserved. Our content may not be reproduced on other websites. Content Delivery by MaxCDN