Embedding a Silverlight control into a page

Step 1: Attach the Silverlight control

First, we need to attach the silverlight control to a location where it can be accessed from.  For example, I have attached the color picker control to this page.  Just download it using this link and attach to a page on your own site.

Step 2: Create a template to embed the Silverlight control

Next, we need to create the HTML markup for embedding the sliverligth control.  The easiest way to achieve this is to create template (e.g. Template:SilverlightEmbed).  This will make it easy to reuse the template as needed.  The following template is a little bit more sophisticated to make our lives even easier.  It can either be used with an arbitrary URI (e.g. 'http://myserver/folder/ColorPicker.xap') or simply with the name of a Silverlight control that is attached to the current page (e.g. 'ColorPicker.xap').

/***
    USAGE:

    SilverligthtEmbed(source, width, height)
        Embed a Silverlight control on a page.
    
    PARAMETERS:

    source : str
        Source URI where the Silverlight.xap file is located.  If uri is not a valid URI, it is assumed to be the name of
        a file attachment on the current page.

    (optional) width : num (default: 450)
        Width in pixel or percent for the Silverlight control.

    (optional) height : num (default: 400)
        Height in pixel or percent for the Silverlight control.

***/

// check if uri parameter points to a 
var source = $0 ?? $source;
if(!uri.isvalid(uri)) {
    let source = page.files[source].uri;
}

// embed silverlight code
<object data="data:application/x-silverlight," type="application/x-silverlight-2" width=($1 ?? $width ?? 550) height=($2 ?? $height ?? 400) > 
    <param name="source" value=(source) /> 
    <param name="background" value="white" /> 
    <param name="minRuntimeVersion" value="2.0.31005.0" /> 
    <param name="autoUpgrade" value="true" />     
    <a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;"> 
        <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/> 
    </a> 
</object> 

To install this template on your site, follow these steps:

1. Click on the 'View Source' icon in the top-right corner of template code shown above.  A new window will pop-up.  Copy all the contents of the template from that window.
2. Now go to http://your-site/Template:Silverlight (where your-site is the location of your site)
3. Editor should have opened automatically, if not open it.
4. Remove everything from the contents of the page except the title.
5. Make sure the edit cursor is on an empty line below the page title.
6. From the styles menu, select 'DekiScript'.
7. Now paste the template code into the editor and save the page (Note: make sure to paste in WYSIWYG mode, not in source mode).
8. You should see the code you just pasted without any error messages.  If an error message is show, repeat the above steps again.

Step 3: Embedding the Silverlight control

Now, we're ready to embed our silverlight control on the page.  This task is trivial thanks to the template we created in step 2.  Edit the page where you added the Silverlight control to.  Put the cursor on an empty line and select the DekiScript style from the dropdown menu.  Enter the following code (adjust the name of the control if needed) and save the page.

SilverlightEmbed('ColorPicker.xap')

Here is what you should be seeing.

Conclusion

Embedding Silverlight controls is easy to do, but creating a template makes it even easier.  There is a myriad of uses for the template and it is a great starting point to build on.  Hope you found it useful and let us know what you've built!