This project is read-only.


This documentation and accompanying sample application will get you started creating a complete application for Windows Phone 7. You will learn about common developer issues in the context of a simple fuel-tracking application named Fuel Tracker.

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

· Creating a UI that adheres to the Windows Phone 7 design guidelines

· Connecting data to UI

· Handling input

· Navigating between pages

· Understanding the Back button

· Saving and retrieving data on the phone

· Saving application state when the user starts another application

· Using the media library on the phone

· Preparing to publish an application

This topic describes how to get started creating a Windows Phone application. Additional topics describe how to perform common developer tasks to create a complete application that can be published.


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

Some experience with:

· .NET

· C#

Little or no experience with:

· Silverlight

· Windows Phone

User Tasks

Once you have decided on an idea for a Windows Phone application, you should define the tasks that the user can perform in your application. You can start with a list of tasks. You can also prioritize the list so that you know what you must implement and what you can leave for a later version.

The Fuel Tracker application enables a user to track the fuel consumption of their car. The following is an example of some user tasks for the Fuel Tracker application.



Enter fill-up information


Enter car information


View fill-up history


Capture fill-up locations


Map of fill-up locations


Switch measure units (U.S. vs metric)


View price/gal report


View miles/gal report


Pages and Navigation Flow

Once you know how people will use your application, you should create some simple prototypes. This can be as simple as a few sketches that test how the user will navigate through your application. If you have Expression Studio Ultimate, you can use the SketchFlow feature to create prototypes. Typically, the more time that you spend in the prototyping phase, the more productive you will be when you create the user interface (UI) and write the code.

The Fuel Tracker application contains three pages and a photo chooser. The following illustration shows the pages and navigation flow.


When the user starts the application, the Fill-up page appears, which allows the user to enter fuel fill-up information. When the user clicks Save, the application automatically navigates to the History page. At this point the user can choose to enter an additional fill-up or exit the application by using the Back or Start button.

From the Fill-up page, the user can navigate to the Car Details page. On the Car Details page, the user can enter information about his or her car.

Fill-up Page

The Fill-up page enables the user to enter a fill-up, which includes the current odometer reading, quantity of fuel, and price of the fuel. When each text box has the focus, the user can only input numbers, which makes it easier to enter values and limits mistakes.


History Page

The History page displays the current fill-up and a summary of recent fill-ups.


Car Details Page

The Car Details page enables the user to enter information about his or her car. The user can enter a car name and a photo.


Photo Chooser

The photo chooser enables the user to select a photo from a list of existing default and saved photos.



Once you know the pages and how the user will navigate through your application, you will need to think about the data that your application will use and how to organize it. You can start by making a list of the required data and trying to logically group it. The following table lists some of the data required by the Fuel Tracker application.





Odometer reading

Quantity of fuel

Price of the fuel




Car Fill-ups

Current fill-up

Fill-up history


Once you have an idea of the UI and required data, you will need to think about the structure of your application. A general rule of good application design is to separate the UI (view) elements from the data model and the code that operates on that data model. A common design pattern used in Silverlight applications that enables this separation is the Model-View-ViewModel (MVVM) pattern. For more information about the MVVM pattern, see A 5 minute Overview of MVVM in Silverlight.

The Fuel Tracker application does not adhere strictly to MVVM guidelines to keep things simple. However, the application is divided into views and a data model. Each page of the application corresponds to a view. The data model is organized into classes that represent logical chunks of data. The application also includes application-level logic for tasks, such as saving and retrieving application state. The following illustration shows the high-level architecture for the Fuel Tracker application.


What’s Next

This topic showed you how to get started creating a Windows Phone application. You begin by listing the user tasks, sketching out the pages, and defining the navigation flow. Next, you think about the data and how the application should be structured. Additional topics will dive into more details. The next topic describes how to create the UI for a Windows Phone application.

Creating the UI for a Windows Phone 7 Application

Last edited Dec 8, 2010 at 11:01 PM by mparsons, version 3


No comments yet.