Windows Phone 7 (Mango) Tutorial - 5 - Design Guidelines for Application Bar

In the last chapter of the series, we learnt about Application bar and the uses of it using a small demo application. We described about Icon buttons and Menu items too.

You can add an application bar to your page both from XAML and code behind. There are some design guidelines for Application bar and a developer must know about these before designing and developing their Windows Phone application. In this chapter, we will discuss about them. Read to know more and don't forget to share them to your colleagues and followers.

Index - Windows Phone 7 (Mango) Tutorial

While working with the Application Bar yesterday, I came across some design principles and thought to share the same with you. Find the below 12 points and keep them in mind while designing your application UI:

1. Application Bar has in-built animation and rotation support. So, use it to keep consistency across all Windows Pone applications.
2. Always use an image of White color with Transparent background. If you have a different theme set for your phone, the Application Bar will colorize them accordingly.
3. Use 48 x 48 pixel icon images and the actual image content should place itself within 26 x 26 pixel.
4. You can find some sample icons with the SDK in the following directory: "%ProgramFiles%\Microsoft SDKs\Windows Phone\v7.X\Icons\dark", where 'X' is the version number. You can use them freely in your application.
5. Never draw the circle for the icons as that is drawn by the Application Bar itself.
6. Use icons for most commonly used commands. You can place only 1 - 4 icon buttons in the panel. Hence, if you want more than 4 commands to put in the Application Bar, use the Menu item for the additional actions.
7. Don't place more than 5 menu items in the application bar. This will create a scroll bar in the UI and the user will have to scroll to click on the items.
8. Don't add more than 20 characters in the menu items, as it doesn't have support for advance Text formatting like Trimming and/or Word Wrap.
9. Remember that, as the Application bar is not a Silverlight control, you can't use data binding for text. You have to hard code the text in XAML.
10. If you want localization support for your Application bar, you have to set the text from code behind dynamically.
11. Set opacity of Application bar to '0' (zero) if you want the bar overlaid on top of the page. Set it to '1' (one) if you want the page to properly adjust itself outside the covered area of application bar.
12. Also remember that, all text items will be converted to lower case while running. So, never thought it as Bug.

Hope, this post will be helpful for you while working with Windows Phone Application Bar. I will update the list if I explore something new. Also, if you have additional points, please share them in the below comment box. I will add them here for others to know.