Deploy Silverlight Application using SharePoint 2010 Project

Tweet

In this post we will see how to deploy Silverlight Application using SharePoint Project in Visual Studio 2010. The first step is to ‘Create a Silverlight Project’. I have already demonstrated one of my Silverlight applications which shows Plane Projection capabilities in Silverlight Silverlight 3D - Using Plane Projection. You can refer to that article or use your own Silverlight project for this example. I will be using the project I created earlier for this demonstration.

So let’s create an ‘Empty SharePoint 2010 Project’ with the name ‘DeploySilverlightApp’ as shown below –

Click ‘OK’ and choose ‘Deploy as a Sandboxed Solution’ option by providing SharePoint Site URL  –



Now your project will look like the following –



Now let’s add a ‘Module’ to our SharePoint project. The modules are used to deploy the files to SharePoint sites. To add a module, right click the SharePoint Empty project and add a new item. Choose ‘Module’ from the SharePoint > 2010 section. Name the module as ‘SLAppModule’.

Now this will display Elements.xml file. From the project under solution explorer, delete ‘Sample.txt’ file and also delete the entry –

<File Path="SilverlightAppModule\Sample.txt" Url="SilverlightAppModule/Sample.txt" />

from the Elements.xml.

The next step is to add our existing Silverlight application to our solution. Right click the Solution and click on ‘Add Existing Project’. Browse the project to add. Now let’s add the following code in between <Module></Module> and save the file –

<File Path="SLAppModule\SLDataGridExample.xap" Url="_catalogs/masterpage/SLDataGridExample.xap" />

Right click the ‘SLAppModule’ and go to properties. In the properties window, click on ‘Project Output References’ and click on the button in front of it. This will bring up a dialog box. Click on ‘Add’ button. Now in the ‘Deployment Type’ choose ‘Element File’ from the dropdown list. Then from the ‘Project Name’ dropdown box, choose Silverlight application as shown below –

Now build your solution and press ‘F5’ which will deploy the ‘.XAP’ to the SharePoint site. Once the deployment is over, it will open a site to which we have just deployed the .XAP file.

Now go to ‘Site Actions’ Menu and click on ‘Site Settings’. This will display the site settings page. Go to ‘Galleries’ section and click on Solutions as shown below –



In the solution page, you will see the ‘SLDeployApp.wsp’ file as shown below –

Now let’s go to our browser URL and modify the URL to verify the .XAP file –

‘http://localhost:21068/_catalogs/masterpage/Forms/AllItems.aspx’

You will see the ‘SLDataGridExample.xap’ file. Let’s use this XAP file in our page. Click the .XAP file dropdown box and click on ‘View Properties’. This will display the properties window. Right click ‘SLDataGridExample’ and click on ‘Copy Shortcut’.

Now go to the home page and click on ‘Edit’ page button. Go to ‘Insert Tab’ and click on ‘Web Part’ button. Choose ‘Media and Content’ category > ‘Silverlight web part’ as shown below –

Note: If for some reason, you are unable to see the Silverlight Web Part, check my article Silverlight Integration with SharePoint 2010 to see how to enable this feature.

Click on the ‘Add’ button. It will ask you for an URL. Paste the URL which we copied some time back and click the ‘OK’ button. Here’s the output –



Tweet