Windows Phone 7 Design Guidelines – Cheat Sheet

One of the tasks I am trying to accomplish as I write the documentation to accompany the FuelTracker project, is to incorporate the design guidelines and certification requirements where they are pertinent. As a side effect of this effort, I’ve generated this little “cheat sheet” of various design hints and app requirements gleaned from these documents. Most of these hints pertain to issues we ran into when implementing Fuel Tracker so it assumes some basic familiarity with Silverlight controls and other features that are covered in detail in the design guidelines. I expect to be adding to this list, but  I am posting what I have so far, as I think it has some value.

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.


Comments (10)
  1. Jas says:

    What about memory avialable for app ?

    90 MB

  2. Emad Ibrahim says:

    Great and concise list.  Thanks.

  3. rockyMtnRajah says:

    Extremely useful information. Thank you

  4. Geoff Taylor says:

    Great list! Two things I think should be added are:

    * A way of contacting support from the app, and

    * A way of displaying the version number.

    My app submission was initially rejected because it didn't meet these two criteria, and I can't see them on this list.

    Many thanks!

  5. Iconomaniya says:

    Here are new Metro-style application bar icons for Windows Phone and

    Windows 8: <a href="

  6. Iconomaniya says:

    Here are new Metro-style application bar icons for Windows Phone and

    Windows 8: <a href="

  7. Insomnia says:

    You write: "Application icon should be 62 x 62 pixels and PNG format"

    Shouldn't it be: "Application icon should be 26 x 26 pixels and PNG format".

    And more:

    Icon images should be 48 x 48 pixels in total. It is the foreground part of the icon, that should be 26 x 26 pixels only.

  8. BerylS says:


    If you are not only interested in these apps but you want to make a Silverlight chat app you can check the Ozeki VoIP SIP SDK that offers even source code samples for this task. Check at:

    Best regards,


  9. Dam says:


    I need a little explanation on a point of your article :

    Back button

    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.

    Does this mean the Back button has to close the dialog and can't propagate the BACK to the page behind the dialog ? For example, could I close the popup and apply the back to the page in my application ? Or "cancel the backward navigation to the previous page" means that I must set the Cancel property of my CancelEventArgs parameter in the OnBackKeyPress method ?

    Thanks in advance !

  10. nbanba says:

    Don't agree with – "Pressing the back button must return the application to the previous page".

    It can close Message Box and so on?

Comments are closed.

Skip to main content