How to Create a Silverlight Webpart.

Most of the people ask me how to integrate silverlight in sharepoint. In my previous post I explained about rendering silverlight content in a sharepoint page.

This time i'll explain you how we can render silverlight content in a sharepoint webpart where we can display individual silverlight content in a webpart rather than rendering silverlight for total Sharepointpage.

Here are the Steps for creating silverlight web part.
1) Open visual studio and create a new project by selecting web part template. As shown in the below figure.


2) Add the Silverlight files Scene.js, Scene.xaml, Silverlight.js to the project as shown below.

After adding the silverlight files to the project set the “Build Action” property of each file to “Embedded Resource”.


3) We added silverlight files in to the assembly by making the property to “embedded resource”. To expose the file to a web request we need to add the following code in .cs file .These entries expose the embedded resource to the “ Client Script Manager” can get the file and know what kind of file it is.
[assembly: WebResource("Otherswebpart.Silverlight.js", "text/javascript")]
[assembly: WebResource("Otherswebpart.Scene.js", "text/javascript")]
[assembly: WebResource("Otherswebpart.Scene.xaml", "text/xml")]
The code in my .cs file. I took Otherswebpart as my name space. We have to add assembly level information just above the name space as shown in the figure.

4) We said to the assembly by the above lines now we have to register the script files to the page before the files are used. So we need to add the following lines of code in the method called “OnPreRender”.
My method in the .cs file has the following code.
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);


this.Page.ClientScript.RegisterClientScriptResource(GetType(), "Otherswebpart.Silverlight.js");
this.Page.ClientScript.RegisterClientScriptResource(GetType(), "Otherswebpart.Scene.js");

}

The above code explains registering of my script files to the page before rendering.

5) Finally we have to render the Silverlight content. So I added the code which we found in the default.html.js file. The reason I wrote the every line of default.html.js file instead of calling “CreateSilverlight()” method is we require the source of the ” page.xaml” which is embedded in the assembly.

So my render method looks like the following.




A) The text which is in yellow colour describes the source of our “Scene.xaml” file.
B) The property isWindowless:’True’ allows us to overlap our .net controls on to the silverlight content. (Add this property it doesn’t come by default.)

6) Finally we have to build and run the project.
Before that we have to set one more property. Go to the project properties and select the debug tab and set the property “start browser with URL” to your SharePoint site as shown in the below figure.


By doing this we should be able to see the output of the web part in our SharePoint site.
Check the Output in my site which is having “Otherswebpart webpart” which is having silverlight content and with one silverlight button.



Cheers Now Give a try with this. in my next post i'll explain how to integrate silverlight webpart with smartpart.