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

Commanding the Die

Our DieVM class is capable of ‘rolling’ the Value and we want to have the dots update when that happens.

We are set up for that, because the Ellipse Opacity of each dot is bound to the Value property of DieVM and, because the DieVM class implements INotifyPropertyChanged and calls the PropertyChanged event when Value changes, the Opacity value will be updated (via the converter).

As you can see in the images, we want to make it so that clicking on the grid starts the rolling action.

We are going to do that we more of the MVVM Light components.

Add these XML namespace to the top of MainPage.xaml right under the existing ones.

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:mvvmextra="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WP7"

Replace the opening tag of the Grid element with this XAML

<Grid x:Name="ContentPanel" Background="#00FFFFFF" Grid.Row="1" Margin="12,0,12,0" d:DataContext="{d:DesignData SampleDieVM.xaml}" DataContext="{StaticResource MyDie}">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseLeftButtonDown">
            <mvvmextra:EventToCommand Command="{Binding RollCommand}"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>

The MVVM Light component listens for the MouseLeftButtonDown event.  When it occurs, the component looks for a property on the DieVM called RollCommand supporting the .NET ICommand interface and calls the Execute method of that object.

Our DieVM class has such a property.  It is a RelayCommand class from the MVVM Light components.  It support ICommand, and allows us to easily declare the code to run when the Execure method of the ICommand interface is called.

Run the application again and try clicking on the screen – the die will roll!

Just to make it clear when the die is rolling we are going to hide the instruction text when the die is rolling.

The DieVM class has an IsRolling property.

We’ll need to convert that Boolean property to a Silverlight visibility enumeration value.

Add this code for another binding converter to the end of the DieVM.cs file at the end, just before the closing } bracket for the namespace.

public class BooleanToOpacityConverter : IValueConverter
    {
        #region IValueConverter Members
 
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            Boolean b = (Boolean)value;           
            if (((String)parameter).Equals("invert"))
                b = !b;
            return b ? 1 : 0;
        }
 
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }

        #endregion
    }

Build the Solution!

Update the <Grid.Resource> element contents in MainPage.xaml as shown to introduce an instance of the converter.

<Grid.Resources>
    <local:DieValueToDotOpacityConverter x:Key="NTDOC"/>
    <local:DieVM x:Name="MyDie"/>
    <local:BooleanToOpacityConverter x:Key="BTOC"/>
</Grid.Resources>

Update the XAML for the TextBlock to bind to the IsRolling property using the converter.

<TextBlock Grid.Row="0" Grid.ColumnSpan="3" Text="Tap screen to roll" HorizontalAlignment="Center" Opacity="{Binding IsRolling, Converter={StaticResource BTOC}, ConverterParameter=invert}"/>

Run the application to try it.

Orientation Support

If you click on the rotate buttons at the top-right of the emulator, you will notice that the die does not re-orientate itself.

However, since we designed the layout so that the grid and its columns use the available space we can indicate that we support both orientations and let the phone OS rotate our layout safe in the knowledge that it will still fit in the opposite aspect ratio.

In MainPage.xaml, update this XAML

SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"

Try it again in the emulator.

We’ve finished building the functionality of the application.

Does it actually work on a real device?

Test on a Real Device

Some application can be tested very thoroughly on the emulator.  Some features such as the accelerometer, location services and various settings cannot be easily tested (though in some cases they can be emulated by mock classes and testing code).

To debug with a real device, all of these points must be met:

• Version 4.7+ of the Zune software (free to download from http://zune.net) must be running on the development PC.
• The device must be connected to the PC using the provided USB cable.
• The device must be ‘development unlocked’ (see below)
• The device must be on and not on the lock screen.

Connect a device

When you connect a Windows Phone 7 device, the Zune software should launch (unless disabled) and show the device as connected.

Unlock a device

To test on a real device, the device must be ‘deployment-unlocked’.  This is not the same as ‘network-unlocked’ (whereby a device is not limited to use on a specific wireless carrier).  Devices are ‘unlocked’ against a developer subscription – up to 3 at once (or just 1 on a student subscription).  Once unlocked, anyone can test on them.

To unlock a connected device (showing in the Zune software) and register it against a subscription, run the Windows Phone Developer Registration Tool  (included with the developer tools) and use the Live ID of a subscription that has a free slot.

(Click here for larger image)

Registered devices show up on the App Hub:

Debug using the device

To debug on the device, switch to the device in Visual Studio on the Standard toolbar.

So your application is feature complete, debugged on the emulator, and tested on a device.  It’s time to get it ready for marketplace submission if you wish to publish it to others.

Make Ready for Submission

There are a number of things you need to do to get your application ready for submission.

Obviously at this point I’m talking about the steps I took to submit this sample application to the marketplace.  Build your own app – don’t use mine :P.

Certifiable

The most important thing is to make sure the application meets the published certification requirements which can be found on the App Hub or directly here.

The following sections cover some of those requirements for certifications and necessary preparations for submitting an application.

Release Build

Switch to a release build in Visual Studio and test again.

Remove the diagnostic readout

You will have noticed numbers down the side of the screen when testing.  These are useful when testing the performance of more visually Silverlight applications.

To remove the readout, comment out this line in App.xaml.cs

// Application.Current.Host.Settings.EnableFrameRateCounter = true;

Update your splash screen

The file SplashScreenImage.jpg is shown on the phone while your application is initializing.  A splash screen can be based on a screenshot of the application, perhaps with the addition of some visual indication that the application is starting up.

You can use the Windows 7 Snipping Tool (in Window mode) to capture the emulator screen when it’s running at 100% window size, e.g…

Project Properties

You need to set the title of the application used in the phone’s program list and if pinned as a start tile.

Right-click the DieApp project in Solution Explorer and select Properties…

You then update Title under Deployment Options & under Tile Options to, e.g. “Die Roller”

Click on the “Assembly Information” button and update with suitable information.

Application Exception handler

If the application has an unhandled exception it will just quit on the phone.  You  need to make sure the something friendly is displayed, so update this function is App.xaml.cs as shown, or to something else friendly.

// Code to execute on Unhandled Exceptions
private void Application_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e)
{
    if (System.Diagnostics.Debugger.IsAttached)
    {
        // An unhandled exception has occurred; break into the debugger
        System.Diagnostics.Debugger.Break();
    }
    else
    {
        MessageBox.Show("Apologies.  Unfortunately there has been an error in the application and it will now close.", "Application Error", MessageBoxButton.OK);
    }
}

Application Icons

You need to update the Background.png file (which must be a 173x173 pixel PNG – shown if the application is pinned as a start tile), e.g.:

You need to update the ApplicationIcon.png (which must be a 62x62 pixel PNG– shown in the programs list), e.g.:

You also need 99x99 & 200x200 PNGs for the application submission process.

You can also optionally produce a 1000x800 PNG that would be shown as the panaromic background of the Marketplace hub on the phone if your application is featured by Microsoft.

Application Information

The application must provide an obvious way to show its name, its version and author contact information.

To do that, you can enable the application bar in the application to show an ‘About’ button that when clicked, will show the information.

For that, you need a compatible icon for the button, which should be a white shape on a transparent background in a 48x48 pixel PNG.

Right-click DieApp in Solution Explorer, select Add, then Existing Item…

(Click here for larger image)

Enter this path into the freely distributed pack of icons included with the tools…

%ProgramFiles(x86)%\Microsoft SDKs\Windows Phone\v7.0\Icons\dark\appbar.questionmark.rest.png

Select the file in Solution Explorer, press F2, rename it to “about.png” and press ENTER.

Go to the Properties window and change the Build Action to Content

Put this code inside the MainPage class within MainPage.xaml.cs (expand MainPage.xaml in Solution Explorer to file the file)

private void ApplicationBarIconButton_Click(object sender, EventArgs e)
{
    MessageBox.Show("Die Roller V1 by Colinizer" + Environment.NewLine + "http://colinizer.com" + Environment.NewLine + "Copyright © Colin Melia 2010", "About", MessageBoxButton.OK);
}

Of course this is my information – you would use yours in your own (unique) application.

Locate the commented out application bar code at the bottom of MainPage.xaml and replace it with this XAML.

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Opacity="0.5">
        <shell:ApplicationBarIconButton IconUri="/about.png" Text="About" Click="ApplicationBarIconButton_Click"/>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Screenshots

You need at least 1 (480x800 PNG) screenshot to submit an application, e.g.

Submit to Marketplace

At this point you are finally ready to submit.

Go to the App Hub and then select my dashboard->windows phone->submit new app.

A Windows Phone 7 Application Submission Walkthrough is available here.

Here’s what I did:

Step 1

(Click for larger image)

Step 2

(Click for larger image)

Step 3

(Click for larger image)

Step 4

(Click for larger image)

Step 5

(Click for larger image)

Once you have submitted the application you can check back on its status on the App Hub under my dashboard->windows phone->my apps.

Good luck and if you can’t decide which idea to try first… there’s a die rolling app that may help you decide. :)

About the Author

Colin Melia is a CTO, architect, speaker, trainer & author.  You can contact him via http://colinizer.com.

He developed the first professional Windows Phone 7 boot camp tour in North America, training dozens of developers across Canada at Microsoft offices in the summer of 2010 featuring actual WP7 developer devices.

Colin is also the Principal Architect for DreamDigital with 17 years of hands-on experience, a professional trainer and speaker, as well as a user group leader in Ottawa. He has expertise in the areas of rich UI with WPF/Silverlight, cloud development with Azure and BI with SQL Server, along with in-depth knowledge of core technologies such as .NET, OData, WCF, WF, LINQ and WIF. He has developed award-winning simulation technology with rich UI, cloud-based learning portals and workflow-driven BI systems.  He also created the first streaming video community site with Windows Media.