RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Catching the (Silver) Light : Page 2

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

Adding Silverlight
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, as you can see in the following code:

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
   Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
         First Silverlight Page
   <div style="text-color:red"><script src="js/Silverlight.js" 
     Hello World
    <div style="text-color:green"><div id="Ag1Host" 
     <script type="text/javascript">
       var pe1 = document.getElementById("Ag1Host");
    <div style="text-color:blue"><script>    
      {source: 'xaml/HelloWorld.xml', 
The preceding code is the template that I use for pages. I tweak it from here, of course, but for the purposes of this article, you can use this code. I will explain the tweaks below.

"Add a link to Silverlight.js" is in red, and is simply a link to the location of the Silverlight.js file mentioned in the downloaded resources. I have a js folder containing any external JavaScript files, and that's where I put Silverlight.js, hence the js/Silverlight.js reference.

"Add a DIV tag for the ActiveX control" is next and in green. This is a standard DIV tag declaration with an ID label of your choice. I chose a background of white just because that's the normal color I use for article pages. Next is a bit of JavaScript that declares a variable you'll be using in a minute. The variable is the document element defined by the ID label.

If you have multiple canvases on your page, you will need multiple unique DIV tag IDs and unique variable names.

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.
"Instantiate a control into the DIV tag" is the most complex part of the HTML side of this process and is in blue. I'll explain the code, but remember this is a template and you can therefore just drop it into place. You can perform this instantiation in a couple different ways. The method used here is the most complex, but gives you the most control. In contrast, the QuickStart you downloaded with the SDK advocates using an external JavaScript module. If you have multiple Silverlight canvases you will end up with either multiple external files or multiple sections in one external file. I've chosen to keep this all inside a single HTML file. The approach to take depends on how you plan to present and use your site.

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.

   source: 'xaml/HelloWorld.xml'
The source defines the location of the XAML file that Silverlight uses to control the ActiveX object. 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 DIV tag for the control. Multiple canvas applications would need multiple DIV tags and, therefore, unique parentElements.

This is a unique ID for the Silverlight control.

The width and height of the canvas depend upon the project.

This sets the color of the canvas itself (white in this case). Note that the color string includes opacity, which in this case is 100 percent.

If this value 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 (used here) and the maximum is 64.

The version specifies the minimum version of Silverlight required to run the page.

The code lists the default values for events—which I've glossed over for now. The documentation details other parameters to CreateObjectEx that you might want to look at after you get more involved with Silverlight, but for the time being, this will get the job done.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date