A Step-by-Step Guide to Building and Deploying your Windows Phone 7 Applications

As of the publication date of this article, Windows Phone 7 devices are becoming available in Europe and will hit North America on November 8th 2010 and Microsoft is gradually opening up the application submission process to registered developers.  Microsoft expects as many as 1,000 applications available at launch.  Will one of those applications be yours?

This article takes you through the process of getting the tools, registering as a developer, building a basic Silverlight application for Windows Phone 7 (©Copyright Colin Melia 2010), and submitting it to the marketplace.

Getting Started - Application Platform

The available developer tools allow you to build Silverlight and XNA software for Windows Phone 7.  For an introduction to the platform see my previous article.  In this article, I’ll be showing you how to build a Silverlight application.

The Hub for Applications

Just before device launch Microsoft transformed the Windows Phone 7 developer portal and combined it with the Xbox Creator’s Club, with everything now available in one place called the App Hub.

(Click for larger image)

Get and Install the Tools

The developer tools for developing applications for Windows Phone 7 are completely FREE.  You can find the installer by following links from the App Hub, or you can find the RTW version here.  

To install the RTW (‘Released To the Web’) version of the tools one of the following is required:

• Windows® Vista® (x86 and x64) with Service Pack 2 – all editions except Starter Edition
• Windows® 7 (x86 and x64) – all editions except Starter Edition

Be sure to check out the release notes for full requirements. 

You be prompted to Save or Open the installer…

The installer downloads and then installs several tools in one process.

The download page also includes access to an ISO image of all the components if you will be installing on a machine without a network connection.

The developer tools include the following items in one package:

• Visual Studio 2010 Express for Windows Phone*
• XNA Game Studio 4.0*
• Microsoft Expression Blend for Windows Phone*
• Windows Phone Emulator Resources
• Silverlight 4 Tools For Visual Studio

* Items 1 & 2 will install as standalone applications if Visual Studio 2010 Professional or higher is not installed, otherwise they will install additional project templates in Visual Studio.  The same goes for item 3 with regard to Expression Blend 4.

Before installing the RTW version of the tools, be sure to first uninstall any pre-release version of the toolset in one go by uninstalling the item named, “Microsoft Windows Phone Developer Tools…” under Control Panel.

Become a subscribing App Hub member

Before you start building software, it’s a good idea to become a subscribing member on the App Hub as this can take a few days if you haven’t done it already.

Being a subscribing member costs US$99 per year (varying by country) and permits you to sell applications for Windows Phone 7 (as well as Xbox LIVE Indie Games).  You can also publish 5 free Windows Phone 7 applications a year (with additional ones costing US$20 each).

If you want to build applications for yourself, but don’t want to sell them, you may still need to subscribe to be able to deploy your applications on to your phone – we will discuss this later in the article...

You join as either an individual or as a business.

To join and subscribe you’ll need a Live ID, contact information, credit card information and proof of identity (government issued ID for individuals and government registration numbers for businesses). 

As part of the process of joining (over a few days), you will be asked to verify the email address you entered and you will be asked to provide applicable proof of identity (which may require you to fax documents).  A security certificate partner working with Microsoft will handle part of the process and create a digital certificate used by the marketplace to sign your submitted applications.

You can see a walkthrough of the process here.

Once you are set up you’ll be able to go the App Hub and select “windows phone”…

(Click for larger image)

To get paid (if you submit applications to sell that aren’t free) you will also then need to provide bank account information for direct deposit.  If you are outside of the US, you may also need to submit US Government paperwork to Microsoft to ensure tax is appropriately handled.

So you are ready to submit an application…

Build an Application

We’re going to step through the process of creating an application that simulates the rolling of a die (that’s singular noun of the plural noun ‘dice’ in case you didn’t know).

Building Blocks

Launch Visual Studio 2010 Express for Windows Phone or Visual Studio 2010 Professional (or higher).

Go to File->New Project, select the “Silverlight for Windows Phone” template, select “Windows Phone Application”, enter a Name of “DieApp” as shown…

(Click for larger image)

…and click OK.

The project will open up with a window showing a designer and XML-like editor but we’re going to come back to that.

We are going to build the application using the MVVM (Model-View-ViewModel) design pattern and for that we need a little extra help using the MVVM Light components, available from GalaSoft here.  Look for the download link for the latest version of the Windows Phone 7 binaries.  I would hope that Microsoft incorporates this into future tools releases.  Unzip the files to a location you remember.

Next, go to the Solution Explorer window (which can be found under the View menu if not visible), right-click on “DieApp” (not “Solution ‘DieApp’) and select Add -> Class as shown.

 (Click here for larger image)

Type the Name “DieVM.cs” and click OK.

Again, right-click DieApp in Solution Explorer & select Add Reference as shown…

(Click for larger image)

Navigate to the MVVM Light files you downloaded and go down to the Binaries folder for WP7.

Select all 3 files (using CTRL or SHIFT)…

Click OK.

Add the following using statements below the ones already in DieVM.cs:

using System.ComponentModel;
using System.Windows.Threading;
using GalaSoft.MvvmLight.Command;

Replace the empty class code (inside the Namespace {} brackets) with this code:

public class DieVM : INotifyPropertyChanged
{
    private DispatcherTimer _td = null;
    private Random _rng = null;
    private int _flipcount;
    private int _flipmax;
 
    public DieVM()
    {
        _rng = new Random(DateTime.UtcNow.Millisecond);
        _td = new DispatcherTimer();
        _td.Interval = new TimeSpan(0, 0, 0, 0, 150);
        _td.Tick += new EventHandler(_td_Tick);
        _rollcommand = new RelayCommand(() => Roll());
    }
 
    private RelayCommand _rollcommand;
    public RelayCommand RollCommand
    {
        get
        {
            return _rollcommand;
        }
    }
 

    private int _value = 1;
    public int Value
    {
        get { return _value; }
        set { _value = value; Notify("Value"); }
    }
 

    private Boolean _isrolling = false;
    public Boolean IsRolling
    {
        get { return _isrolling; }
        private set { _isrolling = value; Notify("IsRolling"); }
    }

 
    public void Roll()
    {
        if (IsRolling)
            return;
 
        IsRolling = true;
        _flipmax = _rng.Next(8) + 4;
        _flipcount = 0;
 
        _td.Start();
    }
 
    void _td_Tick(object sender, EventArgs e)
    {
        int newvalue; 

        while ((newvalue = _rng.Next(6) + 1) == Value) ;
 
        Value = newvalue;

        if (++_flipcount == _flipmax)
        {
            _td.Stop();
            IsRolling = false;
        }
    }
 
    #region INotifyPropertyChanged Members
 
    private void Notify(String info)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(info));
    }
 
    public event PropertyChangedEventHandler PropertyChanged;

    #endregion

}

The class includes capabilities which will become apparent later on.  Note that it:

• has a Value property to represent the current value of a die
• uses a DispatchTimer to enable the value to change every 150ms when the die is ‘rolled’
• uses a random number generating class for the next value and the number of value changes in a roll
• supports INotifyPropertyChanged (explained later) that will enable our UI to update when the value updates

Go to the Build menu and choose Build Solution.

You should get a “Build succeeded” message in the bottom left corner.