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

8 comments

  1. Thanks for sharing the design guidelines.

    ReplyDelete
  2. it's a nice share no doubt, but i am not impressed with the below 2 points:

    1. no support for data binding from xaml itself in application bar
    2. text always displays as lower case

    when will microsoft add data binding? any idea? also, is there any specific reason for converting the text to lower case characters?

    ReplyDelete
  3. @Divya,Regarding your Point 2 :

    This is as per 'Metro' Design guideline, Also the Circle which encompasses the icon cannot be removed as it is default,There is also limit to text to the icon,try setting bigger text around 13+ words like "Book Air Ticket",it will break and also it does not warp as well.

    If you read through Metro Design Guideline you will surely come to know reason behind the specific purpose and styles for the text.

    ReplyDelete
  4. Great tutorials! Thank you so much!

    ReplyDelete
  5. Thanks for the tutorial.. Its simple.

    ReplyDelete


 
© 2008-2014 Kunal-Chowdhury.com | Designed by Kunal Chowdhury
Back to top