Silverlight SharePoint Web Parts

The Silverlight Web Part extensions for SharePoint are designed to make it as easy as possible for a developer to add Silverlight applications to SharePoint. The extensions provide 2 new Project Item Templates called “Silverlight Web Part” and “Silverlight Custom Web Part”.

Both of these Project Item Templates work in both Sandboxed and Farm solutions. Both templates will package and deploy your Silverlight application (.xap) into the SharePoint Solution Package (.wsp). They will also create a Web Part to host the Silverlight application. TheSilverlight Web Part will use the built-in Silverlight Web Part provided by SharePoint. TheSilverlight Custom Web Part will use a Sandboxed Visual Web Part to host the Silverlight application. And finally, the template will also create a test harness page in the Site Pages library that hosts the Silverlight Web Part.

The Silverlight Web Part is designed to be very lightweight and as a result using very little or no custom code to create the Web Part. This makes it easy for developers to understand how to use and extend their code after adding the Silverlight Web Part.

The Silverlight Custom Web Part takes advantage of the Sandboxed Visual Web Part that was released by the Visual Studio team. This Web Part enables developers to extend the Web Part for advanced scenarios such as adding JavaScript/JQuery and other controls in addition to the Silverlight application.

Installing

1. Install theVisual Studio 2010 SharePoint Power Tools.
   http://visualstudiogallery.msdn.microsoft.com/en-us/8e602a8c-6714-4549-9e95-f3700344b0d9/file/30461/0/SpPowerTools_x86_enu.EXE
2. Install the Silverlight Web Part Extension by double-clicking on theSharePoint.Silverlight.vsix file.
3. Click Install
   
4. Click Close.
   
5. Verify it is installed. Open Visual Studio and Open the Extension Manager from the Tools-Extension Manager menu.

Getting Started

The steps are the same if you are creating a Silverlight Web Part or a Silverlight Custom Web Part.

1. Open Visual Studio and create a new Empty SharePoint Project (or any project should work as well).
2. Add a new Silverlight 4 Application project to the solution. Or you can start with a Silverlight project and add a SharePoint Project to the Solution. The order you create them in doesn’t matter. Uncheck the option to Host the Silverlight application in a new Web site.
3. Add a Silverlight Web Part Project Item or a Silverlight Custom Web Part to the SharePoint project.
4. Set the SharePoint project as the StartUp Project. Press F5 to deploy the solution to SharePoint.
5. Browse to the new page created in the Site Pages library. This should be the first page at the top of the library.

  If you do not have a Silverlight Application in your solution you will be prompted to create a new one. If you have more than one Silverlight Application you will be prompted to create a new one or pick one of the existing projects.

Example Silverlight Web Part project

Example Silverlight Custom Web Part project

How it works

So how does the Silverlight extension work? The extensions are doing the same thing that you can do manually. But by have the process of creating a Silverlight Web Part automated it allows you to focus on the application and not the plumbing of running it in SharePoint.

               
The extensions perform the following actions. First they create a SharePoint Module project item. This Module is responsible for deploying the Silverlight .xap package to SharePoint. By default it is deployed to the Master Page Galley/ClientBin folder. A sub folder is created based on the SharePoint package name of the project. The Module is also responsible for building the Silverlight project if it is dirty. Next a Web Part is created. Depending on the project item type either a Silverlight Web Part or a Custom Web Part will be created. Finally a test harness page is created that hosts the Silverlight Web Part. This makes it easy to run and debug your Silverlight applications.