Creating a Silverlight Web Part for SharePoint 2007

In this blog post I describe an approach to add a Silverlight Web Part in SharePoint 2007. Adding Silverlight Web Parts to SharePoint can really make magic to SharePoint, i.e. maps (my personal favorite topic), Web Parts with drag and drop support from the file system etc. I always create a Silverlight project and separate and load it to a web part. I describe my favorite approach:

1. Create a Web Part project, rename the Web Part and it’s files to something appropriate. I use Visual Studio 2008 extensions for Windows SharePoint Services 3.0 (version 1.2) in this example.
2. Create a folder name it Templates.
3. Create a folder name it ControlTemplates
4. Create a folder name it YourWebPart-name.
5. Choice File –> Add –> New Project. Choose web and give it a name.
6. Get rid of the Default.aspx file in the web project.
7. Add a User Control to the web project, get rid of the code behind and add your the reference to the web part assembly to the inherits of the file, example: <%@ Control Language="C#" AutoEventWireup="true"  Inherits="MyNameSpace.ClassName, AssemblyName, Version=1.0.0.0, Culture=Neutral, PublicKeyToken=3283a693cab37f84" %> See understanding SharePoint for more info. The nice part now is that you can start designing the user control as with any .aspx-file, well almost. Add your .xap file and Silverlight.js-file to this project. 
8. Add javascript and code for loading your silverlight control, i.e

   <div id="silverlightMultiFileUploadControlHost" >
           <object id="MultiFileUploader" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="450" height="280">
               <param name="source" value="/_controltemplates/mPost.MultiFileUpload/mpost.SilverlightMultiFileUpload.xap" />
               <param name="onerror" value="onSilverlightError" />
                <param name="initParams" value="MaxFileSizeKB=,MaxUploads=2,FileFilter=,ChunkSize=4194304,CustomParam=[site=<%=Site%>;docLib=<%=DocumentLibrary%>;httpService=<%=HttpService%>],DefaultColor=White" />
               <param name="background" value="white" />
               <param name="onload" value="pluginLoaded" />
                <param name="minRuntimeVersion" value="4.0.50401.0" />
   		  <param name="autoUpgrade" value="true" />
   		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.5040

   
   
   

   1.0" style="text-decoration:none">
    			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
   		  </a>
           </object>
           <iframe style='visibility: hidden; height: 0; width: 0; border: 0px'></iframe>
       </div>

   
   
   
   



9. Add properties to your .cs file. I always add a SPWeb property to access the web from the user control and make sure that the .designer.cs file has the same class name.



10. Go back to your web part project and add the following methods:
    
         protected override void OnLoad(EventArgs e)
    
            {
    
    
                ScriptManager scriptManager = ScriptManager.GetCurrent(Page);
    
    
                if (scriptManager == null) 
                {  scriptManager = new ScriptManager();
    
    
                    Controls.Add(scriptManager); 
                } 
            } 
            protected override void OnPreRender(EventArgs e)
    
            {
    
    
                base.OnPreRender(e);
    
    
                ClientScriptManager cs = Page.ClientScript; 
                if (!cs.IsClientScriptIncludeRegistered("sl_javascript"))
    
    
                    cs.RegisterClientScriptInclude(this.GetType(), "sl_ja vascript", "~/_controltemplates/mPost.MultiFileUpload/Silverlight.js");
    
    
                if (!cs.IsClientScriptIncludeRegistered("spsl_javascript"))
    
    
                    cs.RegisterClientScriptInclude(this.GetType(), "spsl_javascript", "~/_controltemplates/mPost.MultiFileUpload/SpSilverlight.js");
    
    
            }



11. Of course you need to change the script source to your path.



12. Add reference System.Web.Extensions



13. Choóse add existing item in your web part project. Add your user control as a link (we want to compile it with the web part assembly), also add a Silverlight.js and your .xap file the same way to this folder.



14. You’re done, all you have to do now is to load the user control to the web part in the CreateChildControls method like:
    

    mPost.MultiFileUploadWebPart.MultiFileUploadUC uc = (mPost.MultiFileUploadWebPart.MultiFileUploadUC)
                        Page.Page.LoadControl("~/_controlTemplates/mPost.MultiFileUpload/MultiFileUploadUC.ascx");
     Controls.Add(uc);

    
    

In 14 steps I can write shiny cool Silverlight web parts for SharePoint 2007. There are some steps, especially with the 5 part assembly that is a little tricky. Of course my favorite Silverlight web part is the one in SMIL and Silverlight Multi File Upload that has inspired this blog post. See http://slfileupload.codeplex.com/SourceControl/changeset/view/47874#1002455 for a working code example.

Technorati Tags: Silverlight,SharePoint 2007,User Control