ver the years, we have all seen the proliferation of Web applications. In the early days, Web sites consisted of sets of static HTML pages, with nice graphics and lots of information. Then, server-side technologies like CGI, ASP, and JSP made Web applications possible and suddenly users were able do a lot of things on the Web, such as buying products online, performing reservations, etc. Client-side innovations, such as JavaScript, helped to improve the user experience of Web applications, making them feel much more responsive. Although AJAX’s underlying technologies had been available for several years, it wasn’t really until the last couple of years that people really started spending more time AJAX-enabling their Web applications. All this boils down to one important goal of Web developers?making Web applications much more interactive and responsive.

Today, a new term has been coined?RIA, which stands for Rich Internet Applications. To Microsoft, RIA really stands for Rich Interactive Applications. And it is with this in mind that Microsoft recently launched a new technology/product known as Silverlight. Previously known as Windows Presentation Foundation/Everywhere (WPF/E), Microsoft Silverlight is a browser plug-in that enables developers to host Rich Internet Applications (RIA) that feature animation, vector graphics, as well as video playback.

This article will help you get started with Silverlight and hopefully give you a good feel for how Silverlight development works.

The State of Silverlight
At the moment, there are two release versions of Silverlight: 1.0 (released) and 1.1 (in alpha release), the main difference being the support of .NET languages in version 1.1. For version 1.0, you have to use JavaScript for writing your application logic. In version 1.1, you can also use either C# or Visual Basic for your application logic, which is then executed by a version of the CLR built within the runtime.

The Silverlight runtimes currently support the following browsers:

• Internet Explorer 6/7
• Firefox 1.5/2.0
• Safari 2.0

This article focuses on Silverlight 1.1

Obtaining the Tools
To develop Silverlight applications, you’ll need to obtain the following runtimes/tools:

Runtimes
To view Silverlight applications on your browser, download one or all of the following:

• Microsoft Silverlight 1.0 Release Candidate
  • Mac
  • Windows
• Microsoft Silverlight 1.1 Alpha Refresh
  • Mac
  • Windows
• Microsoft ASP.NET Futures (July 2007)

The ASP.NET Futures download contains new controls for ASP.NET that support Silverlight applications.

Developer Tools
The easiest way to get started with Silverlight development is to use Visual Studio 2008, currently available for download as Beta 2. You can download Visual Studio 2008 Beta 2 here.

Once you have downloaded and installed Visual Studio 2008 Beta 2, you also need to download the Microsoft Silverlight Tools Alpha Refresh for Visual Studio (July 2007), which is an add-on to Visual Studio 2008 for creating Silverlight applications. Installing it will add the following items to Visual Studio 2008 Beta 2:

• Visual Basic and C# Project templates
• IntelliSense and code generators for XAML
• Debugging of Silverlight applications
• Web reference support
• Integration with Expression Blend

In addition, you can download one or more of the following professional tools to help design your Silverlight applications:

• Expression Blend 2 August Preview: A professional design tool to create user interaction for Silverlight.
• Expression Media Encoder Preview Update: A feature that will be part of Microsoft Expression Media that allows you to create and enhance video.
• Expression Design: A professional illustration and graphic design tool to create Silverlight assets.

Finally, you can download the following SDKs containing documentation and sample code:

• Microsoft Silverlight 1.0 Software Development Kit Release Candidate
• Microsoft Silverlight 1.1 Software Development Kit Alpha Refresh

Getting Started
With all the necessary tools installed, you can now create your first Silverlight application. Launch Visual Studio 2008 and create a new project. In the Project types, select Silverlight and then select the Silverlight Project template (see Figure 1). Name the project OurFirstSilverlightProject.

Figure 1. First Step: Creating a new Silverlight project.

Figure 2. The Foundation: All the basic files contained within the Silverlight project.

In the Solution Explorer, click the Show All Files button to reveal all the files that Visual Studio has added for the project. Figure 2 shows the files contained within it.

The following sections explain the basic files contained within a Silverlight project.

TestPage.html
This is a test page that you will use to test your Silverlight application. It contains the Silverlight control and references two JavaScript files?Silverlight.js and TestPage.html.js (their uses are explained in the next section). Listing 1 shows the content of TestPage.html.

HTML pages that host Silverlight controls can also contain other normal HTML elements that make up a web page. When you double-click on the TestPage.html file in Solution Explorer, Visual Studio 2008 will display the page in Split view, a new feature available in Visual Studio 2008. Using the Split view, you can view the HTML code and at the same time preview how it looks in a browser (see Figure 3).

Figure 3. Test Case: Displaying an HTML page in Split view.

TestPage.html.js
This file contains one JavaScript function that loads the Silverlight control onto the page. It also references the XAML file that contains the UI of your Silverlight application (Listing 2).

Each HTML page should have a corresponding JavaScript (.js) file that loads the Silverlight control contained in a relevant XAML File.

Page.xaml
This file contains the UI for your Silverlight application. Listing 3 shows the default content created by Visual Studio 2008.

Take note here of the x:Class attribute. In Listing 3, it specifies that the code-behind Class name is OurFirstSilverlightProject.Page (OurFirstSilverlightProject is the default root namespace of our project while Page is the class name), and its corresponding assembly is located in ClientBin/OurFirstSilverlightProject.dll.

Visual Studio 2008 provides IntelliSense support for XAML content, which is quite a handy feature if you’re considering writing XAML manually.

Page.xaml.vb
This file contains the managed source code of our Silverlight application. The default class name used by Visual Studio 2008 is Page (Listing 4).

The Page.xaml.vb file is where you write your managed code. When a Silverlight application is ready for deployment, only the compiled assembly needs to be deployed. There is no need to deploy the source code.

Silverlight.js
This is the file provided by Microsoft that creates all the necessary plumbing needed to ensure that the target Web browser is able to run your Silverlight applications. By including this file in your application, the target Web browser will be asked to download the necessary runtime if the Silverlight runtime is not installed (every Silverlight application must include this file). Under the License Agreement, you are not allowed to modify this file. For Web servers that serve multiple Silverlight applications, you can simply put a single copy of this file in one location and set all the pages containing Silverlight content to point to this page.

Building the User Interface Using XAML
As mentioned earlier, Visual Studio 2008 has IntelliSense support for XAML content. While this will make the UI building process much more efficient, unfortunately this preview version of Visual Studio 2008 does not have a viewer for XAML content. That means that every time you code some XAML content, you have to run it in order to see if the look and feel is what you wanted.

The good news is that you can use another tool from Microsoft?Expression Blend?to build the XAML UIs. Microsoft Expression Blend is a professional design tool that allows you to build professional looking UI for Windows application. The latest edition of Blend, Expression Blend 2 August Preview, allows you to create Silverlight-based applications (you can obtain a preview copy from the links provided earlier in the article).

To open the Page.xaml file with Expression Blend 2, right-click on it and select Open in Expression Blend… (see Figure 4).

Figure 4. Open Page.xml: Opening a XAML page using Expression Blend.

Figure 5. Edit Page.xml: Editing the XAML file using Expression Blend 2.

Expression Blend 2 will launch and you will see an environment somewhat similar to Visual Studio 2008 (see Figure 5).

Let’s now add some controls to the page. First, you’ll create a rounded-corner button on the page that looks like Figure 6). Within this button, you’ll also add a text block so that you can use it to display some information.

Figure 6. Adding Controls: The rounded-corner button you will create.

Figure 7. Adding Controls: Adding a canvas to the page.

First, click on the Canvas control (see Figure 7) and add it to the page. This canvas will act as a container that contains all the controls that make up the button.

To create a border for the button, add a Rectangle control to the page, essentially covering the canvas that you have just added (see Figure 8).

To create the four rounded corners, click on the Direction Selection icon and then select the Rectangle control that you have just added (see Figure 9). Set the properties of the Rectangle control as follows:

• RadiusX – 8
• RadiusY – 8
• StrokeThickness – 3

In addition, you will also set the background color of the rectangle to yellow (see Figure 9 for the exact color).

Figure 8. Adding Controls: Adding a Rectangle to the canvas.

Figure 9. Adding Controls: Making the four round corners and setting its background color to yellow.

To display text within the button, you need to add a TextBlock control onto the canvas (see Figure 10). Also, set the font to Comic Sans MS.

To make the button display the current time, you need to update the time every second. To do so, add a Timeline to your XAML file. First, click on the > arrow in the Objects and Timeline group, followed by the + button (see Figure 11).

Figure 10. Adding Controls: Adding a TextBlock control to the canvas.

Figure 11. Adding Controls: Adding a Timeline to the XAML file.

You will be asked to name the new Timeline. Use the default name of Timeline1 and click OK.

Your XAML file will now look like Figure 12. Save the XAML file.

When you now return to Visual Studio 2008, it will ask you if you want to reload the Page.xaml file as it has been edited outside the source editor. Once you have reloaded the file, you will now see the following XAML content (see Listing 5).

Figure 12. The XAML File: Your XAML file in Expression Blend 2 August Preview.

Figure 13. The Views: Switching between Design and XAML views in Expression Blend.

To make the canvas object accessible programmatically, add the x:Name attribute and set it to btnTime, like this:

Note that in Expression Blend 2, you can switch between Design and XAML views (see Figure 13). Unfortunately, there is no IntelliSense support in XAML view.

Writing the Logic Using Visual Basic
With the UI built, it’s time to write the code to make it do something useful?for instance, display the current time in the button.

Double-click the Page.xaml.vb file in Solution Explorer to load it in the code editor.

Figure 14. Handlers: Creating the event handler for the Completed event.

In the Page_Loaded() subroutine, add the following bolded lines:

Partial Public Class Page    Inherits Canvas    Public Sub Page_Loaded(ByVal o As Object, ByVal e As EventArgs)        ' Required to initialize variables        InitializeComponent()        Me.Timeline1.Duration = New Duration(New TimeSpan(0, 0, 1))        Me.Timeline1.Begin()    End Sub

In the preceding code, the Timeline1 triggers an event (the Completed event) each second (set through the Duration object). The Timeline object is somewhat similar to the Timer control that Windows developers are familiar with. The Begin() method starts the countdown and one second later the Completed event is fired.

The next step would be to service the Completed event, which you can easily do by first selecting the Timeline1 object from the top of the code editor, and then selecting its corresponding Completed event (see Figure 14).

Figure 15. Completed: Testing the application in both IE and FireFox.

Code the Completed event handler as follows:

Private Sub Timeline1_Completed( _   ByVal sender As Object, _   ByVal e As System.EventArgs) _   Handles Timeline1.Completed        Dim textBlk As TextBlock = Me.btnTime.Children(1)        textBlk.Text = Now.ToString        Me.Timeline1.Begin()    End SubEnd Class

Basically, you set the current time by retrieving the TextBlock control embedded within the canvas (btnTime) and setting its Text property. The canvas has two children:

• Children(0): Rectangle control
• Children(1): TextBlock control

After displaying the time, you call the Begin() method to start the countdown again.

That’s it! Press F5 in Visual Studio 2008 and you will see your Silverlight application displayed in Internet Explorer. If you load the sample application in FireFox, it will look and work the same (see Figure 15). The button will update the time every second.

Transformation
Now that you have your first Silverlight application running, modify it to do some animation so that you can do justice to Silverlight. As an example, let’s modify the button so that it can rotate and update the time simultaneously.

Using the same project, add a new Timeline to the XAML file in Expression Blend 2. After adding the new Timeline, your XAML code should look like this:

In the Page.xaml.vb file, declare a private member variable called degrees:

Partial Public Class Page    Inherits Canvas    Private degrees As Integer = 0

In the Page_Loaded() subroutine, add a new duration for the second Timeline:

    Public Sub Page_Loaded(ByVal o As Object, ByVal e As EventArgs)        ' Required to initialize variables        InitializeComponent()        '---display the clock---        Me.Timeline1.Duration = New Duration(New TimeSpan(0, 0, 1))        Me.Timeline1.Begin()        '---rotate the clock---        Me.Timeline2.Duration = New Duration(New TimeSpan(100))        Me.Timeline2.Begin()End Sub

Here, you are setting the Timeline2’s interval to 100 milliseconds (the TimeSpan object constructor is overloaded). Every 100 milliseconds, the Completed event of Timeline2 is fired, and here you call the PerformTransformation() subroutine:

Private Sub Timeline2_Completed( _   ByVal sender As Object, _   ByVal e As System.EventArgs) _   Handles Timeline2.Completed        PerformTransformation()        Me.Timeline2.Begin()    End Sub

This subroutine uses the RotateTransform object to perform a transformation on an object. Here, you will use it to rotate the button one degree at a time:

Private Sub PerformTransformation()        '---use a RotateTransform object to perform transformation---        Dim rt As New RotateTransform        '---define the transformation---        With rt            .Angle = degrees            .CenterX = 50            .CenterY = 50        End With        '---increment the degree of rotation---        degrees += 1        '---transform the button---        btnTime.RenderTransform = rt    End Sub

Figure 16. On the Run: Rotating the button.

In addition, when the user clicks on the button, the button will be reset to its original position and start rotating again:

Private Sub btnTime_MouseLeftButtonDown( _   ByVal sender As Object, _   ByVal e As System.Windows.Input.MouseEventArgs) _   Handles btnTime.MouseLeftButtonDown        degrees = 0        PerformTransformation()    End Sub

Figure 16 shows how the button looks when it’s run.

Deploying Silverlight Applications
After your Silverlight application is completed, deploying it is very easy. For a production environment, there is no need to expose the source of your managed code; simply copy the compiled assembly to your web server. For example, you can copy the assembly you just created to see how easy the process is.

First, create a folder in your hard drive, say C:MyFirstSilverlightApp.

Create an HTML page named Default.html and populate it with the following:

As you observe, you can simply copy the content from the TestPage.html (from the Visual Studio 2008 project) and paste it into Default.html. The important elements are highlighted in bold.

This HTML file references two JavaScript files: Silverlight.js and Default.html.js. Like before, you can also copy them directly from the files in Visual Studio 2008 project (after copying, simply rename TestPage.html.js to Default.html.js).

By default, the Default.html.js file uses Page.xaml as the UI for your Silverlight application (see Listing 5). Hence, copy the Page.xaml from your Visual Studio 2008 project into the C:MyFirstSilverlightApp folder.

If you look into the content of Page.xaml, you will see that the Silverlight application is expecting to find the compiled assembly in the ClientBin folder. The name of the compiled DLL is OurFirstSilverlightProject.dll:

Hence, in C:MyFirstSilverlightApp, create a new folder named ClientBin and copy the compiled DLL from the ClientBin folder of your Visual Studio 2008 project's folder.

Figure 17 shows the content of the C:MyFirstSilverlightApp folder. As you can see, you do not need to deploy the source code of your VB program, just the assembly.

Figure 17. Content: What's inside the C:MyFirstSilverlightApp folder.

You can now configure the C:MyFirstSilverlightApp folder as a virtual directory in IIS. Launch IIS (you can use the inetmgr command), right-click on the Default Web Site link and select New | Virtual Directory…. Give it the alias of Silverlight and specify C:MyFirstSilverlightApp as the location of the folder. That's it!

You can now load the page using this URL: http://localhost/Silverlight/default.html.

You've seen how to create a Silverlight application using Visual studio 2008. You define Silverlight application UIs using XAML, which you can produce with Visual Studio 2008, Expression Blend 2, or manually. Hopefully, you've been inspired to explore Silverlight more deeply.