Over a million developers have joined DZone.

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

· Mobile Zone

Learn how to Deliver Better Mobile Apps Faster with Continuous Quality by managing the complexities of testing multiple devices and scenarios with this whitepaper from Perfecto Mobile.

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.

 

Add some dots

Now for something visible.

Go to MainPage.xaml (by clicking on the Tab showing with that name).

What you are seeing is XAML (eXtensible Application Markup Language) which is XML used to declare a tree of objects (mostly visual elements).  Roughly speaking, at runtime, the XML element names are used as Type name to instantiate .NET objects (in a hierarchy) and the XML attributes are used to set the properties on the objects.

Delete the XAML shown here from MainPage.xaml – we don’t need it for our UI – and some text will disappear from the design surface.

<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

 

Insert the following XAML between the opening and closing tags of the Grid element (near the bottom) which has the attribute x:Name=”ContentPanel”

<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

<TextBlock Grid.Row="0" Grid.ColumnSpan="3" Text="Tap screen to roll" HorizontalAlignment="Center"/>

<Ellipse Grid.Row="1" Grid.Column="0" Width="80" Height="80" Fill="{StaticResource PhoneAccentBrush}" />
<Ellipse Grid.Row="1" Grid.Column="1" Width="80" Height="80" Fill="{StaticResource PhoneAccentBrush}" />
<Ellipse Grid.Row="1" Grid.Column="2" Width="80" Height="80" Fill="{StaticResource PhoneAccentBrush}" />
<Ellipse Grid.Row="2" Grid.Column="0" Width="80" Height="80" Fill="{StaticResource PhoneAccentBrush}" />
<Ellipse Grid.Row="2" Grid.Column="1" Width="80" Height="80" Fill="{StaticResource PhoneAccentBrush}" />
<Ellipse Grid.Row="2" Grid.Column="2" Width="80" Height="80" Fill="{StaticResource PhoneAccentBrush}" />
<Ellipse Grid.Row="3" Grid.Column="0" Width="80" Height="80" Fill="{StaticResource PhoneAccentBrush}" />
<Ellipse Grid.Row="3" Grid.Column="1" Width="80" Height="80" Fill="{StaticResource PhoneAccentBrush}" />
<Ellipse Grid.Row="3" Grid.Column="2" Width="80" Height="80" Fill="{StaticResource PhoneAccentBrush}" />

 

If you’ve done that correctly, the designer will look like this…

 

We have an object to represent a die and we have a grid of dots.  What we need is a way to turn each dot ‘on’ and ‘off’ according to its position and the value of the die.

Binding & Converters

Go back to DieVM.cs

Add this additional using statement right under the others.

using System.Windows.Data;

 

Then add this code just inside the last } bracket at the end of the file.

public class DieValueToDotOpacityConverter : IValueConverter
{
#region IValueConverter Members

int[,] dotmatix = new int[6,9]
{
{
0,0,0,
0,1,0,
0,0,0
}
,
{
0,0,1,
0,0,0,
1,0,0
},
{
0,0,1,
0,1,0,
1,0,0
},
{
1,0,1,
0,0,0,
1,0,1
},
{
1,0,1,
0,1,0,
1,0,1
},
{
1,0,1,
1,0,1,
1,0,1
}
};

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
try
{
int pos = int.Parse((String)parameter);
int dievalue = (int)value - 1;

return (double)((dotmatix[dievalue, pos] == 1) ? 1 : 0);
}
catch
{
return 1;
}
}

public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}

#endregion
}

 

Build the solution again.

This is a value converter that will be used when we ‘bind’ each dot to the value of the die.  Take a look at the array of integers used and you should see the pattern of dots typically used for each die value.  Given a logical position from 0 to 8 and the value of a die, the convertor provides the desired opacity (1 for solid or 0 for transparent).

To be able to apply this convertor to the dots in XAML, we have to introduce into the XAML document, the .NET Namespace in which the converter class resides.

Insert this XML namespace declaration near the top of the MainPage.xaml document, after the last line that also starts “xmls:”

xmlns:local="clr-namespace:DieApp"

 

 

… and then we have to instantiate an instance of the convertor object and give it a name by which we have refer to it elsewhere in the XAML document.

Insert this XAML </Grid.RowDefinitions> on the Grid with x:Name=”LayoutRoot”

<Grid.Resources>
<local:DieValueToDotOpacityConverter x:Key="NTDOC"/>
</Grid.Resources>

 

Now we can add bind on the opacity of each dot using the converter.

Replace the existing Ellipse elements with these ones.

<Ellipse Grid.Row="1" Grid.Column="0" Width="80" Height="80" Fill="{StaticResource PhoneAccentBrush}" Opacity="{Binding Value, Converter={StaticResource NTDOC}, ConverterParameter=0}"/>
<Ellipse Grid.Row="1" Grid.Column="1" Width="80" Height="80" Fill="{StaticResource PhoneAccentBrush}" Opacity="{Binding Value, Converter={StaticResource NTDOC}, ConverterParameter=1}"/>
<Ellipse Grid.Row="1" Grid.Column="2" Width="80" Height="80" Fill="{StaticResource PhoneAccentBrush}" Opacity="{Binding Value, Converter={StaticResource NTDOC}, ConverterParameter=2}"/>
<Ellipse Grid.Row="2" Grid.Column="0" Width="80" Height="80" Fill="{StaticResource PhoneAccentBrush}" Opacity="{Binding Value, Converter={StaticResource NTDOC}, ConverterParameter=3}"/>
<Ellipse Grid.Row="2" Grid.Column="1" Width="80" Height="80" Fill="{StaticResource PhoneAccentBrush}" Opacity="{Binding Value, Converter={StaticResource NTDOC}, ConverterParameter=4}"/>
<Ellipse Grid.Row="2" Grid.Column="2" Width="80" Height="80" Fill="{StaticResource PhoneAccentBrush}" Opacity="{Binding Value, Converter={StaticResource NTDOC}, ConverterParameter=5}"/>
<Ellipse Grid.Row="3" Grid.Column="0" Width="80" Height="80" Fill="{StaticResource PhoneAccentBrush}" Opacity="{Binding Value, Converter={StaticResource NTDOC}, ConverterParameter=6}"/>
<Ellipse Grid.Row="3" Grid.Column="1" Width="80" Height="80" Fill="{StaticResource PhoneAccentBrush}" Opacity="{Binding Value, Converter={StaticResource NTDOC}, ConverterParameter=7}"/>
<Ellipse Grid.Row="3" Grid.Column="2" Width="80" Height="80" Fill="{StaticResource PhoneAccentBrush}" Opacity="{Binding Value, Converter={StaticResource NTDOC}, ConverterParameter=8}"/>

 

So we are now binding the value of a dot’s Opacity to the Value property of some object.  This means value is copied from the Value property of some object to the Opacity property of the Ellipse via the converter.  This happens when the Ellipse is created, and whenever the object with the Value property fires the PropertyChanged event.

Note how we want to bind the Opacity to the Value of a DieVM object, so we need to instantiate a DieVM object.

XAML can be used to declare non-visual .NET objects and properties too.  We are going to create XAML to represent a DieVM object so we have something to see at design time.

Sample Data

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

(Click for larger image)

 

Select “XML File” as shown, but carefully enter “SampleDieVM.xaml” as the Name.

(Click for larger image)

 

Click Add and then replace the whole contents of the file with this XAML

<local:DieVM
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:DieApp"
Value="2"/>

 

Click Reload the designer and you’ll see a message indicating that the design surface is blank because there are no visual objects.

Go back to MainPage.xaml and update the opening Grid element as shown.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" d:DataContext="{d:DesignData SampleDieVM.xaml}">

 

And just like that, your design surface should now show the appropriate die dots for a value of 2 (as defined in the SampleDieVM.xaml file. 

 

Go back to the SampleDieVM.xaml file, change the Value attribute and then switch back to MainPage.xaml to see that we now have bound design-time UI.

Runtime Data

We now need to instantiate a DieVM object as runtime, so let’s simply declare one in XAML.

In MainPage.xaml, update the <Grid.Resources> element contents to look like this:

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

 

Then update the <Grid> open tag to look like this, declaring a DieVM instance to use separately for design-time (starting with d:) and at runtime.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" d:DataContext="{d:DesignData SampleDieVM.xaml}" DataContext="{StaticResource MyDie}">

 

Press F5 to try the application in the included phone emulator (shown here with option buttons shown when the cursor is near the top right)…

 

We see a single dot representing a 1.  That’s because the DieVM class initialized it to 1.

You can go to DieVM.cs and update this line to another value from 1 to 6 and try running the application again.

private int _value = 1;

 

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.

Do you know Why Apps Succeed? Perfecto Mobile analyzed over 1,000 responses to their Digial Quality Strategies survey and aim to answer the question, "Why do apps succeed?" in this exclusive report.

Topics:

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}