How to: Use the Silverlight web part with Visual Studio 11

Posted Wednesday, January 25, 2012 8:11 AM by CoreyRoth

Visual Studio 11 adds a new feature that makes working with Silverlight in SharePoint 2010 a bit easier.  The new Silverlight Web Part feature automates deploying your Silverlight applications to SharePoint and can really save you a bit of time.  We took a look at how the Visual Web Part works in VS11 a while back.  Now, let’s see what happens when we use Silverlight. 

To work with Silverlight,you can either create a new project or simply add a new item to an existing project.  I’ll start by creating a new project by choosing the item SharePoint 2010 Silverlight Web Part.  Remember the number of project types has been reduced in VS11.

VS11DPNewSharePointSilverlightProject

After you provide the usual SharePoint specific information, a new screen will prompt you for information on your Silverlight application.  You can use an existing application or let it create a new project for you.

VS11DPNewSharePointSilverlightWebPart

You have a choice of Silverlight version 4.0 or 5.0.  Once you finish, you’ll have two new projects to work with.  The designer opens up and then we’ll just create a simple Silverlight application.

VS11DPSilverlightApplication

Now, let’s take a look at the files.  They prove to be a lot simpler than you might think.

VS11DPSilverlightSolutionExplorer

If we click on the web part itself, we actually see the contents of the .webpart file.  Taking a quick look at it, reveals its simplicity.

<?xml version="1.0" encoding="utf-8"?>

<webParts>

  <webPart xmlns="http://schemas.microsoft.com/WebPart/v3">

    <metaData>

      <type name="Microsoft.SharePoint.WebPartPages.SilverlightWebPart, Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c, processorArchitecture=MSIL" />

      <importErrorMessage>$Resources:core,ImportErrorMessage;</importErrorMessage>

    </metaData>

    <data>

      <properties>

        <property name="Title" type="string">SilverlightWebPartProject1 - SilverlightWebPart1</property>

        <property name="Description" type="string">My Silverlight Web Part</property>

        <property name="Height" type="unit">300px</property>

        <property name="Width" type="unit">400px</property>

        <property name="Url" type="string">/SiteAssets/SilverlightWebPartProject1/SilverlightWebPart1/SilverlightProject1.xap</property>

      </properties>

    </data>

  </webPart>

</webParts>

It simply has a reference to the existing SilverlightWebPart included in SharePoint 2010.  It sets a few properties such as Title, Description, Height, Width, and Url.  Here you will notice that it’s actually copying the .xap file from your Silverlight project into the SiteAssets library.  Note, that this is the only place to set the dimensions of your web part.

<?xml version="1.0" encoding="utf-8"?>

<Elements xmlns="http://schemas.microsoft.com/sharepoint/" >

  <Module Name="SilverlightWebPart1" List="113" Url="_catalogs/wp">

    <File Path="SilverlightWebPart1\SilverlightWebPart1.webpart" Url="SilverlightWebPartProject1_SilverlightWebPart1.webpart" Type="GhostableInLibrary" >

      <Property Name="Group" Value="Custom" />

    </File>

  </Module>

  <Module Name="SilverlightWebPart1">

    <File Path="SilverlightWebPart1\SilverlightProject1.xap" Url="SiteAssets/SilverlightWebPartProject1/SilverlightWebPart1/SilverlightProject1.xap" />

  </Module>

</Elements>

If we take a look at the Elements.xml file, we see that it deploys both the .webpart file and the .xap file using a Module element.

When you are ready to deploy just use the Deploy command in Visual Studio.  It will build the Silverlight application, the .wsp file and send it to SharePoint.  You no longer have to manually upload the .xap file (or add it manually to your package).  Now, we can just add the web part to a page from the Insert ribbon.

VS11DPAddSilverlightWebPart

Then you’ll have your Silverlight application on your page.  Don’t be jealous of how great this one looks. :)

VS11DPSilverlightWebPart

What about SharePoint Online?  Does it work there too?  Indeed it does.  Just use the Publish feature I talked about earlier to deploy that solution to the cloud.  One issue I did notice is that the path configured in the SilverlightWebPart is absolute.  If you publish into a site collection not on the root, you’ll need to modify the path.  I need to look at this one more since it might be based off of the local SharePoint site URL that you specified originally.  Still it’s nice to know that it works.  I tried it with an E3 account and I’m pretty sure it will work with P accounts as well.

Comments

# SharePoint Daily &raquo; Blog Archive &raquo; Do SharePoint Right; SOPA vs. ECM; Vote Via the Cloud

Pingback from  SharePoint Daily  &raquo; Blog Archive   &raquo; Do SharePoint Right; SOPA vs. ECM; Vote Via the Cloud

# Do SharePoint Right; SOPA vs. ECM; Vote Via the Cloud

Thursday, January 26, 2012 8:10 AM by SharePoint Daily

There has to be a better way to avoid the snooze button . - Dooley Top News Stories SharePoint Implementation

# Technical Tuesday - How to: Use the Silverlight web part with Visual Studio 11 - Grid User Post - The Grid Blog - Office 365 - Microsoft Office 365 Community

Pingback from  Technical Tuesday - How to: Use the Silverlight web part with Visual Studio 11 - Grid User Post - The Grid Blog - Office 365 - Microsoft Office 365 Community

# Visual Studio 11 ??? Silverlight Web ?????????????????????????????? - Office 365 ????????????????????? - Office 365 - ????????? - Microsoft Office 365 Community

Pingback from  Visual Studio 11 ??? Silverlight Web ?????????????????????????????? - Office 365 ????????????????????? - Office 365 - ????????? - Microsoft Office 365 Community

# Do SharePoint Right; SOPA vs. ECM; Vote Via the Cloud &#8211; Bamboo Solutions

Pingback from  Do SharePoint Right; SOPA vs. ECM; Vote Via the Cloud &#8211; Bamboo Solutions

Leave a Comment

(required) 
(required) 
(optional)
(required)