Getting started with Silverlight 3 and SharePoint

Recently I have been focusing on creating some Silverlight charts using the ‘Silverlight Toolkit’ from Codeplex (see the link in the instructions below).

Once I had created my first chart I wondered how to get it to display in SharePoint. It seems there are a number of options for displaying a Silverlight application (xap) in a SharePoint web part.

I found lots of blog posts that described separate bits of configuring I needed to do to get Silverlight working happily in SharePoint. I’ve decided to create a getting started list of what you need to do to get Silverlight installed and how to display your xap file with the built in ‘Content Editor Web Part’. I have linked to other blog posts where necessary.

Configuration

1. Download and install the Silverlight 3 runtime from silverlight.net –

http://silverlight.net/getstarted/silverlight3/

2. Download and install the Silverlight 3 SDK and tools for Visual Studio from the silverlight site – 

http://silverlight.net/getstarted/

3. <Optional> Download and install the Silverlight Toolkit (If you want to use some of these cool and free Silverlight controls) –

http://silverlight.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=30514

4. If you are running Windows Server 2008 you can skip this step as the MIME types should have been automatically added to IIS7 for you. For server 2003 users you will need to add the Silverlight MIME types to IIS6, follow the instructions here –

http://blogs.technet.com/jorke/archive/2007/09/11/silverlight-mime-types-in-iis6.aspx

5. This step involves configuring the web.config files for the SharePoint sites that you wish to run your Silverlight applications in. Follow the instructions on this blog post –

http://blogs.msdn.com/steve_fox/archive/2009/03/11/amending-the-web-config-file-to-support-silverlight-development-on-sharepoint.aspx

6. Ensure that the assembly System.Web.Silverlight is in the global assembly cache. If not then you can find it at the following location –

C:\Program Files\Microsoft SDKs\Silverlight\v3.0\Libraries\Server

7. Configuration complete! – now read on to the deployment section

Deployment

To get your silverlight xap displaying on a SharePoint page follow the steps below. In terms of where to store your .xap file there are a number of places for you to choose. Some people recommend storing it in a folder called ‘ClientBin’ in the IIS virtual directory of the SharePoint web application but I was not able to get this working. I opted for the simplest method which was to store the file in a document library.

1. Upload your Silverlight xap file to a document library

2. Switch to edit mode for your SharePoint page and add a Content Editor Web Part

3. Insert the following HTML code – 

<!–<div width=”600px” height=”100px” id=”silverlightControlHost”>
<object data=”data:application/x-silverlight”, type=”application/x-silverlight-2″ width=”450″ height=”450″>
<param name=”source” value=”http://yoursite/sites/charting/XAPs/SimpleSilverlightChart.xap”/>
<param name=”onerror” value=”onSilverlightError” />
<param name=”background” value=”white” />
<a href=”http://go.microsoft.com/fwlink/?LinkID=108182″ style=”text-decoration: none;”>
<img src=”http://go.microsoft.com/fwlink?LinkID=108101″ alt=”Get Microsoft Silverlight” style=”border-style: none”/>
</a>
</object>
<iframe style=’visibility:hidden;height:0;width:0;border:0px’></iframe>
</div> –>

Remember to remove the comments from the above code and replace the param value=”” with the url to your document library and xap file.

4. Click apply and save the changes to your content editor web part

5. If all went well you should be seeing your Silverlight application displaying correctly!

Note: You may need to play around with the width and height of both the <div> and <object> tags to size them correctly for your Silverlight application.

Good Luck! 🙂