Export (0) Print
Expand All

How to: Use a SharePoint Project to Deploy a Silverlight Application

Overview

In many client-side development scenarios, you will want to use a Microsoft® SharePoint® project created in the Microsoft Visual Studio® 2010 development system to deploy a Microsoft Silverlight® application to a SharePoint environment. This topic shows you how to deploy a Silverlight application to the master page gallery in a SharePoint site. It also demonstrates how to provision a page that hosts the Silverlight control.

Ff798492.note(en-us,PandP.10).gifNote:
This how-to topic assumes that you have an existing Visual Studio solution that contains a Silverlight application project, and that you have an existing SharePoint environment that has a team site provisioned.
It is not appropriate to deploy a Silverlight application to the master page gallery in every scenario. For more information, see Client Application Models.

Summary of Steps

This how-to topic includes the following steps:

  • Step 1: Create the SharePoint project. In this step, you add a SharePoint project to your Visual Studio solution. You also add modules to provision the Silverlight application and the Web Part page.
  • Step 2: Configure the SharePoint project. In this step, you configure the SharePoint project to deploy the output of the Silverlight project. You also configure feature manifest files to add a Silverlight Web Part that hosts your Silverlight application to the Web Part page.
  • Step 3: Enable Silverlight debugging. In this step, you configure the SharePoint project to enable Silverlight debugging. This allows you to debug Silverlight code running on a SharePoint Web Part page in a browser window.

Step 1: Create the SharePoint Project

This procedure adds a SharePoint project to a Visual Studio 2010 solution.

To add a SharePoint project

  1. In Solution Explorer, right-click the solution node, point to Add, and then click New Project.
  2. In the New Project dialog box, select the Empty SharePoint Project template, provide a name for the project, and then click OK.

    Ff798492.5ff99d59-f183-4eaa-9f7f-04a709b12181(en-us,PandP.10).png

  3. On the SharePoint Customization Wizard page, provide the URL of your local SharePoint site, select Deploy as a farm solution, and then click Finish.

    Ff798492.74c0f70e-a515-45dd-8489-85caa1ce3646(en-us,PandP.10).png

  4. Add the following SharePoint 2010 project items to the project:
    1. A module named Silverlight. Delete the Sample.txt file that is added automatically.
    2. A module named Pages. Delete the Sample.txt file that is added automatically.

Step 2: Configure the SharePoint Project

This procedure configures the SharePoint project to deploy the .xap file generated by your Silverlight project. It also configures the project to deploy a Web Part page that hosts your Silverlight control in a Silverlight Web Part.

To configure the SharePoint project

  1. In Solution Explorer, right-click the Silverlight node, and then click Properties.
  2. In the Properties window, click Project Output References, and then click the ellipsis () button.
  3. In the Project Output References window, click Add.
  4. In the properties pane for the new project output reference, perform the following actions:
    1. In the Deployment Type drop-down list, select ElementFile.
    2. In the Project Name drop-down list, select the name of your Silverlight application project, and then click OK.

    Ff798492.151b7d91-424a-48ed-836b-9f68798c0981(en-us,PandP.10).png

  5. In Solution Explorer, expand the Silverlight node, and then open the Elements.xml file.
  6. Modify the Elements.xml file to resemble the following code.
    Ff798492.note(en-us,PandP.10).gifNote:
    In the File element, change the value of the Path attribute to the build location of your .xap file in the Visual Studio solution. Change the value of the Url attribute to the file name of your .xap file.

    <?xml version="1.0" encoding="utf-8"?>
    <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
      <Module Name="Silverlight" Url="_catalogs/masterpage">
        <File Path="Silverlight\SilverlightApp.xap" 
              Url="SilverlightApp.xap" 
              Type="GhostableInLibrary" />
      </Module>
    </Elements>
    
    
  7. At this point, you have configured the SharePoint project to deploy the Silverlight .xap file to the master page gallery. Next, you will add and configure a Web Part page to host the Silverlight control.
  8. In Solution Explorer, right-click the Pages node, point to Add, and then click Existing Item.
  9. In the Add Existing Item dialog box, browse to 14\TEMPLATE\SiteTemplates\sts\default.aspx in the SharePoint root, and then click Add.
    Ff798492.note(en-us,PandP.10).gifNote:
    This adds a copy of the default.aspx file to the Pages node. You could also use a page from any other site template or create your own page.

  10. In Solution Explorer, expand the Pages node, and then open the Elements.xml file.
  11. Modify the Elements.xml file to resemble the following code.
    Ff798492.note(en-us,PandP.10).gifNote:
    In the File element, change the value of the Url attribute to the relative URL you want to use for the Web Part page.

    <?xml version="1.0" encoding="utf-8"?>
    <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
      <Module Name="Pages" Url="SitePages">
        <File Path="Pages\default.aspx" 
              Url="SilverlightTest.aspx" 
              Type="GhostableInLibrary">
        </File>  
    </Module>
    </Elements>
    
    
  12. In the Elements.xml file, in the File element, add the following XML. This adds a Silverlight Web Part and configures it to host your Silverlight control.
    <AllUsersWebPart WebPartOrder="1" 
                     WebPartZoneID="Left" 
                     ID="SilverlightExternalService">
      <![CDATA[ 
      <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" />
            <importErrorMessage>Cannot import this WebPart. 
            </importErrorMessage>
          </metaData>
          <data>
            <properties>
              <property name="HelpUrl" type="string" />
              <property name="AllowClose" type="bool">True</property>
              <property name="ExportMode" type="exportmode">All</property>
              <property name="Hidden" type="bool">False</property>
              <property name="AllowEdit" type="bool">True</property>
              <property name="Direction" type="direction">NotSet</property>
              <property name="TitleIconImageUrl" type="string" />
              <property name="AllowConnect" type="bool">True</property>
              <property name="HelpMode" type="helpmode">Modal</property>
              <property name="CustomProperties" type="string" null="true" />
              <property name="AllowHide" type="bool">True</property>
              <property name="Description" type="string">A web part to display 
                              a Silverlight application.</property>
              <property name="CatalogIconImageUrl" type="string" />
              <property name="MinRuntimeVersion" type="string" null="true" />
              <property name="ApplicationXml" type="string" />
              <property name="AllowMinimize" type="bool">True</property>
              <property name="AllowZoneChange" type="bool">True</property>
              <property name="CustomInitParameters" type="string" null="true"/>
              <property name="Height" type="unit">650px</property>
              <property name="ChromeType" type="chrometype">Default</property>
              <property name="Width" type="unit">800px</property>
              <property name="Title" type="string">Silverlight Web 
                              Part</property>
              <property name="ChromeState" type="chromestate">Normal</property>
              <property name="TitleUrl" type="string" />
              <property name="Url" type="string">
                       ~site/_catalogs/masterpage/SilverlightApp.xap</property>
              <property name="WindowlessMode" type="bool">True</property>
            </properties>
          </data>
        </webPart>
      </webParts> ]]>
    </AllUsersWebPart>
    
    
    Ff798492.note(en-us,PandP.10).gifNote:
    Pay particular attention to the Url property, which must point to the location of your .xap file in the master page gallery. Make sure that the Height and Width properties match the dimensions of your Silverlight application.

Step 3: Enable Silverlight Debugging

This procedure configures the SharePoint project to allow Silverlight debugging.

To enable Silverlight debugging

  1. In the Solution Explorer, right-click the SharePoint project node, and then click Properties.
  2. On the Properties page, on the SharePoint tab, select Enable Silverlight debugging (instead of Script debugging).

    Ff798492.15994621-3119-4274-9834-baa43a6433fb(en-us,PandP.10).png

  3. In Solution Explorer, select the SharePoint project, and then press F5 to build and run the solution with the debugger attached. You can add breakpoints to the Silverlight application and step through your code as required.

Show:
© 2014 Microsoft