Catching the (Silver) Light

Find out how easy it is to add Silverlight 1.0 to your web pages with this step-by-step walkthrough.

by Dave Campbell

Nov 26, 2007

Page 1 of 5

'd guess that everyone reading this magazine has heard of Silverlight. I'll also guess that not everyone has jumped at the opportunity to "play" with something that had been in beta. The good news is that Silverlight 1.0 is now released! I've spent a lot of time with Silverlight since Microsoft made the Community Technology Preview version available as WPF/E. There's a large gap between a web site without Silverlight and a web site that lets you experience the interactivity of Silverlight. Before you finish reading this article, I hope you'll realize how very easy it is to bridge that gap.

Everyone building web pages is familiar with HTML and, like it or not, you are familiar with JavaScript as well. Those two pieces of knowledge is all the foundation you need to get started with Silverlight 1.0, and this article will show you how to accomplish that transition.

Some Basics
Silverlight is a small ActiveX control that gets instantiated in your web page—in some cases the page may instantiate more than one instance. During the instantiation, the control is told to take direction from an XML file. That's all there is to it! Everything else is wiring—getting the instantiation going—or syntax and learning how to "give directions" to the control.

To keep this discussion simple, I'll specifically discuss Silverlight 1.0. Since you can use JavaScript to code Silverlight, I won't need to talk about pre-release versions of Visual Studio.

To get the pieces necessary to add Silverlight to your web page, first go to http://www.silverlight.net. Choose the Get Started menu. On the next page, under the section called "Download The Runtime And Tools," scroll down to "Software Development Kit" and click the link for the "Microsoft Silverlight 1.0 Software Development Kit."

Extract the files downloaded to a folder of your choice. There's plenty of information in there, including:

QuickStart. When you finish this article, go through the QuickStart tutorial; you won't be disappointed.

Silverlight.chm. This is the Help file documentation. Many sections have example code.

Resources. This contains JavaScript and schema files.

For the purposes of this article, you want the Silverlight.js file in the Resources folder.

The HTML File
So that everyone begins at the same level, here's a base HTML file for the starter page used in this article.

Save the code above to a file with an .htm or .html extension, and then either drag that file to a browser window or double-click the file in an Explorer window. You should see a browser window open and the text, "Hello World."

Editor's Note: This article was first published in the Nov/Dec 2007 issue of CoDe Magazine, and is reprinted here by permission.