A Second Silverlight Example: Creating a Project

As previously mentioned, Silverlight 2 supports .NET languages such as C# for implementing the logic of an application. The Silverlight plug-in is capable of executing this .NET code (or, to be exact, the Microsoft Intermediate Language [MSIL] code created during compilation). To create such an application with Visual Studio 2008, you need to create a web project based on the Silverlight template included as a part of the SDK installation. This template will create two projects: one for the actual Silverlight application and one for the web site hosting the Silverlight content. At first this may look a bit more cumbersome than the single-project approach in the previous section, but it also helps us to keep Silverlight content and HTML/JavaScript code separate.

The application that you create here will be the basis for all the remaining examples in this book. We chose to call it Silverlight, but you can choose another name if you want. As you will see later, the web site is called Silverlight_Web. By default, the project uses the built-in development of Visual Studio and assigns a random port. This port will be 12345 throughout the book, but all examples also work on other free ports and also when using IIS instead.

Before using this approach, you need to install an additional package: the ASP.NET 3.5 Extensions. This software was previously called ASP.NET Futures and contained experimental code and features for ASP.NET, including new controls for Silverlight. A specific aspect of the Silverlight project template works with these features, therefore you need to install the ASP.NET 3.5 Extensions package.

Download it from http://www.microsoft.com/downloads/details.aspx?FamilyId=A9C6BC06-B894-4B11-8300-35BD2F8FC908&displaylang=en. Figure 1 shows the installation of this software.

Figure 1. Installing the ASP.NET 3.5 Extensions package

Since the ASP.NET 3.5 Extensions contain prerelease code and software, there is no guarantee that the APIs will not change in the future. So, do not rely on your code to work identically with future releases as well. On the other hand, all Extensions functionality used by the Silverlight project template is fairly simple to emulate by just having a look at the resulting HTML markup when viewing a page in the browser.

In Visual Studio, choose FileNew Project (not FileNew Web Site!), and open the Visual C# node. There, you will find a Silverlight Project entry. You can provide a name for both the project and the associated solution; we used Silverlight in both cases. Then, an application wizard will pop up (see Figure 2), asking you whether you want to automatically create a web page to debug the Silverlight application. Here, you have the following choices:

Figure 2. The Silverlight Application Wizard

Add a new Web to the solution for hosting the control

Creates a new web site (default name: _Web) that will hold the test page for the application.

Generate an HTML test page to host Silverlight within this project

The control (or, in our case, application) you are about to create will automatically create a test page upon compilation. This is a convenient option, but it makes adding JavaScript code a bit harder.

Link this Silverlight control into an existing web site

Creates a test page for the current application in an existing web site. Disabled when initially creating an application based on the Visual Studio template.

We are using the first option here and created a web site (Silverlight_Web) that will hold sample files for all our Silverlight applications. So, every application will be in its own project, but will be part of the Silverlight Visual Studio solution. When adding a new project to the solution, the third option ("Link this Silverlight control into an existing Web site") is available and will be used to create a new test page in the existing web site (see Figure 3).

Figure 3. This time the test page can be added to an existing web site

If you now have a look at the Silverlight_Web project, you will see these files and folders:

Default.aspx

An empty dummy page

SilverlightTestPage.aspx

The test page for the Silverlight project

web.config

Configuration settings to enable the ASP.NET 3.5 Extensions

The Silverlight project initially contains these files:

App.xaml and App.xaml.cs

The code required to initialize the Silverlight application

Page.xaml and Page.xaml.cs

The actual Silverlight application and associated C# code

So, the bulk of the work is done in the Page.xaml and Page.xaml.cs files. More advanced examples will also use additional files, but for your first steps, you should be set with these files.

NOTE

You need to install the ASP.NET 3.5 Extensions to use the mechanism that creates the test page for you. Otherwise, you will get the error message shown in Figure 4.

Figure 4. You forgot to install the ASP.NET 3.5 Extensions

Create a new Silverlight Control project within the current solution, and call it HelloWorld. You will now get a new test page, HelloWorldTest.aspx, and a new project called HelloWorld. Open the Page.xaml file, which currently looks as follows:

<UserControl x:Class="HelloWorld.Page"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
    </Grid>
</UserControl>

The root node is <UserControl> (contrary to the layout in the previous section), but within that node, the well-known <Canvas> element appears again. Within this <Canvas> element, you can place all of the XAML elements you want to use in your application (see Example 1).

Example 1. A simple "Hello World" Silverlight application (Page.xaml, project HelloWorld)

<UserControl x:Class="HelloWorld.Page"

    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <Canvas>
            <Rectangle Width="300" Height="150" 
                       Stroke="Orange" StrokeThickness="15" />
            <TextBlock FontFamily="Arial" FontSize="56" 
                       Canvas.Left="25" Canvas.Top="40"
                       Foreground="Black" Text="Silverlight" />
            </Canvas>
    </Grid>
</UserControl>

Let's have a look at the HelloWorldTestPage.aspx file. It contains the following code:

Code View:

<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register Assembly="System.Web.Silverlight, Version=3.6.0.0, Culture=neutral, 
    PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI.SilverlightControls" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Test Page For HelloWorld</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/HelloWorld.xap" 
         Version="1.1" Width="640px" Height="480px" />
    </div>
    </form>
</body>
</html>
    
    

The <%@ Register %> directive loads a special Silverlight library that contains the control. This control can load a Silverlight XAML application; the file extension used for that is .xap. By the way, if you are wondering where the ClientBin directory and HelloWorld.xap came from, they were created during compilation. Basically, a .xap file is a ZIP archive containing the XAML markup, the compiled server-side code, and additional resources. The Silverlight plug-in then unpacks this archive and executes the application within.

The HTML markup resulting from loading HelloWorldTestPage.aspx contains JavaScript code that is doing essentially what the Visual Studio 2008 Silverlight Script Web template is doing—it loads the XAMP application.

The adoption rate of new Silverlight versions should be quite high. By default, Silverlight checks once a day to see whether there is a new version (whenever the user visits a site with Silverlight content). If there is a new version, the user is prompted to download and install the new plug-in (see Figure 7 for the update dialog on Mac OS X); depending on the operating system and configuration, this might even happen automatically.

Figure 7. A new Silverlight version is available

Now that you've set up your development environment and created your first applications, let's take a quick look in the next chapter at tools available or coming soon from Microsoft and others to make the job easier.