Create an application for Windows Phone 7 from start to finish. Part 2. Tools for creating applications, recommendations for designing an interface

Previous part

Application creation tools

When you install the Windows Phone Developer Tools, you get the following free tools and components.

• Expression Blend for Windows Phone
• Visual Studio 2010 Express for Windows Phone
• Windows phone emulator
• Zune software
• XNA Game Studio 4.0
• Silverlight
• .NET Framework 4

If you already have Visual Studio 2010 installed (Professional or Ultimate), then you can use your own edition of Visual Studio 2010 for development after installing the Windows Phone Developer Tools.

Expression Blend for Windows Phone

Expression Blend for Windows Phone is a design program that allows you to create and add special visual features, such as gradients, animations, and transitions. For some tasks, Expression Blend is easier to use than Visual Studio. The following list contains some tasks that are easily performed using Expression Blend.

• Visual creation of data templates
• Use during development of test data to visualize data patterns
• Visual creation of control styles
• Creating and viewing animation

The following image shows the appearance of Expression Blend.


')
Note:
This article describes the work in Visual Studio 2010 Express for Windows Phone, and will not be used by Expression Blend for Windows Phone.

Visual Studio 2010 Express for Windows Phone

Visual Studio 2010 Express for Windows Phone includes a drag-and-drop designer that simulates the look and feel of a phone, a code editor, and a debugger. If you have worked with Visual Studio to develop other types of applications, you will find an environment for developing mobile applications very familiar. The following image shows the appearance of Visual Studio 2010 Express for Windows Phone.



Designer for Windows Phone contains toolbar (Toolbox), design mode (Design view), XAML mode (XAML view), Solution Explorer (Solution Explorer) and Properties window (Properties window), similar to the standard Visual Studio designer. Two key differences are that in design mode, the surface looks like a Windows Phone device, and a target device (Target device) has appeared that will allow you to choose whether you will debug the application on the device or on the emulator. The following image shows the emulator in portrait and landscape orientation.

Interface Design Guidelines (Design Guidelines)

It is important that you know about the established principles of interface design, if you plan to publish your Windows Phone applications in the App Hub. Design guidelines describe how to design a user interface for your application.

Recommendations on interface design, certification requirements and other important information will be repeated in this article where it is needed.

The following table summarizes the basic principles of interface design and application requirements that must be considered when designing and developing your application. A complete and most up-to-date list of recommendations for designing an interface can be found at the following link.
UI Design and Interaction Guide for Windows Phone 7

Category	Design Recommendations
Navigation, frames and pages	Be sure to consider the action of the “Back” button and the user interaction with the application panel when creating a navigation map.
Application bar	Use the application bar to perform common application tasks. You are limited to four buttons in the application bar. Put less frequently performed actions in the application panel menu. If the action is difficult to express clearly using the icon, place it in the menu bar of the application, and not as a button. You are limited to five items in the application bar menu to prevent scrolling from occurring.
Back button	You need to implement only the behavior of the “Back” button, which moves backward or hides the context menu and dialog boxes. All other implementations are prohibited.
Screen orientation	The default orientation is portrait. To support landscape orientation, you need to add code. If the application supports landscape orientation, it cannot determine only left or just right landscape orientation. Left and right landscape orientations should be supported. If the application supports text input, you must support landscape orientation due to the possibility of a hardware keyboard.
Themes	Avoid using too much white in applications, for example, white background, as this can have a serious impact on the battery life of devices with an OLED display. If the main or background color of the control is explicitly set, make sure that its content is equally well visible both with a dark and a light theme. If the specified color is not visible, also explicitly set the background or base color so that it is sufficiently contrast or choose a more suitable color.
Application settings	Application actions that overwrite or delete data or cannot be reversible should have a Cancel button. When using additional screens with confirmation or cancel buttons, pressing these buttons should perform the corresponding action and return the user to the main settings menu.
Touch input	All basic and common tasks should be performed with one finger. Touch control should respond to touch immediately. A touch control that works with a delay or seems slow during transitions will have a negative impact on the user experience. For lengthy, resource-intensive operations, developers should provide feedback to indicate that something is happening, using content that reflects progress, or consider using a progress bar or in case of an emergency raw notification. For example, you can show more and more content in the download process. A long press, as a rule, should be used to display a context menu or an options page for an item.
Screen keyboard	You must set the input property property for a text field or other editable elements to determine the type of keyboard and include appropriate printing tools.
Canvas and Grid Controls	The Canvas control uses pixel-based markup and can provide better performance than the Grid control for deep embedded or nested controls in fixed orientation applications. A grid is the best choice when an application frame needs to expand, contract, or rotate.
Panorama and Pivot Controls	Both Panorama and Pivot provide horizontal navigation through the device’s content, allowing the user to pan and pan as needed. Use the Panorama control as a starting point for a more detailed user experience. Use Pivot to filter large amounts of data, providing a view of multiple data sets, or to provide a way to switch between different modes of the same data. Do not use Pivot for navigation tasks as wizard applications. Vertical scrolling of a list or grid in Panorama sections is acceptable as long as it is within the boundaries of the section and not parallel to horizontal scrolling. Never place a Pivot inside another Pivot control. Never place a Pivot inside a Panorama control. The application should minimize the number of Pivot pages. Pivot should only be used to display items or data of a similar type. You do not need to use the buttons on the application bar to navigate in the Pivot control. If Pivot requires navigation tools, you are probably not using it correctly.
Text	You must first use the Segoe font. Use alternate fonts with caution. Avoid using fonts that are smaller than 15 points. Adhere to the same style of capitalization. The application name in the title bar must be in upper case. Use all lowercase letters for most of the rest of the text in the application, including page headings and list names. In the application panel, any text is automatically displayed in lower case.

Additional resources

Below are some links to additional resources where you can learn more about developing for Windows Phone.

Resource	Description
Windows Phone App Hub	Additional documentation, code samples, and Windows Phone development community.
Windows Phone Development Documentation	Official development documentation for Windows Phone on MSDN.
Silverlight Documentation	Official Silverlight and Silverlight for Windows Phone documentation on MSDN.
Code Samples for Windows Phone	Downloadable code samples that supplement the Windows Phone documentation.
Windows Phone QuickStarts	A collection of short articles that demonstrate the challenges and opportunities when developing for Windows Phone.
Windows Phone Developer Guide	A developer’s guide describing the history of a fictitious company that decided to use Windows Phone 7 as a client device for an existing cloud application.
The Windows Phone Developer Blog	A blog that contains relevant information and announcements directly from the Windows Phone development team.
Windows Phone 7 Development for Absolute Beginners	A series of videos for absolute beginners, not requiring any programming skills.
Windows Phone 7 Jump Start	A series of videos for developers who are not familiar with the development for Windows Phone using Silverlight or XNA.
Windows Phone 7 Training Course	Video clips and workshops on developing Windows Phone using Silverlight or XNA.
.toolbox	Textbooks and other resources for designers, teaching how to develop design applications for Windows Phone. Includes Expression Blend tutorials.
Jeff Wilcox Blog	A blog about Silverlight, Silverlight Toolkit and Silverlight for Windows Phone. Jeff Wilcox is Microsoft's lead software developer for the Silverlight team.
Jeff Prosise Blog	A blog about various areas of programming on .NET, including Silverlight and Windows Phone. Jeff Prosez is an experienced programmer and one of the founders of Wintellect.

Next part