Publishing Silverlight Applications in SharePoint 2010

  • Article

In this blog post I’ll walk you through how easy it is to publish Silverlight applications to SharePoint 2010 by using the Visual Studio 2010 tools for SharePoint development.

This walkthrough requires: a local installation of either SharePoint Foundation 2010 or SharePoint Server 2010, Silverlight 3.0, and Visual Studio 2010. Please see https://msdn.microsoft.com/en-us/library/ee231582(VS.100).aspx for a full list of requirements. Once you have installed the prerequisites start Visual Studio as an administrator. (This is required to create SharePoint projects in VS.)

To begin, let’s create a simple Silverlight (SL) application. Create a new Silverlight Application project named “MySilverlightApplication” and uncheck the Host the Silverlight Application in a new website option in the New Project wizard. Because we're hosting the SL application in a SharePoint Web part, that option isn't required. On the MainPage.xaml, add a text box, button, and label control. In the button's click event, add code to copy the textbox’s text to the label’s content field. It should look something like this:

Next, we’ll create a SharePoint project to package and deploy the Silverlight app to our test server. To do this, click File -> Add  -> New Project… , select Visual C# -> SharePoint -> 2010, select the Module project template, and then name it “DeploymentProject”. Leave the other settings at their defaults and click OK. In the wizard that is displayed click the Finish button to add this second project to the solution. Notice that a Module1 project item is included in this new project. Feel free to expand the Module1 node and delete the unnecessary sample.txt file. Next, we’ll want to add the output of the Silverlight application to our package. To do this, select the Module1 node in Solution Explorer, select Project Output References in the Properties window, and then click the ellipsis (…) button.

Note: The Project Output References property of a SharePoint Item determines whether the output of a project is packaged as an element file, template file, root file, or other deployment type. These files will be packaged only if the item is included in the package. If you would rather include project output as an assembly to be deployed to the GAC or BIN folder, then use the Advanced tab in the Package Designer.

In the Project Output References dialog, click the Add button on the left. The new project output reference is automatically selected in the list. Choose ElementFile in the Deployment Type drop-down list. Then select the Project Name drop-down and choose the Silverlight project you added to the solution earlier. Here’s how it should look.

There are a number of places we can deploy our Silverlight XAP file to SharePoint. The web’s ClientBin folder is sometimes used, but we can’t use the WSP file or our tools to deploy it there. Another deployment location option is the SharePoint hive. The decision of where to place the file depends on the scope of your application. The most common and easily controlled location is a Document Library. Uploading your XAP files to this list makes it easy to control permissions to the application and keeps them all in one location that's easy to find and update.

For debugging purposes, let’s create a list using our deployment project. Right-click the DeploymentProject node in Solution Explorer and then select Add -> New Item. Select the SharePoint -> 2010 List Instance project item template, name it “XAPLibrary” and choose a “Document Library” type of list. In the wizard, change the name to “XAPLibrary”, choose “Document Library” as the type of list, and the relative URL for this list to “Lists/XAPLibrary” and then click Finish. This project item will automatically be packaged and deployed with the module we created earlier.

Now that we have a list to host the XAP file, we need to tell SharePoint where to deploy it. Expand the Module1 node in Solution Explorer and open the Elements.xml file. Add the File node to the Modules parent node using the following:

 <Module Name="Module1">
<File Path="Module1\MySilverlightApplication.xap" Url="Lists/XAPLibrary/MySilverlightApplication.xap" Type="GhostableInLibrary"/>
</Module>

The GhostableInLibrary type attribute is necessary so that SharePoint will create a list item for our XAP file on deployment.

That’s it! We’re ready to deploy. Right-click the DeploymentProject node in Solution Explorer and select “Set as StartUp Project”. Now, press F5 and the Silverlight application will be built, packaged into the DeploymentProject WSP, and then deployed to the SharePoint site. In addition, the browser will be opened to the home page of the site. For testing purposes, let’s add the Web part to this page. Click the Page tab in the ribbon and then click Edit to enable the page to be edited. Click the Insert tab on the ribbon which is now displayed and then click Web Part on the ribbon to bring up the Web part picker. In the Media and Content category select the Silverlight Web Part item and click Add. Enter the location of the XAP file in the URL text box (~site/Lists/XAPLibrary/MySilverlightApplication.xap) and click OK.

Once added, the Web part should appear on your site. Enter some text in the text box and click the button, and your text should be copied. You can now modify the SL application and redeploy it quickly to the site so that your changes are promptly reflected.

I hope this post helps you get started publishing Silverlight applications to SharePoint. For further information, please watch this informative video by Paul Stubbs “Developer Patterns to Integrate Silverlight with SharePoint 2010” in which he leverages the Visual Studio 2010 tools for SharePoint development.

Erik Cutts

Comments

  • Anonymous
    March 01, 2010
    Very, very nice. I could've used this a few months ago on another project. Very promising.

  • Anonymous
    June 17, 2010
    Really nice article.... its very very helpful for new comer in shilverlight and sharepoint.. thanks a lot my friend.... keep sending this kind of important articles....

  • Anonymous
    April 26, 2011
    Hi, at the time of deploying the feature, I am getting the following error. How do I resolve this? Error occurred in deployment step 'Activate Features': Failed to instantiate file "Lists/XAPLibrary/PathFINDER.EngagementRelevantElements.xap" from module "Module1": The specified list does not exist.

  • Anonymous
    June 07, 2011
    Shilpa, Does the document library exist at the location that you have specified? Sorry for the late response. -erik

  • Anonymous
    July 08, 2013
    Thank you very very much. This solution still worked in 2013!

  • Anonymous
    January 09, 2014
    Dear all, Can we add publishing module to sharepoint foundation 2010? If so please help me with it!