Channels ▼
RSS

Tools

Developing a Silverlight UI for Windows Phone 7


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.

[Click image to view at full size]
Figure 1: The new projects provided by the Silverlight for Windows Phone template.

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.

[Click image to view at full size]
Figure 2: Design view for MainPage.xaml in Visual Studio 2010 and its XAML code on the right side.

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.

[Click image to view at full size]
Figure 3: Solution Explorer displaying the structure 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.

[Click image to view at full size]
Figure 4: Project's properties displaying the Application page.

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.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video