Karine Bosch’s Blog

On SharePoint

Create a SharePoint Application Page hosting a Silverlight 3 application


In my previous post on Silverlight 3 integration in SharePoint I explained that there is no System.Web.Silverlight.dll in the SDK anymore. Of course you can install the Silverlight 3 SDK side by side with the Silverlight 2 SDK to be able to continue using the <asp:Silverlight> control but  if you want to keep up with the newest technologies, you adapt to the rules.

In that case you can use the <object> tag to create the Silverlight application. The code snippet below contains the entire application page.

<%@ Assembly Name="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Page Language="C#" MasterPageFile="~/_layouts/application.master" Inherits="Microsoft.SharePoint.WebControls.LayoutsPageBase" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <script type="text/javascript">
        function onSilverlightError(sender, args) {
            var appSource = "";
            if (sender != null && sender != 0) {
                appSource = sender.getHost().Source;
            }
            var errorType = args.ErrorType;
            var iErrorCode = args.ErrorCode;
            if (errorType == "ImageError" || errorType == "MediaError") {
                return;
            }
            var errMsg = "Unhandled Error in Silverlight Application " + appSource + "\n";
            errMsg += "Code: " + iErrorCode + "    \n";
            errMsg += "Category: " + errorType + "       \n";
            errMsg += "Message: " + args.ErrorMessage + "     \n";
            if (errorType == "ParserError") {
                errMsg += "File: " + args.xamlFile + "     \n";
                errMsg += "Line: " + args.lineNumber + "     \n";
                errMsg += "Position: " + args.charPosition + "     \n";
            }
            else if (errorType == "RuntimeError") {
                if (args.lineNumber != 0) {
                    errMsg += "Line: " + args.lineNumber + "     \n";
                    errMsg += "Position: " + args.charPosition + "     \n";
                }
                errMsg += "MethodName: " + args.methodName + "     \n";
            }
            throw new Error(errMsg);
        }
    </script>
    <div id="silverlightControlHost" style="width:300;height:100">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
            width="100%" height="100%">
            <param name="source" value="HelloSilverlight3.xap" />
            <param name="width" value="300" />
            <param name="height" value="100" />
            <param name="onError" value="onSilverlightError" />
            <param name="background" value="white" />
            <param name="minRuntimeVersion" value="3.0.40624.0" />
            <param name="autoUpgrade" value="true" />
            <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration: none">
                <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight"
                    style="border-style: none" />
            </a>
        </object>
    </div>
</asp:Content>
<asp:Content ID="PageTitle" ContentPlaceHolderID="PlaceHolderPageTitle" runat="server">
    Silverlight 3 Demo Application Page
</asp:Content>
<asp:Content ID="PageTitleInTitleArea" runat="server" ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea">
    Silverlight 3 Demo Application Page
</asp:Content>

InitParameters can be passed by using another <param> element. The value string is comma separated as it has always been:

<param name="initParams" value="key1=value,key2=value2" />

The only disadvantage is that you have to click the Silverlight application before you can start interacting with it.

Silverlight 3 app page

You can download the demo project here. Have fun with it!

July 24, 2009 - Posted by | SharePoint 2007, Silverlight

17 Comments »

  1. Hey Karine,
    Great post and for sure one of the first regarding Silverlight 3 and SharePoint integration😉

    I have a somewhat heavy question to ask.. I’m trying to upgrade an existing Silverlight 2 web part to Silverlight 3. Since there is no longer system.web.silverlight it wont compile because in the webpart code i use the Silverlight control = new Silverlight(); method..

    How do i integrate my Silverlight 3 control with the web part?😐

    Thanks😉

    Comment by Ben | July 25, 2009 | Reply

  2. Hi Ben,
    Indeed it’s not an easy task, but you can read how to do this in one of my previous posts: https://karinebosch.wordpress.com/2009/07/17/integrating-silverlight-3-in-sharepoint-2007

    Greetz,

    Karine

    Comment by Karine | July 25, 2009 | Reply

  3. […] post explains how you can create a SharePoint web part that hosts a Silverlight 3 application. In a following post you will read how to host a Silverlight 3 application from within an application page. Both […]

    Pingback by Integrating Silverlight 3 in SharePoint 2007 « Karine Bosch’s Blog | July 25, 2009 | Reply

  4. […] more here: Create a SharePoint Application Page hosting a Silverlight 3 … Categories : Application Hosting, domain, hosting, server, url Tags : application, article, […]

    Pingback by Create a SharePoint Application Page hosting a Silverlight 3 … | August 1, 2009 | Reply

  5. Karine,

    the correct way to pass InitParameters is

    Have a nice coding…

    Comment by Aviw | August 24, 2009 | Reply

  6. Hi,

    I am using only SilverLight 3, I want to add silverlight controls on Sharepoint pages, so please let me know how can i integrate.

    Thank you,
    N i T ! N

    Comment by N i T ! N | October 9, 2009 | Reply

  7. Euh… It’s explained in this post. There is nothing more to it.
    Karine

    Comment by Karine Bosch | October 9, 2009 | Reply

  8. Hello Karine

    Thank you for this posting. It has got me 95% of the way to integrating SL3 with WSS 3.0 on Windows 2003.

    I have built the project and deployed it by running the .BAT file. This all appears to work – the ‘Silverlight 3 Demo …’ folder is created in my WSS _layouts folder.

    What I don’t get is how this should be integrated. Does it get added to the list of available web parts or do you link to it as an external page?

    Any tips most welcome.

    Thanks again

    Jerry

    Comment by Jerry | October 13, 2009 | Reply

  9. later … I discover that the SL3 demo shows up in the ‘Site Collection Features’ page waiting to be activated. After activation it then appears on the ‘Site Actions’ menu. This does indeed link up to the demo .aspx page but the SL3 application itself does not run. MIME types appear to be registered OK.

    Comment by Jerry | October 13, 2009 | Reply

  10. Hi Jerry,
    If you used the code “as is” (no changes to folders and file names) you should see the Silverlight application. (Are you sure you have set a width and height for the :

    otherwise it will never appear)
    Try to click on the region where you expect the silverlight application. Sometimes it only appears after clicking.
    Karine

    Comment by Karine Bosch | October 13, 2009 | Reply

    • Hello Karin,

      Thank you. I have used the script verbatim as you have it at the top of the page. I have changed the background colour to blue so I can see the 300×100 pix SL3 app window. But nothing happens.

      I am unsure about the interaction between IIS, .NET versions and the SL3 runtime. The properties for the WSS 3 site in question show it using .NET version 2.x. I have uploaded a screen shot of the relevant parts of IIS manager here:

      Any comments most welcome.

      Thanks

      Jerry

      Comment by Jerry | October 13, 2009 | Reply

  11. Jerry,

    The web.config of your SharePoint web application should be upgraded for the .NET 3.5 framework. Otherwise you cannot run Silverlight in your SharePoint web parts and pages.

    The following link explains how you can make Visual Studio 2008 upgrade your web.config:

    http://weblogs.asp.net/jan/archive/2008/10/10/enabling-net-3-5-in-sharepoint-2007-sites-the-lazy-way.aspx

    Karine

    Comment by Karine Bosch | October 13, 2009 | Reply

    • Hello Karin

      OK. Got it.

      Here are the spells you need. Follow the advice in the link above. You will want to copy (and backup) the web.config file which is in your root virtual server folder. This file should be the one you allow VS 2008 to modify. Now, I found my installation barfed on the raw output which had the system.codedom section at the top. Move it to the bottom of the modified web.config file. Stop your web site in IIS manager. Replace the old web.config with the new. Restart IIS. Bingo, you should be up and running.

      Thanks all!

      The question now is: modify which web.config file? Is it in the root of the virtual path in IIS manager?

      For the benefit of anyone else trying to do this I will continue to post until I resolve the issue.

      Comment by Jerry | October 13, 2009 | Reply

  12. Hello: I put together this script in an Aspx test page but always get Unhandled Error in Silverlight Application Code: 2104 Category.

    I have all the appropriate MIME types. What am I doing wrong and do you need the XAP file in this solution?

    Comment by Brian | August 11, 2011 | Reply

  13. Hi Brian, you can send me your code (aspx + silverlight app) to karinebosch at hotmail dot com. I’ll take a look at it.

    Comment by Karine Bosch | August 12, 2011 | Reply

  14. […] https://karinebosch.wordpress.com/2009/07/24/create-a-sharepoint-application-page-hosting-a-silverlig… The <asp:Silverlight> control but  if you want to keep up with the newest technologies, you adapt to the rules. […]

    Pingback by Silverlight in Application Page | Sharepoint Sriram | December 12, 2011 | Reply


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: