Silverlight webpart for SharePoint:

In this post, we are going to see integrating the webpart with Silverlight contents on SharePoint Site.

 For that, we need to combine all required java script and Xaml files (used to display the Silverlight content) in to single assembly without any dependent files. It makes sense to embed the Xaml and java script file as a resource and reference it in programming using the WebResource.axd handler mechanism for extracting embedded resources.

 

I list out the following steps to add the Silverlight Content to SharePoint WebPart,

1.      Create a Webpart project and create or add the required java script and Xaml files to the project.

I used three files, are Silverlight.js, Scene.js and Scene.xaml

2.      Set the BuildAction property to “Embedded Resource” in properties window for each java script and Xaml.

This will use to include the files as Resources in an assembly.

 

                     im11.jpg  im2.jpg

 

3.      Add the assembly-level attribute System.Web.UI.WebResource to grant permission for these resources to be served by WebResource.axd and to associate MIME type for the response.

 [assembly: WebResource("Ktskumar.SLContent.Silverlight.js", "text/javascript" )]

[assembly: WebResource("Ktskumar.SLContent.Scene.js", "text/javascript")]

[assembly: WebResource("Ktskumar.SLContent.Scene.xaml", "text/xml")]

Ktskumar.SLContent represents the namespace, Now JavaScript and Xaml files are compiled into my assembly as embedded resources.

 

4.      Now, we can use the RegisterClientScriptresource() method of the Page.ClientScriptManagerclass to rendered the page with the referenced files.

 this.Page.ClientScript.RegisterClientScriptResource(GetType(), “Ktskumar.SLContent.Silverlight.js”);

this.Page.ClientScript.RegisterClientScriptResource(GetType(), “Ktskumar.SLContent.Scene.js”);</span

Include the above lines in the PreRender method to register the javascript files for the webpart.

 

5.      Add the following lines to the RenderWebPart method to host the <div> tag and call the Silverlight content to the webpart,

 string strLoad = “Silverlight.createDelegate(scene, scene.handleLoad)”;

output.WriteLine(“<div id=’” + this.ClientID + “‘ Style=”Width:500px;Height:200px”>”); 

output.WriteLine(“<script type=’text/javascript’>”);          

output.WriteLine(“if (!window.Silverlight)”);

output.WriteLine(“window.Silverlight = {};”);

output.WriteLine(“Silverlight.createDelegate = function(instance, method) {“);

output.WriteLine(“return function() {“);

output.WriteLine(“return method.apply(instance, arguments);”);

output.WriteLine(“}}”);

output.WriteLine(“var scene = new Scene();”); 

output.WriteLine(“Silverlight.createObjectEx({“); 

output.WriteLine(“source: ‘” + this.Page.ClientScript.GetWebResourceUrl(GetType(), “Ktskumar.SLContent.Scene.xaml”) + “‘,”); 

output.WriteLine(“parentElement: document.getElementById(‘” + this.ClientID+“‘),”);

output.WriteLine(“id: ‘” + this.ClientID + “_ctrl’” + “,”);

output.WriteLine(“properties: {width:’100%’, height:’100%’, version:’1.0′ },”);

output.WriteLine(“events:{ onLoad: “+strLoad+“, onError: null  },”);

output.WriteLine(“context: null”);

output.WriteLine(“});”); 

output.WriteLine(“</script></div>”);

 Now you can install webpart to the SharePoint and see the Silverlight contents present in the SharePoint WebPart.

Coming soon, I will upload the source code for this webpart and more activities to come on Integrating the Silverlight with SharePoint. So always tuneup this blog.

Click here to download the source code for the above example.

 

3 thoughts on “Silverlight webpart for SharePoint:

  1. Nirmit Patel

    I noticed that you supplied us with sample code above. I am fairly new to sharepoint and created a silverlight project in C# (Working). Would the above steps still work? And also the sample code you showed, could you update that by also referencing what file those changes should be done within? Thank you for the post….its pointed me in the right direction.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>