Developing a Windows Phone Application from Start to Finish

Article
11/01/2012

October 21, 2011

This documentation and accompanying sample application will get you started building a complete application that targets Windows Phone OS 7.1. You will learn the basics of Silverlight and Windows Phone development by creating a simple fuel-tracking application for your car.

Some of the tasks that you will learn include the following:

Fuel Tracker Sample Application

This documentation includes a companion sample application named Fuel Tracker. Fuel Tracker is a complete application written in Silverlight for Windows Phone OS 7.1. Fuel Tracker enables a user to track the fuel consumption of his or her car. You can download the code for Fuel Tracker at the following link:

Audience

This documentation and accompanying sample application are best suited for developers with the following experience levels.

Some experience with:

Microsoft .NET Framework
Visual Basic or C#

Little or no experience with:

Silverlight
Windows Phone

Tip

To watch videos about the basics of Windows Phone development, see the Windows Phone Mango Jump Start series and the Windows Phone 7 Development for Absolute Beginners series.

Types of Applications

The Windows Phone application platform provides two frameworks for developing applications:

Silverlight

The Silverlight framework supports event-driven, XAML-based application development.
XNA

The XNA Framework supports loop-based games.

Silverlight and XNA can also be combined in a single application.

The following table lists some of the criteria that you can use to determine whether you should use Silverlight or the XNA Framework for your Windows Phone application. With Windows Phone OS 7.1, you can combine Silverlight and XNA into one application. For more information about Silverlight and XNA, see The Silverlight and XNA Frameworks for Windows Phone. For more information about the application platform, see Application Platform Overview for Windows Phone.

Application Requirement	Recommended Application Type
Text-based controls and menus	Silverlight
XAML-based event-driven application	Silverlight
Interaction with Windows Phone controls such as Pivot and Panorama	Silverlight
Embedded video	Silverlight
Hosted HTML	Silverlight
Web browser compatibility	Silverlight
Vector graphics	Silverlight
Looping game framework	XNA
Highly performant, visually complex applications	XNA
2D and 3D games	XNA
Advanced art assets such as textures, effects, and terrains	XNA
Xbox compatibility	XNA
Blend Windows Phone controls with sprites, meshes and textures	Silverlight and XNA
2D or 3D game that incorporates UI controls	Silverlight and XNA

This documentation describes how to develop your application using Silverlight for Windows Phone OS 7.1. The companion Fuel Tracker application for this documentation was originally written in Silverlight for Windows Phone OS 7.0 and has been upgraded for Windows Phone OS 7.1. For information about the changes made, see Upgrading Your Application from Windows Phone OS 7.0 to 7.1.

App Hub and Marketplace

As a developer, you submit your applications to the Windows Phone Marketplace through the App Hub website at https://create.msdn.com. App Hub provides a variety of resources for Windows Phone and Xbox 360 development. To learn more, see the App Hub Getting Started Guide.

To submit applications, you must purchase an App Hub subscription, which costs $99 USD per year. You can submit up to 100 free applications and unlimited paid applications. You must have an App Hub membership before you can deploy and test your applications on a physical Windows Phone device. To learn more or to sign up, see the App Hub Membership page.

Hardware

Windows Phones have a minimum hardware requirement that make it easier for developers to write applications. The standard Windows Phone contains the following hardware elements:

WVGA (800 x 480) format display.
Capacitive 4-point multi-touch screen.
Sensors for A-GPS and accelerometer.
Start, Search, and Back buttons.
Support for data connectivity using cellular networks and Wi-Fi.
256 MB (or more) of RAM and 8 GB (or more) of flash storage.

For more information, see Hardware Specifications for Windows Phone.

Terminology

When you write applications for Windows Phone, you should be familiar with some of the terminology. The following illustration shows some of the elements of a Windows Phone.

Gg680270.8959a3a6-2a3a-4265-a25c-489af2b57ac2(en-us,PandP.11).png

New Windows user interface (UI): The user interface (UI) used in Windows Phone. You should follow this design in your applications so that they integrate with the operating system and other applications. The design provides a modern UI that is easy to use. For more information, see Design Resources for Windows Phone.

Tile: A representation of an application that appears in the start screen. A tile can be designed to be dynamic and display information to the user.

Status Bar: Indicates status of phone operations, such as signal strength. Not necessarily application specific.

Application title: The title for the application, which is typically in all caps.

Page title: An optional title for a page that does not scroll. Page titles are typically in lowercase.

On-screen keyboard: The keyboard that appears when the user edits a text field. Also known as the soft input panel (SIP).

Application Bar: Optional application-centric navigation bar that contains buttons and/or menu items.

Hardware Buttons (Back, Start, Search): Buttons required to be present on every Windows Phone. These buttons enable the user to back up, return to the start experience, or search the current context.

Tools for Creating Applications

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

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

If you already have Visual Studio 2010 (Professional, Premium or Ultimate) installed, then you can use Visual Studio 2010 for development after installing the Windows Phone SDK.

Expression Blend for Windows Phone

Expression Blend for Windows Phone is a design suite 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 of the tasks that are easily accomplished with Expression Blend.

Create data templates visually
Use design-time sample data to visualize data templates
Create control styles visually
Create and preview animations

The following illustration shows an example of Expression Blend.

Gg680270.22d9b7c7-9014-43a1-8d10-cc07f58c6be6(en-us,PandP.11).png

Note

This documentation targets Visual Studio 2010 Express for Windows Phone and does not use Expression Blend for Windows Phone. For more information about Expression Blend, see Microsoft Expression and .toolbox.

Visual Studio 2010 Express for Windows Phone

Visual Studio 2010 Express for Windows Phone includes a drag-and-drop designer that emulates the appearance of the phone, a code editor, and a debugger. If you have worked with Visual Studio for developing other kinds of applications, you will find the environment to be very similar for phone applications. The following illustration shows the Visual Studio 2010 Express environment for the phone.

Gg680270.51ee15fd-3df3-421b-b126-aa7f691be6da(en-us,PandP.11).png

The designer for Windows Phone contains the Toolbox, Design view, XAML view, Solution Explorer, and the Properties window similar to the Visual Studio designer. Two key differences are that the design surface looks like a Windows Phone, and the addition of the Target device, which enables you to choose whether you debug your application on a device or the emulator. The following illustration shows an example of the emulator in portrait and landscape orientations.

Gg680270.f19816c8-9062-4cc2-81ac-e95b18f058b8(en-us,PandP.11).png

For information about using Visual Studio to develop phone applications, see Visual Studio 2010 Express for Windows Phone and Windows Phone Emulator. For information about the Visual Studio designer for Silverlight, see Silverlight Designer for Visual Studio 2010 Overview.

Design Guidelines

It is important that you are aware of the established design guidelines if you plan to publish your Windows Phone application in the App Hub. The design guidelines describe how to design the UI for your applications.

Tip

Design guidelines, certification requirements, and other important information will be repeated in this documentation where they are relevant.

The following table is a summary of the key design guidelines and application requirements that you should consider as you design and develop your application. For the complete and most up-to-date design guidelines, you should visit the following link.

User Experience Design Guidelines for Windows Phone

Category	Design Guideline
Navigation, frames and pages	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 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 creating it as a button. Limit Application Bar menu items to five in order to prevent scrolling.
Back button	The Back button automatically goes back or exits the application. You should not override except in the case of data loss. The Back button can be used to close on-screen keyboard, menus, or dialogs.
Screen orientations	Portrait is the default application view. To support landscape view, you must add code. If your application supports text input, you should support landscape orientation because of the possibility of a hardware keyboard.
Themes	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 specified color is not visible, also explicitly set the background or foreground color to maintain contrast; otherwise, choose a more appropriate color.
Application settings	Supply a Cancel button for actions that overwrite or delete data or are irreversible. When using additional screens with Commit and Cancel buttons, clicking those buttons should cause the associated action to be performed 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. 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 input scope property for a text box or other edit controls to define the keyboard type and enable the appropriate typing aids.
Canvas and Grid controls for layout	The Canvas control uses a pixel-based layout and can provide better layout performance than the Grid control for deeply embedded or nested controls in applications that do not change orientations. The Grid control is the best choice when the application frame needs to grow, shrink, or rotate.
Panorama and Pivot controls	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. 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. You should not use Application Bar buttons to provide navigation in a Pivot control. If the Pivot requires navigation aids, you are probably misusing it.
Text	You should primarily use the Segoe font. Use alternative fonts sparingly. Avoid using font sizes that are smaller than 15 points. Maintain consistent capitalization practices to prevent a disjointed or jagged reading experience. The application title in the title bar should be all capitals. Use all lower case letters for most other application text including page titles and list titles. In the Application Bar, any text you include is automatically displayed in all lowercase.

Additional Resources

The following are some links to additional resources external to this documentation where you can learn more about Windows Phone development.

Resource	Description
Windows Phone App Hub	Additional documentation, code samples, and a community for Windows Phone development.
Windows Phone Development Documentation	Official Windows Phone development documentation 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 topics that demonstrate tasks or features in Windows Phone development.
Windows Phone Developer Guide	A developer guide that describes a scenario around a fictitious company that has decided to use Windows Phone 7 as a client device for their existing cloud-based application.
The Windows Phone Developer Blog	A blog that contains current information and announcements straight from the Windows Phone team.
Windows Phone 7 Development for Absolute Beginners	A video series for absolute beginners that assumes no knowledge of programming or Window Phone development.
Windows Phone 7 Jump Start	A video series for developers new to Windows Phone development using Silverlight or XNA.
Windows Phone 7 Training Course	Videos and hands-on labs for Windows Phone development using Silverlight or XNA.
.toolbox	Tutorials and other resources that target designers to learn about how to design Windows Phone applications. Includes tutorials on Expression Blend.
Jeff Wilcox Blog	A blog about Silverlight, Silverlight Toolkit, and Silverlight for Windows Phone. Jeff Wilcox is a senior software developer at Microsoft on the Silverlight team.
Jeff Prosise Blog	A blog about various areas in .NET programming, including Silverlight and Windows Phone. Jeff Prosise is long-time Windows programmer and a cofounder of Wintellect.

Next Topic | Home

Share via