Windows Phone 8 and 7.x Design Guidelines

It was recently brought to my attention that knowing the design guidelines prior to building an application saves the developer a lot of time, since incorporating the design guidelines and certification requirements makes the application acceptance process faster. Here are some hints that I stumbled upon:

Navigation, frames and pages

  • Mockup the pages and navigational map of your application and walk through them several times before coding. This will minimize or eliminate the need to add pages or change the map later, when it will be much harder.
  • Make sure to consider the back button and user interactions with the application bar when creating your navigation map.

Application Bar

  • Use the application bar button for common application tasks.
  • You are limited to four application bar buttons.
  • Place less frequently performed actions in the application bar menu.
  • If the action is difficult to clearly convey with an icon, place it in the application bar menu instead of as a button.
  • You are limited to five application bar menu items to prevent scrolling.
  • Standard application bar icons are installed as part of the Windows Phone Developer tools. Find them at C:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Icons
  • Custom application bar icons should be 48 x 48 pixels and use a white foreground on a transparent background. You do not need the circle in the icon, as this is drawn by the application bar.

Back button

  • Pressing the back button from the first screen of an application must exit the application.
  • Pressing the back button must return the application to the previous page.
  • If the current page displays a context menu or a dialog, the pressing the Back button must close the menu or dialog and cancel the backward navigation to the previous page.
  • You should only implement back button behaviors that navigate back or dismiss context menus or modal dialog boxes. All other implementations are prohibited.

Screen orientations

  • Portrait is the default application view-you must add code to support landscape view
  • If an application supports landscape it cannot specify only left or only right landscape views – both views must be supported.

Application icon

  • Application icon should be 62 x 62 pixels and PNG format.

Tiles and tile notification

  • Tile images should PNG format and measure 173 pixels by 173 pixels at 256 dpi
  • Make sure to change Build Action for images to Content when you add them to Visual Studio.


  • Avoid using too much white in applications, such as white backgrounds, as this may have an impact on battery life for devices that have organic LED displays.
  • If the foreground or background color of a control is explicitly set, verify that the content is visible in both dark and light themes. If the set color is not visible, also explicitly set the background or foreground color to maintain contrast or choose a more appropriate color.

Application settings

  • Application actions that overwrite or delete data, or are irreversible must have a “Cancel” button.
  • When using additional screens with commit and cancel buttons, clicking those buttons should perform the associated action and return the user to the main settings screen.

Touch input

  • All basic or common tasks should be completed using a single finger.
  • Touch controls should respond to touch immediately. A touch control that lags or that seems slow when transitioning will have a negative impact on the user experience.
  • For time consuming processes, developers should provide feedback to indicate that something is happening by using content to indicate progress, or consider using a progress bar or raw notification as a last resort. For example, show more and more of the content as it is being downloaded.
  • The touch and hold gesture should generally be used to display a context menu or options page for an item.

On-screen keyboard

  • You should set the InputScope property for a text box or other edit controls to define the keyboard type and enable the appropriate typing aides. For example, if you choose the URL input scope, a keyboard layout will be shown featuring a .com key.

Canvas/Grid for layout

  • Canvas uses a pixel-based layout and can provide better layout performance than the grid control for deeply embedded or nested controls in for applications that do not change orientations.
  • Grid control is the best choice when the application frame needs to grow, shrink, or rotate.

Panorama control/pivot considerations

  • Both panorama and pivot controls provide horizontal navigation through phone content, enabling the user to flick and pan as necessary.
  • Use panorama elements as the starting point for more detailed experiences.
  • Use a pivot control to filter large data sets, providing a view of multiple data sets, or to provide a way to switch between different views of the same data.
  • Do not use the pivot control for task-based navigation, like in a wizard application.
  • Use for vertical scrolling through a list or grid in panorama sections is acceptable as long as it is within the confines of the section and is not in parallel with a horizontal scroll.
  • Never place a pivot control inside of another pivot control.
  • Never place a pivot control inside of a panorama control.
  • Applications should minimize the number of pivot pages.
  • The Pivot control should only be used to display items or data of similar type.

Text guidelines

  • Use fonts other than Segoe sparingly
  • Avoid using font sizes that are smaller than 15 points in size.
  • Maintain consistent capitalization practices to prevent a disjointed or jagged reading experience.
  • The title bar application title should be all capitals.
  • User all lower case letters for most other application text including page titles, list titles, etc.


Also, another helpful design cheat sheet that Nathalie BELVAL has put together this handy card for designing and developing apps for Windows Phone 7.x and Windows Phone 8. It contains all the information you might need for:

  • Resolutions in Windows Phone 7 & 8
  • Application assets (screenshots, splash screens, application icons, etc)
  • Accent colors
  • Available icons

Download it, print it, love it.


Comments (17)

  1. This is a good news but it sounds a little bit complex for me.

  2. Dina Helmy says:

    Why, I could help you simplify this if you want feel free to send me back telling me what exactly you felt complex.

  3. Mark says:

    this is very useful, it really helps.. thank you so much

  4. Dina Helmy says:

    Thanks Mark, feel free to get back to me if you have any questions.

  5. Toti says:

    With the app bar buttons, how are you meant to use them? For instance, how do you display this "uE100" ?

  6. Dina Helmy says:

    To make creating high-quality scalable application bar icons for Windows Phone applications, you can use the Segoe UI Symbol font. The icons are specifically the Unicode characters in the range 0xE100 to 0xE124

    You can also find nice ready made icons here:

    Hope this answers your question and helps 🙂

  7. Harald-René Flasch says:

    Dina Helmy, Thanks a lot.

    Sounds simple, I'll give it a try!

  8. Jenson says:

    wow great work, really helpful post. thank you so much dina

  9. Lewis says:

    is it the same for the new update of windows phone 7.8?

  10. Dina Helmy says:

    Yes almost the same Lewis 🙂

  11. Philip Carlin says:

    Hi Dina, this is a really good article and should be a good check-list for things to cover.

    One question please, you state specifically using Segoe font, is there a particular reason why this font has to be used, i.e. is this one always installed/covers more languages?

  12. Fernando says:

    these guidelines are very useful.. great job

  13. Dina Helmy says:

    @philip this is actually the standard font that is being used by all WP, it is preferable to be always used to follow the WP Design principles and to get the native app look and feel. But, for sure you can use others.

  14. Kimi says:

    your post is very helpful. it makes developing on windows phone much easier for me now. i'll follow your guidelines.. thanks

  15. gEEks_WaGGer says:

    Windows Phone app training starts on monday. This is in the starting list. Thanks for the guide Dina.

  16. alex shyaka says:

    Hi Dina we enjoyed your presentation at the outbox and we would like to learn more. Can i have the presentation you made at the outbox

  17. Dina Helmy says:

    All the material is available on

Skip to main content