Friday, September 25, 2009

How To: Integrating Silverlight User Control with SharePoint WebPart (MOSS 2007)

Silverlight with MOSS 2007
Developing a webpart may be very simple. Likewise, Developing a Silverlight application also will be very simple. But, If you are going to integrate both areas, that will be difficult little. Here, I am going to tell you that what are necessary steps that needs to be followed, while integrating the MOSS & SILVERLIGHT.

OK. See the steps below. (I assumes that you are familier with creating SharePoint webpart & creating sivlerlight Web applications.)

1. Whenever you are creating Silverlight applications, you can see a "Silverlight.js" file in your "Web" folder. For example, if your application name is "HelloWorld", your visual studio will create another folder with the name of "HelloWorld_web" or "HelloWorldWeb". Within this folder, you can see a file "SilverLight.js". Copy this file and paste it into "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033". (Note: you should paste that file, only into this folder. Else, you will get an error".

2.  Create an Silverlight application and generate a XAP file.

3. Go to "c:\Inetpub\wwwroot\wss\VirtualDirectories\7070" and create a folder named "ClientBin" and give permission to Read & Write (for everyone). 

4. Go to IIS 

5. Go to Your SharePoint portal and make the "ClientBin" folder as a Virtual Directory.

6. Copy the Silverlight Application DLL & XAP file into this ClientBin folder.

7. Modify the Web.Config file to integrate the Silverlight. You can download a sample web.config file in the "download" section of

8. Create a Webpart. You can use WSPBuilder to create a Webpart. You can download a WSPBuilder from

9. Add 2 references in WSP Project (System.Web.Extensions & System.Web.Silverlight)

10. In the WebpartCode, you must inherit the below 2 namespaces.
a. using System.Web.UI.SilverlightControls;
b. using System.Web.UI.WebControls;

11. Write a code to call the XAP file within the "CreateChildControls" method like. 
Silverlight sl = new Silverlight(); 
sl.ID = "MYSL"; 
sl.Source = "/ClientBin/SenSLMOSS.xap"; 
sl.Height = Unit.Pixel(420); 
sl.Width = Unit.Pixel(420); 

12. "ScriptManager" code also should be placed inside the WebPart code. See the sample code below and this code should be inside the "OnLoad" method, like,

  protected override void OnLoad(EventArgs e) 
 if (!_error) 
ScriptManager sm = ScriptManager.GetCurrent(this.Page); 
if (sm == null) 
sm = new ScriptManager(); 
Controls.AddAt(0, sm); 
 catch (Exception ex) 

13.  Add & Deploy the WSP Webpart using stsadm command. 
(stsam -o addsolution -filename "C:\SLMOSSWebPart.wsp")

14. Create a "WebPart page and insert this webpart into that newly created page.

15. You will see an amazing SilverLight Page.

Thats  it...

No comments:

Post a Comment