Welcome!

XML Authors: Liz McMillan, Elizabeth White, Sandi Mappic, Max Katz, Yakov Fain

Blog Feed Post

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

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.

Read the original blog entry...

More Stories By Corey Roth

Corey Roth, a SharePoint Server MVP, is a consultant at Hitachi Consulting specializing in SharePoint and Office 365 for clients in the energy sector. He has more than ten years of experience delivering solutions in the energy, travel, advertising and consumer electronics verticals.

Corey specializes in delivering ECM and search solutions to clients using SharePoint. Corey has always focused on rapid adoption of new Microsoft technologies including Visual Studio 2013, Office 365, and SharePoint.

He is a member of the .NET Mafia (www.dotnetmafia.com) where he blogs about the latest technology and SharePoint. He is dedicated to the community and speaks regularly at user groups and SharePoint Saturdays.