Getting ready for the Windows Phone 7 Exam 70-599 (Part 5)

This is the last part of my article series to prepare you for Microsoft's new Windows Phone 7 exam which will be available starting July 14th. For a short introduction and overview of the exam as well as a list of general learning materials please take a look at the first article. The official outline of the measured skills breaks down the topics into the following parts:

• Designing Data Access Strategies (19%) (this article)
• Designing and Implementing Notification Strategies (17%)
• Working with Platform APIs, Tasks, and Choosers (21%)
• Designing the Application Architecture (21%)
• Designing the User Interface and User Experience (22%) (this article)

The last article was about the general application architecture and hence dealt with topics like the application life cycle and tuning for performance and certification requirements. This last part focuses on the user interface and user experience on the phone, from best practices in programming to recommendations and requirements for creating a consistent and convenient experience in your software.

A note on the MSDN documentation: all online resources in the MSDN library for the Windows Phone documentation are now the pre-release documents for Windows Phone OS 7.1 ("Mango"). The original documentation for Windows Phone OS 7.0 (which the exam is likely based on) can be downloaded for offline use here (CHM format). Often there's little difference or it is likely that the changes have no effect on the exam; however in some cases this might not be the case or there are options available in "Mango" that are not part of the RTM release, so you should carefully compare the different versions, and if in doubt, base your learning on the 7.0 documentation.

Designing the User Interface and User Experience

This part of the exam topics has an interesting twist in it: whereas normally it is all about concrete features, mechanisms and APIs of the platform and its surrounding technologies (like the Push Notification Service), this part has a section about a specific architectural pattern in it: MVVM. This is new, and isn't explicitly mentioned in the Silverlight exam (70-506) for example. The remaining sections are about specific controls for Windows Phone, virtual keyboard input, making use of the built-in styles and topics like working with different screen orientations.

Design for separation of concerns

"This objective may include but is not limited to: presentation patterns that use view models, MVVM"

I'm sure that every Silverlight developer has heard about MVVM and view models by now, even if they're not using the pattern actively. MVVM helps with separating your data (model) and application logic from your user interface, and is a tailored version of other presentation patterns to fit Microsoft's modern UI technologies, like Silverlight and WPF. It helps to solve some of the most common problems with modern workflows and software development, for example to allow designers and programmers work on the same application easily, and to increase testability of code. On of the points of criticism always was that there is no real standardization or official recommendations from Microsoft on the pattern – at this point several popular frameworks exist to help you make use of MVVM, and each one has a slightly (or sometimes also dramatically) different notion of what that should look like. Therefore it's good to see that some articles on the pattern made it into the MSDN documentation of Windows Phone, and basic introductory explanations everybody can agree on are now brought to some kind of an official level.

I won't go into more details on the pattern at this point, because a comprehensive discussion would be way beyond the scope of this article, and there already are hundreds of discussions and great articles about MVVM out there. The following is a list of useful resources. Don't mind that some of them are about WPF and/or Silverlight – the pattern was created at a time when there was no Windows Phone and it really doesn't matter which one of these technologies is used to explain or demonstrate it.

• John Gossman: Introduction to Model/View/ViewModel pattern for building WPF apps – The original article on the pattern.
• Josh Smith: WPF Apps With The Model-View-ViewModel Design Pattern – Very comprehensive article with a short history on the development of MVVM as well as related patterns, and a lot of sample code.
• MSDN: Implementing the Model-View-ViewModel Pattern in a Windows Phone Application – A walk-through of how to apply MVVM to a phone application. The source code for this sample is available from the Code Samples for Windows Phone page.
• Channel 9 (John Papa): Kung Fu Silverlight – A talk on architectural patterns and practices, including MVVM (a similar session from the Silverlight Firestarter event can be found here).
• Channel 9 (Laurent Bugnion, MIX11): Deep Dive MVVM – Tackling some of the common problems with MVVM.
• Jeremy Likness: Model-View-ViewModel explained – Another very good introduction on the topic
• Levente Mihály: A Classic Memory Game – A three part series on building a game in Silverlight using MVVM. The last part is about converting the game to Windows Phone and the issues that aroused with that.

Design Windows Phone 7 control usage

"This objective may include but is not limited to: design control usage as described in UI Design and Interaction Guide for Windows Phone 7; design proper use of PanoramaControl and PivotControl; choose when to use the Panorama Control and PivotControl; recommend when to use ApplicationBar"

The user experience design guidelines are another helpful resource for you to make your application fit into the concepts on Windows Phone. It makes recommendations on general aspects of the platform, the design process and principles, best practices on application structure and navigation models, how to increase usability and consistency of your applications, and finally guidelines for the most common controls available in the SDK. The latter one is especially important for developers new to the environment, because Windows Phone includes some new controls specific to the platform (like the above mentioned Panorama and Pivot controls), and using those controls in a wrong or unintended way may have a great negative impact on user experience.

The Application Bar is a special platform feature that allows your application to add "quick access" icon buttons and menu entries to access common and frequently used tasks and features of your application. It is special in that it is not really a part of Silverlight. Instead, this element is handled by the phone shell, and you should be familiar with the restrictions implied by that, for example that normal Silverlight concepts like data binding or giving the elements on the Application Bar an x:Name cannot be used with the Application Bar.

The guidelines can be found on MSDN here, and are divided into the following parts:

• The Windows Phone Platform – This gives you an idea about the kinds of applications available and suitable for Windows Phone, and explains all the fundamental details of the system, including a description of the status and application bar, the hardware buttons and the supported screen orientation modes. It also gives you some performance considerations and tips to work with.
• The Application Design Process for Windows Phone – Gives a lot of advice on the design principles baked into the Windows Phone platform and how you could and should make use of them to create great applications. It also tries to get you started with the conceptualization process, prototyping and testing of your application.
• Application Structure and Navigation Models for Windows Phone – This sections gets more specific on possible structuring and navigation possibilities for applications, including the use of the Pivot and Panorama controls as well as drilldown scenarios.
• User and Platform Interactions for Windows Phone – Makes recommendations and explains all kinds of platform related topics, like color themes, animations, the concepts of frames and pages, touch input, tiles, splash screens, icons and other visual elements, and briefly also covers advanced topics like advertising.
• Control Design Guidelines for Windows Phone – Tips and recommendations on specific controls.

Additional resources:

• MSDN: Panorama Control for Windows Phone – Includes a best practices document.
• MSDN: Pivot Control for Windows Phone – Also has best practices recommendations.
• MSDN: Application Bar for Windows Phone
• Channel 9: Windows Phone Design Days – Pivot and Pano – A video on those two essential controls. This video series has other parts on the topics discussed in user experience design guidelines, like the Metro Design in general, animations, application structure and templates, so you should definitely take a look at it.
• Channel 9: Windows Phone Jump Start series: Part 4 (The Application Bar) and Part 13 (Panorama and Pivots)
• Peter Torr: Why are the ApplicationBar objects not FrameworkElements?
• The Windows Phone Developer Blog – Understanding Pivots and Panoramic view controls 
• App Hub: Types of Controls
• App Hub: Panorama and Pivot Controls
• Laurent Bugnion: Two small issues with WP7 Application Bar buttons

Recommend keyboard layout for a given situation

"This objective may include but is not limited to: InputScope property"

The input scope property is a feature of the text box which allows you to specify the layout for the on-screen keyboard on Windows Phone. There are several layouts that make it more convenient for your users to input text in specific situations, for example when they are supposed to enter URLs or phone numbers. By setting this value either in Xaml or code you can determine what layout is used when the keyboard is shown once the text box receives focus. Possible values are listed by the InputScopeNameValue enumeration.

Useful resources on this topic:

• MSDN: How to Specify the SIP Layout in a TextBox
• MSDN: How to Change the On-Screen Keyboard Input Scope in Windows Phone
• MSDN: Code Samples for Windows Phone – The "Keyboard Input Scope Sample" contains the source code for the How-to article in both C# and VB.
• App Hub: Working with Text on the Windows Phone – Gives a detailed explanation on the most common input scopes.
• Jeff Blankenburg: InputScope & TextBoxes – Many accompanying screenshots for different settings.

Design for system themes, accent color, and screen orientation

"This objective may include but is not limited to: built-in styles that use system themes and accent colors, ApplicationBar icons (size, transparency), landscape, portrait"

Windows Phone has a set of themes the user can choose from. They include things like the background color (black or white) and an accent color. When you create Silverlight applications for the phone, a set of named resources is available to your application which you can use to nicely integrate with these themes. For example, when you use the named brush resource "PhoneAccentBrush" for your elements, it will use the currently selected accent color of the system at runtime automatically. This is an important instrument to create a user experience that preserves the native look and feel of the system in your own application too. In addition, the available resources also provide visibility and opacity properties for the "dark" and "light" theme you can use to dynamically adjust custom elements of your application depending on which theme the user has selected.

The system themes are also an important aspect when you use the Application Bar, for example when you create custom icons for it. Windows Phone makes it pretty easy for you to get that same level of consistency with it too: you don't need to create a set of two icons; instead, you only create the white one (used for the "dark" theme), and if the user switches to the "light" theme, the system will invert your icon automatically, so that it is black on white then. Another important thing to know is that your icons are not supposed to have the circle border around them – it will be added by the system automatically.

On Windows Phone, there are three potential screen orientations: portrait mode (vertically positioning the page content), and two landscape modes, left and right, which are named by the position the status bar takes when you look at the phone (i.e. landscape left means the status bar of the phone is located at the left of the screen). You have to actively support orientations through a setting of your page. From there, orientation changes are triggered automatically e.g. by rotating the phone. If you support both portrait and landscape mode, you have to adjust your screen content accordingly when you are notified about an orientation change through the respective event. The involved basic techniques for that mostly concentrate on two variants: to keep the layout and use scrolling, or to dynamically rearrange the layout, for example by using grids.

All the details about built-in styles, the Application Bar icons and screen orientations are also covered by the user experience design guidelines (see above); I didn't list them here again.

• MSDN: Theme Overview for Windows Phone
• MSDN: Theme Resources for Windows Phone – A list of all the brushes, colors, font-related resources and other styles that are available in Silverlight as static resources.
• MSDN: How to Handle Orientation Changes on Windows Phone
• MSDN: Code Samples for Windows Phone – The Mini-Browser Sample also handles changes of the screen orientation.
• App Hub: Screen Orientations
• Channel 9: Windows Phone Jump Start series: Part 3 – Among other topics also is about creating orientation-aware pages.
• Jeff Blankenburg: System Theming
• Jeff Blankenburg: Application Bar – Also covers the involved icon concept at length.

Summary

Apart from the initial discussion on MVVM, this time we mostly covered the visual appearance of the user interface and input options, learning about recommendations on and best practices for the design of applications on Windows Phone.

This last part concludes the exam preparation series. I hope you got a good overview of what topics you can expect and how to prepare for it. I'd love to hear your personal experience with the exam in the comments below (in compliance with the exam regulations of course), whether the articles helped you during your learning, and of course also any feedback about what could've been made better. Good luck!