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
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
First Silverlight Page
<div style="text-color:red"><script src="js/Silverlight.js"
<div style="text-color:green"><div id="Ag1Host"
var pe1 = document.getElementById("Ag1Host");
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
"Add a DIV
tag for the ActiveX control" is next and in green. This is a standard DIV
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
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.
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.
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.
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.