Windows Phone 7 : Silverlight Tools and Framework Overview

1. Silverlight for Windows Phone

Windows Phone 7 brings Silverlight to Windows Phone. Silverlight on Windows Phone 7 is based on Silverlight 3, with some Silverlight 4 features that were brought forward to the platform. There are some notable differences between Silverlight for the desktop and Silverlight for Windows Phone 7:

• Silverlight for Windows Phone 7 applications are deployed via Marketplace on the device and via the Zune client. Silverlight applications are not deployed from the Web or side-loaded from a PC to Windows Phone 7.

• Silverlight for Windows Phone 7 applications do not run in IE Mobile. Silverlight applications run directly on the phone via a host process in isolation from one another. If you are a Silverlight developer, you can think of it as a Silverlight out-of-browser application only – applications do not run in a browser.

• Some Silverlight Framework APIs are not applicable to Windows Phone 7. One example is the APIs that enable Silverlight in the web browser to communicate with the host browser. Because Silverlight does not run in the browser on Windows Phone 7, these APIs are not applicable.

• Silverlight for Windows Phone 7 includes additional functionality to make underlying device capabilities available to developers such as the built-in sensors, tasks, and choosers to enable selecting a contact, send an SMS or email, and so on.

Despite these differences, the vast majority of the Silverlight Framework is compatible between Silverlight for the Web/desktop and Silverlight for Windows Phone so learning Silverlight is a great way to also learn how to build cross-platform applications between the Web, desktop, and Windows Phone 7.

2. Hello Silverlight for Windows Phone

Now that you have a high-level overview of the application platform and programming model, let's dive a little bit deeper into Silverlight development with the Windows Phone Developer Tools. We start first with an overview of Visual Studio 2010.

Silverlight development was available in Visual Studio 2005 and 2008; however, support for Silverlight really shines in Visual Studio 2010, making it a first-class citizen development technology with great tooling support. I also provide a very high-level overview of Expression Blend, now in its fourth version and included as a free download for Windows Phone development as part of the Windows Phone Developer Tools.

2.1. Visual Studio 2010 Tour

Once you have the Windows Phone Developer Tools installed, fire up Visual Studio 2010 and select File => New => Project... to bring up the New Project dialog. Select Silverlight for Windows Phone on the left of the dialog and then select Windows Phone Application. Enter a name and location and then click OK to create it.

After the project is created, double-click on MainPage.xaml in the Solution Explorer tool window on the right to bring up the main application form or page. Figure 1 shows the UI with key items highlighted.

Figure 1. Windows Phone 7 Silverlight for Windows Phone design-time

Table 1 explains the identified items in the figure. If you are an experienced .NET developer, some of these may be obvious to you, but other items may not be so familiar.

Figure 2 shows the Document Outline tool window. Once you start using it as part of your development workflow, you will find it invaluable for anything but the most trivial projects.

Figure 2. Document Outline tool window

Now that I have provided a quick tour of Visual Studio 2010 for Windows Phone development, let's dive in with some code. Add a button toward the top middle portion of the form. Double-click on the button to create the default event handler for the control, which is the Click event for a Button control. Doing so creates the following event handler that is edited to adjust the content for the button:

private void button1_Click(object sender, RoutedEventArgs e)
{
  (sender as Button).Content = "Hi There Reader";
}

We can reference the button by name, button1, created by default. In the above code, since the button1 is also the sender, we simply cast sender to button and set the Content property. A question you may be asking is how is the event handler associated with the Button object? The answer is via the XAML markup for button1, shown here:

<Button Content="Hi There" Height="72" HorizontalAlignment="Left" Margin="47,101,0,0"
Name="button1" VerticalAlignment="Top" Width="160" Click="button1_Click" />

					  

All of the XAML was automatically generated when the control was dropped onto the designer surface except for the value configured in Content property and this line of code that associates the event handler in the MainPage.xaml.cs code-behind with the Click event for the control:

Click="button1_Click"

You can also generate event handlers by editing XAML directly. Drag another button on to the design-surface below the first. Change the Width property to Auto for this button, more on that later. Next go to the markup and type Click= inside of the <Button ...> markup for the second Button control. Figure 3 shows the IntelliSense pop-up.

Figure 3. XAML IntelliSense

You can arrow up or down in the pop-up window shown in Figure 3 to select an existing event handler, or simply type Tab to generate a new event handler into the code-behind file named button2_Click by default. We copy the same code from the first event handler into the second event handler and click F5 or the green arrow in the toolbar in Visual Studio to run the application the emulator as shown in Figure 4.

Figure 4. HelloSilverlight application in the emulator

In Figure 1-9, the image on the left shows the initial state, and the image on the right shows the state after clicking both buttons. Notice that the text is clipped on the top button while the bottom button automatically expanded. Remember that when I added the second button the Width was set to Auto. By setting the Width to Auto, we rely on the Silverlight layout system to determine the appropriate width for the control. 

2.2. Expression Blend 4 for Windows Phone Tour

Expression Blend is a relatively new tool available from Microsoft. It was first introduced with Windows Presentation Foundation as the user experience design tool. I discussed XAML as part of the overview in this section and a little bit during the walkthrough in the previous section, but to reiterate, the UI Markup language for WPF and Silverlight is Xml Application Markup Language XAML, It has great tooling support provided in both Visual Studio and Expression Blend, which I cover here.

Expression Blend is positioned as a designer tool, more for a technical designer who takes mock-ups from Adobe Photoshop or another drawing tool and turns it into XAML. Expression Blend 4 can import from Adobe Photoshop as well as Adobe Illustrator files to help jumpstart from mock-up to XAML. Figure 5 shows the Expression Blend 4 UI with the Ch01_IntroToWP7Development solution open.

Figure 5. HelloSilverlight application in Expression Blend

Figure 5 shows Expression Blend 4 with a simple project opened in order to provide an overview of the tool's major features. Table 2 provides a quick description of the lettered arrows.

Expression Blend has many features that developers and designers will want to take advantage of, such as design-time data, animations, visual states, UI templates, and control templates.