How To Embed Silverlight Into a Webpage

Since we've started posting Silverlight tutorials, I've had to figure out how to get Silverlight applications embedded into our blog. Needless to say, I found the process a lot harder than it should be. Visual Studio provides a test page as part of a default Silverlight project, but what if you want to take the Silverlight application and put it in a blog post like we do? This tutorial will go through all code changes, files needed, and new code required to easily embed your Silverlight apps into existing webpages.

If you're new to Silverlight, I would strongly recommend reading our earlier tutorial, Getting Started With Silverlight. All of the examples in this tutorial were created using Visual Studio 2008 beta 2 and Silverlight 1.1 Alpha Refresh.

Required Files
Let's start by figuring out what files are needed for a Silverlight application. When you create a new Silverlight project with Visual Studio, it creates all sorts of files - most of which aren't needed to display Silverlight. At a minimum, the only two files you'll need are the XAML file and your code behind file. I use C# for my code behind so I'll have a DLL. If you used Javascript, you'll have a JS file. When you build the Silverlight project, Visual Studio is going to put the the code behind in a folder named "ClientBin" inside your project directory.

The Javascript
Javascript makes up the bulk of getting Silverlight into a webpage. You'll notice that Visual Studio also outputs a file named "Silverlight.js". You only need one of these files for each webpage - even if you have multiple Silverlight apps on a single page. You'll want to put this in a script tag somewhere in your webpage - preferably up in the head. If you don't have access to the head tag - like in a blog post - just stick the script tag at the top of the post.


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

The other Javascript file Visual Studio makes for you is the one for the test page. We don't need everything in there, so let's just strip out the function that matters.

function createSilverlight(){ Silverlight.createObjectEx({ source: "Page.xaml", parentElement: document.getElementById("SilverlightControlHost"), id: "SilverlightControl", properties: { width: "100%", height: "100%", version: "1.1", enableHtmlAccess: "true" }, events: {} });}This function will only work for one Silverlight control per page, so let's modify it to work for multiple applications.
function createSilverlight(source, parent, id){ Silverlight.createObjectEx({ source: source, parentElement: document.getElementById(parent), id: id, properties: { width: "100%", height: "100%", version: "1.1", enableHtmlAccess: "true" }, events: {} });}

Now the source, parentElement, and id are passed in as parameters instead of being hard coded inside the function.

Modify the XAMLDepending on where you're putting your files, you might have to modify the XAML file to point to the correct location of the code behind file. The default page.xaml file that Visual Studio generates will look something similar to this.

<Canvas x:Name="parentCanvas" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="Page_Loaded" x:Class="EmbedSilverlight.Page; assembly=ClientBin/EmbedSilverlight.dll" Width="640" Height="480" Background="White" >
</Canvas>

The part of this that probably needs modified is x:Class. The assembly portion of x:Class will need to changed to point to wherever you put the code behind on your webserver. Remember, this path is relative to the location of the parent webpage and not the location of the XAML file.
The HTMLWe've got the necessary files, the Javascript, and we've made the change to our XAML file. We are now ready to create some HTML code to actually display our Silverlight applications. I'm going to reuse a small Silverlight app that was created for an earlier tutorial.
In order to embed Silverlight into a website, we first need a parent element to stick it in - a div. Each parent element will need a unique id.

<div id="Example1Host" style="width:120px;height:44px;"> <script type="text/javascript"> createSilverlight("/pathToSilverlight/Page.xaml", "Example1Host", "Example1"); </script></div>Here's the output of the above HTML code using my example application.


So what if you want two of these? All you need to do is duplicate the above code, but with a different id.

<div id="Example1Host" style="width:120px;height:44px;"> <script type="text/javascript"> createSilverlight("/pathToSilverlight/Page.xaml", "Example1Host", "Example1"); </script></div><div id="Example2Host" style="width:120px;height:44px;"> <script type="text/javascript"> createSilverlight("/pathToSilverlight/Page.xaml", "Example2Host", "Example2"); </script></div>