Gaston Hillar is a frequent contributor to Dr. Dobb's and author of Professional Parallel Programming With C#: Master Parallel Extensions With .Net 4.
Silverlight for Windows Phone, the application development platform for Windows Phone 7 Series, supports core Silverlight features while providing access to the phone's unique capabilities through managed .NET code.
Developers with some experience in XAML and managed .NET code will be able to use the new developer tools to create Windows Phone 7 Series applications. In this article, I show how to build a UI from scratch using the new development tools, SDKs, and the mobile device emulator, assuming that you are familiar with Silverlight and Visual Studio 2010 basics. First, you must download and run the Silverlight for Windows Phone Developer Tools installer by clicking the Download button in the Silverlight for Windows Phone page. You will always find the latest version available in the link included in this page.
Once you finish the installation process, you will notice a new folder in Start -> Programs, Microsoft Visual Studio 2010 Express. If you had any version of Visual Studio 2010 installed, you don't need to start Microsoft Visual Studio 2010 Express for Windows Phone, included in the Visual Studio 2010 Express folder. You can develop Silverlight for Windows Phone applications in your Visual Studio 2010 version that was installed before running the installer for the new tools.
Start Visual Studio 2010, select File -> New -> Project and the new "Silverlight for Windows Phone" item will appear within the Installed Templates list for Visual C#. Figure 1 shows the three types of projects that you can create targeting Silverlight for Windows Phone:
- Windows Phone Application. An application without navigation support.
- Windows Phone List Application. An application with navigation support.
- Windows Phone Class Library. A class library that you can use in other applications.
If you select "XNA Game Studio 4.0" within the Installed Templates list for Visual C#, you will notice that there are new project types related to Windows Phone. In fact, Silverlight for Windows Phone can use the XNA Framework features for audio capture and playback, access the media library, and Xbox LIVE.
Introducing Silverlight for Windows Phone
When you create a new Windows Phone application, the new solution includes the Silverlight MainPage.xaml page. However, the design view for this page shows a preview of the controls that compose the user interface within a Windows Phone 7 screen, as in Figure 2. You can drag-and-drop controls to the design surface and check the layout preview for a Windows Phone 7 screen. As happens when working with Silverlight in Visual Studio 2010, if you make changes to the XAML code, these changes will be reflected on the design surface that emulates a Windows Phone 7 screen.
According to the information provided in the design resources, all Windows Phone 7 devices will have WVGA screens at 800x480 pixel resolution, no matter the screen size. This single resolution makes it simpler to design the UI. The great drawback is that you cannot emulate multitouch gestures with a mouse or a touchpad in your developer workstation. However, if you don't have a multitouch monitor, you still have a chance to test some multitouch gestures without having to deploy the project to the phone. There is an interesting project on CodePlex, Multi-Touch Vista that allows you to work with multiple mice to emulate two fingers on the screen and their multitouch gestures. In fact, the latest version of Multi-How to build a UI from scratch.
Multi-Touch Vista provides a Windows 7 compatible driver that enables multiple mice and is compatible with the Windows Phone 7 emulator. For example, you can use a laptop's touchpad as one of the pointers and a USB mouse connected to the same laptop as the second pointer. (If you're interested in working with Multi-Touch Vista, you can read an excellent step-by-step tutorial written by Michael Sync. This tutorial explains how to install and configure the driver to work with the Windows Phone 7 emulator.)
The structure of a Windows Phone application project is similar to a classic Silverlight application project. However, Windows Phone adds some proprietary references and files. Figure 3 shows the project structure for a sample WPBusinessApp project. This is the default structure that Visual Studio 2010 creates for a Windows Phone application.
You will notice the WMAppManifest.xml file within the Properties folder. This XML file defines the resources and capabilities of the application from the point of view of the operating system. The following code snippet shows the default contents for this file, considering that the project's name is WPBusinessApp:
<?xml version="1.0" encoding="utf-8"?>
<Deployment
xmlns="http://schemas.microsoft.com/windowsphone/2009/deployment"
AppPlatformVersion="7.0">
<App xmlns="" ProductID="{41bdea14-687b-4815-93b3-a51759f18a09}"
Title="WPBusinessApp" RuntimeType="Silverlight" Version="1.0.0.0"
Genre="apps.normal" Author="WPBusinessApp author"
Description="Sample description" Publisher="WPBusinessApp">
<IconPath IsRelative="true"
IsResource="false">ApplicationIcon.png</IconPath>
<Capabilities>
<Capability Name="ID_CAP_NETWORKING" />
<Capability Name="ID_CAP_LOCATION" />
<Capability Name="ID_CAP_SENSORS" />
<Capability Name="ID_CAP_MICROPHONE" />
<Capability Name="ID_CAP_MEDIALIB" />
<Capability Name="ID_CAP_GAMERSERVICES" />
<Capability Name="ID_CAP_PHONEDIALER" />
<Capability Name="ID_CAP_PUSH_NOTIFICATION" />
<Capability Name="ID_CAP_WEBBROWSERCOMPONENT" />
</Capabilities>
<Tasks>
<DefaultTask Name ="_default"
NavigationPage="MainPage.xaml"/>
</Tasks>
<Tokens>
<PrimaryToken TokenID="WPBusinessAppToken"
TaskName="_default">
<TemplateType5>
<BackgroundImageURI IsRelative="true"
IsResource="false">Background.png</BackgroundImageURI>
<Count>0</Count>
<Title>WPBusinessApp</Title>
</TemplateType5>
</PrimaryToken>
</Tokens>
</App>
</Deployment>
The WMAppManifest.xml file includes the list of capabilities that the application needs from the phone in <Capabilities>. By default, the manifest requests all the capabilities. However, you should remove the unnecessary ones in order to create a more secure application. If you try to use a feature that corresponds to a capability that the application doesn't request in the manifest, you will get an UnauthorizedAccessException exception. If the application is installed, it will have the capabilities that it requests.
The names for the capabilities are very easy to understand. For example, ID_CAP_LOCATION means that you need to access location services included in the System.Device.Location namespace. However, some capabilities are related to many namespaces and classes. Jaime Rodriguez wrote a very interesting post about the Windows phone capabilities security model that includes detailed information about the namespaces related to each capability at http://blogs.msdn.com/b/jaimer/archive/2010/04/30/windowsphone-capabilities-security-model.aspx.
The WMAppManifest.xml file also defines the icon, the background image, and the title for the application. Luckily, you can specify icons as PNG bitmap files. The default icon is ApplicationIcon.png and the default background is Backgroud.png. You can edit XML code or you can change the values for these properties in the Application page in the project's properties, as in Figure 4.
By default, the project includes two Windows Phone related references -- Microsoft.Phone and Microsoft.Phone.Interop. Microsoft.Phone provides access to Microsoft.Phone.Controls and Microsoft.Phone.Shell. If you have to work with sensors, you must add Microsoft.Devices.Sensors as a new reference.
