A First Silverlight Example: Creating a Web Site

7/25/2010 5:10:44 PM
I_section2_d1e918.html SilverlightSilverlight
To create Silverlight content, you first we need to create a Silverlight project. There are two ways to do this in Silverlight 2. The first is to create a web site and "just" use XAML and JavaScript in there. No compilation is needed, however your coding is limited to the scripting language. The second option is to create a web project, including compilation, but also offering .NET support. 

Thanks to the Silverlight SDK's Visual Studio template, both options consist of relatively few steps. If you are using Visual Web Developer Express Edition, you can't use a project, you need to create all of your files manually (and are limited to the first option). The best way to begin is to go to and download the book's samples and start with those files.

In Visual Studio, choose Filerightwards double arrowNew Web Site (not Filerightwards double arrowNew Project!). There, you will find a Silverlight Script Web entry (see Figure 1).

Figure 1. The Silverlight web site template in Visual Studio

The web site that the Silverlight template creates initially consists of the following files:


An HTML page that contains markup to load Silverlight content, including JavaScript code setting everything up


A JavaScript helper library that is used by the Default.html.js file


A sample XAML file


A JavaScript "code-behind" file for the XAML sample

On one of my systems, I kept getting strange error messages with previous Silverlight versions stating that Visual Studio could not access the Scene.xaml.js file, as it was called back then. I later found out that the guilty party was my antivirus software. By default, Windows does not show file extensions, so Scene.xaml.js shows as Scene.xaml. Because a JavaScript file may contain malicious code (especially if run locally), some viruses use this technique and my antivirus software wanted to protect me from that danger. All I could do at that point was move my Silverlight development into a secured environment and disable the resident shield of my antivirus software. With Silverlight 2, this has been fixed with the use of a different file naming scheme.

First, open the Default.html file and run the solutions (press F5 for debugging mode, Ctrl-F5 for release mode). A browser window will open, but instead of fancy Silverlight content, you will get a message stating that Silverlight needs to be installed. (If you have already installed Silverlight, you will immediately see the content, of course.) Figure 2 shows how this looks, regardless of what supported browser and operating system you are using.

The plug-in comes as an installation program; Figure 3 shows the Windows version (showing the incorrect version number, by the way, but this may be fixed once you get your hands on a Silverlight release). You may need to restart your browser afterward. After installing Silverlight, the content will appear, as Figure 4 shows.

Figure 2. The plug-in is missing (Safari on Mac OS X)

Figure 3. The Silverlight installer for Windows

Figure 4. The Silverlight sample page

Before we dive deeper into the world of Silverlight, let's have a closer look at the files that came with the template. We will not look at the XAML file (and the associated JavaScript script), because it uses quite a number of techniques that we will cover throughout this book. Let's start with the Default.html file (omitting some JavaScript code). It is reprinted in Example 1.

Example 1. The sample HTML file (Default.html)

So, quite a number of things happen in this file:

  • The Silverlight.js helper library is loaded with a <script> element.

  • The Scene.js JavaScript file (the "code-behind" script of the sample XAML file) is loaded with a <script> element.

  • The page contains a <div> element with ID SilverlightPlugInHost, which will later hold the Silverlight content.

You especially need to remember the ID of the <div> container because it will later hold the Silverlight file. However, you need to tell JavaScript (and the Silverlight) plug-in explicitly where to put the content. In previous versions, this was done in a file called Default.html.js; with Silverlight 2, the associated code resides directly within the <div id="silverlightPlugInHost"> element and is shown in Example 2.

Example 2. The JavaScript file that loads the Silverlight content (from Default.html)

<script type="text/javascript">
if (!window.Silverlight)
window.Silverlight = {};

Silverlight.createDelegate = function(instance, method) {
return function() {
return method.apply(instance, arguments);

var scene = new ScriptWeb1.Scene();

source: 'Scene.xaml',
parentElement: document.getElementById('silverlightPlugInHost'),
id: 'silverlightPlugIn',
properties: {
width: '100%',
height: '100%',
version: '1.0'
events: {
onLoad: Silverlight.createDelegate(scene, scene.handleLoad),
onError: function(sender, args) {
var errorDiv = document.getElementById("errorLocation");
if (errorDiv != null) {
var errorText = args.errorType + "- " + args.errorMessage;

if (args.ErrorType == "ParserError") {
errorText += "<br>File: " + args.xamlFile;
errorText += ", line " + args.lineNumber;
errorText += " character " + args.charPosition;
else if (args.ErrorType == "RuntimeError") {
errorText += "<br>line " + args.lineNumber;
errorText += " character " + args.charPosition;
errorDiv.innerHTML = errorText;
context: null

As you can see, the code first instantiates the Silverlight.Scene object, which we do not need at the moment, and then executes the Silverlight.createObjectEx() method. This method is solely responsible for initializing and loading XAML content with the help of the browser plug-in. The method expects an object as an argument that holds all relevant information. The syntax of the object notation using JSON (JavaScript Object Notation) as part of the JavaScript language syntax is as follows:

{property1: "value1", property2: "value2", ...}

The following properties are essential:


The ID of the <div> container where the Silverlight content will be shown on the page.


The URL of the XAML file to be loaded.


An identification for Silverlight content that will later facilitate JavaScript access to Silverlight.


A set of properties, including the dimensions of the content (width, height), and the background color (background).


The Silverlight plug-in version is at least required to run the example (part of the properties).

The events property is used to wire up events.

Since this first example contains a bit too much complexity for a simple "Hello World" file, we will now create our own Silverlight application. Create a new XML file and call it HelloWorld.xaml. The root element of every Silverlight XAML file is <Canvas> (this may be compared to a <div> element in HTML or to ASP.NET's <asp:Panel>). In there, you will put an orange rectangle (<Rectangle>) element and a text block (<TextBlock>) element. In the end, your markup should look like Example 3.

  • Example 3. A simple "Hello World" XAML file (HelloWorld.xaml)

    <Canvas xmlns="" 
    <Rectangle Width="300" Height="150" Stroke="Orange" StrokeThickness="15" />
    <TextBlock FontFamily="Arial" FontSize="56" Canvas.Left="25" Canvas.Top="40"
    Foreground="Black" Text="Silverlight" />

    IntelliSense will help as you type, as Figure 5 shows.

    Figure 5. IntelliSense supports Silverlight XAML markup

    The next file to be created is HelloWorld.html, which will contain both the HTML markup and the JavaScript code to load the XAML. You can use the Default.html file as a basis and remove all unnecessary elements (e.g., the extra JavaScript code related to the scene). Don't forget to provide the correct XAML URL in the source property. At the end, you should have something similar to Example 4. For brevity, we set the onError property (the Silverlight error handler) to null and removed onLoad, so errors are not specifically handled and no code is executed upon loading of the XAML file. You could, of course, also stick to the error handling code from Default.html.

    Example 3-4. A simple "Hello World" HTML file (HelloWorld.html)

    <html xmlns="">

    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript" src="Scene.js"></script>
    <style type="text/css">
    #errorLocation {
    font-size: small;
    color: Gray;
    #silverlightControlHost {
    height: 480px;
    width: 640px;


    <!-- Runtime errors from Silverlight will be displayed here.
    This will contain debugging information and should be removed or hidden when debugging
    is completed -->
    <div id='errorLocation'></div>

    <div id="silverlightPlugInHost">
    <script type="text/javascript">
    if (!window.Silverlight)
    window.Silverlight = {};

    source: 'Scene.xaml',
    parentElement: document.getElementById('silverlightPlugInHost'),
    id: 'silverlightPlugIn',
    properties: {
    width: '400',
    height: '300',
    version: '1.0'
    events: {
    onError: null
    context: null

    Running this example in the browser will work like a charm. If you still don't have the Silverlight plug-in installed, you will be prompted to do so, and then you will see the text and the orange rectangle, just as in Figure 6.

    Figure 6. The "Hello World" Silverlight application in a web browser

    The only file we haven't looked at yet is Silverlight.js. This JavaScript library takes care of several things: it tries to detect the web browser (unfortunately, it has the same habit as ASP.NET AJAX and only accepts Firefox of all the Mozilla browsers [e.g., SeaMonkey, the soon-to-be-defunct Netscape, and others]), provides the Silverlight.createObjectEx() method, and helps access the Silverlight content using a JavaScript API . Just copy the Silverlight.js file into all Silverlight applications to have this functionality.

Top 10
No Windows 7 Setup DVD Supplied With Your PC? No Problem!
Windows 8 : End Game? (Part 4)
Windows 8: End Game? (Part 3)
Windows 8: End Game? (Part 2)
Windows 8: End Game? (Part 1)
Motorola Xoom 2 - General Tablet Use
Nexus 7 Vs Kindle Fire
Quad Gods - The Mobile Chip Race Is Beginning
Linn Kiko – All-In-One Streaming System
Install Windows Vista Home Premium SP2 Fail, What Should We Do?
Most View
The Cat You Have To Have (Part 1)
Action Cam For Extreme Sports
SQL Server 2005 : Dynamic T-SQL - Why Go Dynamic?
How To Specify And Build A Media PC (Part 2) - Low-cost Streaming HTPC, High-End HTPC, Powerful Gaming HTPC Tower
SQL Server 2005 : Beyond OWC: Full-On OLAP Development (part 3) - XMLA at Your Service
Sony Xperia S
.NET security : Programming Isolated Storage
Cisco Linksys X3000 - The Link to Connectivity
Windows 7 : Preparing Disks for Use (part 3)
Active Directory Domain Services 2008 : Simulate a Resultant Set of Policy Using Group Policy Modeling
iPhone Application Development : Working with Text, Keyboards, and Buttons (part 4) - Hiding the Keyboard
Windows 7 : Protecting Your Computer While Browsing (part 1) - Viewing and Managing Add-Ons
iPhone Application Development : Creating a Multi-View Toolbar Application (part 2) - Instantiating the View Controllers
Asus Zenbook Prime UX31A Review
The best of the web (Part 4) - Storify, WorldWide Science, Kickstarter, Pinterest, Hipmunk, Deezer & Rapportive
AC Ryan Playon! HD2 Mini
Windows Azure : Blobs - Usage Considerations
Programming Microsoft SQL Server 2005 : CLR Stored Procedures and Server-Side Data Access
Windows XP : Troubleshooting and Recovering from Problems (part 2)
Samsung HMX-H400 Black : More Than Just Taking Snapshots