Build a Basic Example
All HTML files that host Silverlight controls have a few common characteristics that you'll need to include those in your code. First, you need to include a <script>
reference to Silverlight.js
. Next, you need to have a named HTML element such as a <div>
that has an id
"Simple.xaml", // Your XAML object.
// DOM reference to hosting DIV tag.
"SimpleEllipse", // Unique control ID value.
//If true, will prompt user to install
// if they don't have Silverlight.
background:'#FFFFFFFF', // ARGB Background color of control.
isWindowless:'false', //False, opaque bg
framerate:'24', // MaxFrameRate property value.
version:'0.9' // Control version to use.
onError:null,//JS method to call on error
onLoad:null//JS method to call on load
In your createMySilverlightControl
function, call Sys.Silverlight.createObject()
, which accepts parameters that define what XAML file to use, some properties specifying where and how you want your Silverlight application to run, and any custom parameters you want to pass in to it. The Simple.html
file shown above references the Simple.xaml
file shown below:
<Canvas Width="100" Height="40"
<Ellipse Width="100" Height="40"
|Figure 1. Simple Ellipse: Here's a simple ellipse drawn by Silverlight in Firefox.|
Together, these two XAML and HTML files provide a minimal example of a Silverlight application. This simple demo doesn't do much—but it does display the green ellipse shown in Figure 1
The XAML code creates a 100 x 40-pixel Canvas control containing a green ellipse with a black border. It has no defined interactivity; in other words, clicking on it or mousing over it doesn't do anything. For a primer on how XAML is structured, take a look at the article Developing Lookless controls with WPF
. For a list of elements supported in Silverlight—a fairly small subset of those supported in WPF—take a look at the Silverlight 1.0 reference.