Introduction

You are reading this article because you are either interested in what Silverlight has to offer, or maybe you want to start developing in Silverlight. Perhaps you are just curious to see how Silverlight may help you improve your web applications; or maybe you were always too lazy to learn Flash (like me) and now that there's a .NET equivalent, you've decided it's time to take the plunge!

What is Silverlight?

I think Microsoft sums it up quite nicely:

"Silverlight is a cross-browser, cross-platform plug-in for delivering the next generation of .NET based media experiences and rich interactive applications for the Web. Silverlight offers a flexible programming model that supports AJAX, VB, C#, Python, and Ruby, and integrates with existing Web applications. Silverlight supports fast, cost-effective delivery of high-quality video to all major browsers running on the Mac OS or Windows."

Wikipedia says "Silverlight is a proprietary runtime for browser-based Rich Internet Applications, providing a subset of the animation, vector graphics, and video playback capabilities of Windows Presentation Foundation."

I suggest you read both the Wikipedia definition as well as visit the Silveright Homepage itself.

Silverlight vs. Flash

There have been quite a few discussions on this topic. Flash developers don't seem to like what Microsoft has "attempted to offer in terms of Rich Internet Applications," but let's remember one thing: it's a new release! What were the first versions of Flash like? Of course there will be limitations and maybe flaws in the earlier releases. One advantage Microsoft has on its side is this: It can learn from all the short-comings of the earlier Flash versions over the years. I am not going to be biased and say which I think is better, because Flash might be better for some developers and Silverlight better for others. I am interested in Silverlight for one reason and one reason only: I am a .NET developer and I can create Silverlight applications in visual Studio using C#.

So it just seems to be the obvious choice for me. I suggest you go to the Silverlight Homepage and read why you should use Silverlight. A list of discussions and sites are available here written by developers on both sides of the fence. It is also important to know what the new features are in the latest 1.1 Alpha release compared to the initial release. This can be found on MSDN here. I say this because a lot of articles that comment on Silverlight have only used or seen version 1.

Silverlight Overview

Here's a shortlist of what Silverlight has to offer:

• It integrates with various browsers on Windows and on the Macintosh.
• It enables the rendering of richer user experiences that are defined by XAML.
• It renders media (music and video).
• Designers and developers can build their Silverlight applications based upon the code of their choice including JavaScript or managed .NET code.
• The plug-in is small (2MB) to download for end users, and therefore easy to adopt.

More can be read on the Silverlight Architecture at MSDN.

Getting started and Setting up your environment

OK, so enough reading, let's start! We are going to develop our first Silverlight Application using Visual Studio 2008 Beta 2 and the Silverlight 1.1 Alpha runtime. First, we need to setup our environment before we can start coding. Go to http://silverlight.net/GetStarted/ and complete the following steps:

• Download and install the latest Silverlight Runtime (1.1 Alpha) for Windows.
• Download and install VS2008 Beta 2 If you haven't already.
• Download and install Silverlight Tools Alpha for VS2008 beta 2. This installs an add-on so you can create Silverlight projects in VS2008 Beta 2. Please note that this will not work in express editions.

Optional downloads are also available:

• ASP.NET Futures. This contains Silverlight controls for ASP.NET.
• Silverlight 1.1 SDK. This includes documentation, samples, add-ins and other extras e.g. a set of reusable Silverlight UI controls.
• Expression Blend 2. This is a professional design tool to help create rich Silverlight user interfaces and content.

After you have downloaded and installed everything, we are now ready to code. So what are we waiting for?

Our First Silverlight Application

Open Visual Studio 2008 beta 2 and click File > New > Project; then choose Silverlight Project; enter the project name "HelloSilverlight" and click OK :

Figure 1: New Silverlight Project Dialog in VS2008 Beta 2

A stock standard Silverlight project is created.

Figure 2: Standard Silverlight Project

Let's go through the files we are looking at:

Page.xaml - our first XAML (pronounced zammel) file! The XML in this file defines the UI for our Silverlight content and behaviors. It currently contains the following code (Note that I have reordered the attributes):

As you can see there is only a root element (Canvas). The Canvas element has 2 namespace attributes, but the important attribute is x:Class. This attribute is used to define the Code behind class in your code (in the Page.xaml.cs file). It also references where it will build the assembly\DLL. The rest of the attributes are pretty straightforward: x:Name lets you define the name of the canvas. Loaded allows you to define an event handler in your code behind for the Loaded event for the canvas. Width/Height/Background are the canvas dimensions and color.

Page.xaml.cs - the code behind file for our XAML - it currently only contains our Page_Loaded event.

Silverlight.js - the Silverlight JavaScript helper file. It contains the methods to provide version checking and generation of the OBJECT or EMBED markup for plug-in instantiation in the HTML file that hosts the Silverlight plug-in.

TestPage.html - the default html page that contains the Silverlight content. An important thing to notice is the code:

Here we reference the Silverlight JavaScript file as well as the page's JavaScript file which contains the important createSilverlight method. The other important code is:

This is how we embed the Silverlight content into our page. You'll notice we called the createSilverlight method.

TestPage.html.js - this contains the createSilverlight method which hooks up an HTML div element to the XAML content and then gives it focus. Here is the code:

OK, let's run the project and see what happens! Wow - a blank page. Don't stop the project yet. Open the Page.xaml file and change the Background attribute to Background="Gray". Save the file, then do a refresh in the browser. You will now be able to see the blank gray canvas in your browser.

Now let's add the famous "Hello World!" text. Open the Page.xaml file again and inside the root Canvas node, add a TextBlock with the following XAML:

Save and refresh the page in the browser. Now you will see the Hello World text. Well done - you have created you very first Silverlight application and are well on your way to becoming a seasoned Silverlight developer.

Events in Silverlight

Let's extend our previous example by adding some clickable text that responds to a mouse click event. Stop the project if it's already running; then, open the Page.xaml file and add a child canvas which contains a TextBlock element like follows:

Save and run. You will see another TextBlock that displays the text "Click here".

Figure 3: Our first Silverlight Application!

Now we need to hook up a mouse click event. Edit the child canvas by adding the attribute

Then go into the code behind file and add an event handler:

Run the code and click on the child canvas. The canvas will change to a red color. If we wanted to change the TextBlock color too, we could change our code behind event handler like so:

Some of you might look at this code and think "I dont like how you reference the Textblock with c.Children[0]. What if you add another object before the textblock, won't the code break?" I feel your pain, but don't worry because it's easy to get around. Simply add an x:Name attribute to the TextBlock XAML:

Then, in your code behind handler, change the code to:

Now that's more like it! But how could I reference this object in the code behind? What physically happened behind the scenes when I added the x:Name attribute? If you look at the Page.xaml.cs file you will notice it's a partial class. Then if you go to the definition of the InitializeComponent method called in the page load event, you'll be taken to a file named page.g.cs. It is located in the obj/Debug folder as shown below:

Figure 4: Silverlight project showing hidden auto-generated files

This file is automatically generated every time you save the Page.xaml file, and also contains a partial Page class:

That is how we can reference these objects directly in code. Each XAML page that contains x:Name attributes will generate a .g.cs file. Please don't edit the code in this file as it will be overwritten every time you save the .xaml file.

So now, by naming my XAML objects and referencing them in my code behind, I can attach event handlers in my code behind too. This is my new XAML:

Notice I have taken out MouseLeftButtonUp. Then in my code behind I've changed the Page_Loaded event handler:

I have wired up the event handler in the code behind. As you can see it's very flexible and open doors for a lot of opportunity.

Summary

We have gone through what Silverlight is and how to setup your environment to create your own Silverlight projects. We have gone through a simple project to see what makes up a Silverlight application and how all the pieces fit together. We have only covered the basics and this is only the tip of the iceberg. In my next article I will carry on from where we left off, figure out how to debug our Silverlight applications and cover some more advanced features. More importantly, we will look at some prettier examples by playing with Expression Blend. Now it's up to you. Experiment with XAML, download the samples and play. Good Luck!

References

• Silverlight Home: http://silverlight.net/
• Wikipedia Explanation: http://en.wikipedia.org/wiki/Silverlight
• A very good overview of the Silverlight Object Model: http://msdn2.microsoft.com/en-us/library/bb412399.aspx
• Silverlight QuickStarts: http://silverlight.net/quickstarts/

About Brad Vincent

Sorry, no bio is available View complete profile here.

---

Discussion

Subject	Author	Date
Good article	Simone Busoli	10/18/2007 1:30 PM
Congratulations for your first article Brad, waiting for the following ones. Simone Busoli Feel free to ask me any .NET question Reply | Permanent link
Good article	Simone Busoli	10/18/2007 1:32 PM
Congratulations for your first article Brad, waiting for the following ones. Simone Busoli Feel free to ask me any .NET question Reply | Permanent link

---

Please login to rate or to leave a comment.