Hosting Silverlight in the Browser

You don’t need any special software to be able to use and build Silverlight applications other than the Silverlight plug-in itself and the Silverlight.js file that manages downloading and installing the plug-in for clients that don’t have it. You can use any software for building Web sites to build Silverlight sites, from Notepad to Eclipse to Expression Web or Expression Blend—it’s really up to you.

This section presents a basic primer that will show you what you need to do to begin to use Sil-verlight. So far in this book, you’ve been using an Expression Blend or Visual Studio template to do the hard work for you, but now let’s take a look at what it takes to get a simple Silverlight site up and running without any tools other than Windows Explorer and Notepad.

The first and most important file that you will need is the standard Silverlight.js file. This is available in the Silverlight Software Development Kit (SDK), which you can download from the Web site https://www.microsoft.com/silverlight.

Next, you’ll need to create an HTML file that will reference this JavaScript file. You’ll host the Silverlight control in this page. Here’s an example:

<HTML> 
   <HEAD> 
      <script type="text/javascript" src="Silverlight.js" /> 
   </HEAD> 
   <BODY> 
   </BODY> 
</HTML>

The Silverlight.js file contains methods called createObject and createObjectEx that you can use to instantiate Silverlight. The difference between these is that createObjectEx can use the Java-Script Object Notation (JSON) to serialize the parameters.

These functions take a set of parameters that are used to instantiate the control. The parameters are described in Table 5-1.

Cc500343.Table_C05625396_1(en-us,MSDN.10).png

Table 5-1 Parameters for createObject and createObjectEx

Please note that the width, height, background, framerate, iswindowless, enableHtmlAccess, version, and inplaceInstallPrompt properties are handled within a properties array when creating an instance of the control, and the onLoad and onError are handled within the events array.

Following is an example:

Silverlight.createObject( 
    "Scene.xaml", 
    document.getElementById("SilverlightControlHost"), 
    "mySilverlightControl", 
    { 
        width:'300', 
        height:'300', 
        inplaceInstallPrompt:false, 
        background:'#D6D6D6', 
        isWindowless:'false', 
        framerate:'24', 
        version:'1.0' 
    }, 
    { 
        onError:null, 
        onLoad:null 
    }, 
    null);

This call is typically hosted in an external file, and the de facto standard for this file is named createSilverlight.js. You’ll need a reference to this in your HTML to be able to access the function.

So, let’s now return to our HTML page and set it up so that it can handle this Silverlight control. You see that when the Silverlight component was named, it was expecting a parent DIV called SilverlightControlHost to host it. This is achieved using the ID property of the DIV. Here’s the full HTML code:

<html> 
<head> 
   <script type="text/javascript" src="Silverlight.js"></script> 
   <script type="text/javascript" src="createSilverlight.js"></script>
</head> 
<body> 
   <div id="SilverlightControlHost"> 
      <script type="text/javascript"> 
         createSilverlight(); 
      </script> 
   </div> 
</body> 
</html>

Finally, you’ll need the XAML source for your Silverlight control. This sample calls for a XAML file called Scene.xaml.

Following is a simple XAML file that contains a “Hello, World!” TextBlock:

<Canvas xmlns=https://schemas.microsoft.com/client/2007
        xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"> 
  <TextBlock>Hello, World!</TextBlock> 
</Canvas>

And that’s everything that you need to get a Silverlight application set up and ready to go. As you add more functionality to your application, your code will become more complex, but these four files—the HTML host, the XAML file, createSilverlight.js, and Silverlight.js—are common to every project.

< Back      Next >

  • Last updated on