Catching the (Silver) Light
I’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. The delta between a Web site without Silverlight and a Web site that allows you to experience the wonderfulness of Silverlight is huge. Before you finish reading this article, I hope you’ll realize how very easy it is to bridge that gap.
Silverlight is a small ActiveX control that gets instantiated onto your Web page, maybe in more than one place. During the instantiation, the control is told to take direction from an XML file. That’s all there is to it! Everything else is involved in either the wiring-up of getting the instantiation going or learning how to “give directions” to the control.
If you set the canvas background property to #FFC0C0C0, you will get a gray background that enables you to see the edges of the canvas while working with objects.
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:
- QuickStart. A great tutorial. When you finish this article, go through the QuickStart, you won’t be disappointed.
- Silverlight.chm. The Help file documentation. Many sections have example code.
For the purposes of this article, you want the Silverlight.js file in the Resources folder.
The HTML file
So that everyone begins the same, let me supply a base HTML file for the starter page I’ll use in this article (Listing 1).
If you save the code for Listing 1 to a file with an .htm or .html extension, either drag that file to a browser window or double-click the file in an Explorer window. You should see the browser window of your choice open and the text, "Hello World".
To add Silverlight to this page, you need to do four things:
- Add a link to Silverlight.js.
- Add a DIV tag for the ActiveX control.
- Instantiate a control into the DIV tag.
- Create an XML file to direct the control.
The first three are fairly simple and are highlighted in color in Listing 2.
The code shown in Listing 2 is the template that I use for pages. I tweak it from here, but for purposes of this article, you can use this code. I will explain the tweaks below.
If you have multiple canvases on your page, you will need multiple unique DIV tag IDs and unique variable names.
The following is a breakout explanation of each section in createObjectEx as used in this article. Changes to the files as advocated by the QuickStart will have similar sections.
The source defines the location of the XAML file controlling the ActiveX control. I have placed this in a subfolder named XAML and have given it the file extension .xml. Multiple canvas applications would need multiple XAML files.
The parentElement is a reference to the variable that the DIV tag defines for the control. Multiple canvas applications would need multiple DIV tags and, therefore, unique parentElements.
This ID is a unique ID for the object.
The width of the canvas-depends upon the project.
The height of the canvas-depends upon the project.
The color of the canvas itself, including the opacity. In this case, the opacity is 100% and the color is white.
If this is true and the background color of the canvas has an alpha value, Silverlight blends with the HTML page.
Framerate is the maximum number of frames to display per second. 24 is the default and the maximum is 64.
The version required to run the page.
The default values are listed.
I’ve glossed over “events” and shown the default for “framerate”. The documentation details other parameters in CreateObjectEx that you might want to look at after you get more involved with Silverlight. For the time being, what is here will get the job done.