Displaying a Silverlight Application in a SharePoint Application Page

In previous posts I explained how you can host a Silverlight application from within a SharePoint web part and how you have to configure SharePoint before you are able to do so:

- hosting a Silverlight application from within a web part.

If you want to host a Silverlight application from within a SharePoint application page, you have to perform a few additional steps.

In your web.config you have to add an extra tag for the silverlight control in the <system.web><pages><controls> section. This section must at least contain the following:

<controls>
    <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <add tagPrefix="asp" namespace="System.Web.UI.WebControls" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <add tagPrefix="asp" namespace="System.Web.UI.SilverlightControls" assembly="System.Web.Silverlight, Version=2.0.5.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
</controls>

The following code snippet is a very basic application page that hosts a Silverlight control. The page does not contain any code behind. You page has to reference the Microsoft.SharePoint.dll and the System.Web.Silverlight.dll. Import the according namespaces. Within the Main content control first place a script manager because this is required by the Silverlight control. Then add the Silverlight control using the <asp:Silverlight> tag. The Silverlight control renders the Hello Silverlight application from the Silverlight BluePrint for SharePoint.

Pay attention to the Source property. If you deploy your Silverlight application in the same sub directory as your as your application page (12\TEMPLATE\LAYOUTS\…) you can set the Source property as in the sample code below. But if your Silverlight application is deployed in the ClientBin directory within your SharePoint web application or within a SharePoint document library, your Source property will look a bit different.

<%@ Assembly Name="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Assembly Name="System.Web.Silverlight, Version=2.0.5.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>

<%@ Page Language="C#" MasterPageFile="~/_layouts/application.master"
         Inherits="Microsoft.SharePoint.WebControls.LayoutsPageBase"  %>

<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Import Namespace="System.Web.UI.SilverlightControls" %>

<asp:Content ID="Main" contentplaceholderid="PlaceHolderMain"
             runat="server">
    <asp:ScriptManager runat="server" ID="ScriptManager1" />
    <asp:Silverlight ID="HelloSL" runat="server"
    MinimumVersion="2.0.31005.0"
    Source="SL.XAML.HelloSilverlight20.xap"
    Width="400" Height="300" />
</asp:Content>

<asp:Content ID="PageTitle" contentplaceholderid="PlaceHolderPageTitle"
             runat="server">
    Hello Silverlight
</asp:Content>

<asp:Content ID="PageTitleInTitleArea" runat="server"
             contentplaceholderid="PlaceHolderPageTitleInTitleArea" >
    The Hello Silverlight Application Page
</asp:Content>

 

This is the sample application page:

image

You can download the source code here.