Пошаговое руководство по созданию и развертыванию приложений для Windows Phone 7

Центр приложений

Получить и установить инструменты

Чтобы установить версию инструментов RTW («Выпущено в Интернет»), необходимо выполнить одно из следующих действий:

• Windows® Vista® (x86 и x64) с пакетом обновления 2 — все выпуски, кроме версии для начинающих
• Windows® 7 (x86 и x64) — все версии, кроме версии для начинающих

Установщик загружает, а затем устанавливает несколько инструментов в одном процессе.

Страница загрузки также включает в себя доступ к ISO-образу всех компонентов, если вы будете устанавливать на компьютер без сетевого подключения.

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 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…

…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.

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

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

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…

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

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.

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

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 173×173 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 62×62 pixel PNG– shown in the programs list), e.g.:

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

You can also optionally produce a 1000×800 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 48×48 pixel PNG.

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

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 (480×800 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.

Step 2

Step 3

Step 4

Step 5

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