Create Silverlight 1.1 applications for SharePoint with VS2008


Title says it all ๐Ÿ™‚ My plan is to create small walkthrough how you can create your own Silverlight 1.1 application with Visual Studio 2008 and then run it in SharePoint. And I don't want to install a lot of stuff to my SharePoint environment so I'll just create simple web part to host the Silverlight application. All development work will be done outside SharePoint environment.

If you're new to Silverlight then I suggest you start by looking at least silverlight.net and cool Coding4Fun Silverlight 8-Ball example. The first link is starting point for Silverlight development and the second one is really cool sample that shows how can you create 8-Ball game with Silverlight.

Now you know something about Silverlight ๐Ÿ™‚ So we can get started with my example.

I have VS2008 running on my Vista and I have downloaded and installed Microsoft Silverlight 1.1 Tools Alpha for Visual Studio 2008 to help me developing Silverlight applications. It has new project template that has all the necessary stuff already set up to build Silverlight 1.1 application. I also have SharePoint running in my Virtual PC and it's configured so that I can connect to it directly from my host machine (i.e. http://demo1:1000 in my host IE connects to the virtualized SharePoint).

At first I'll modify SharePoint so that I can host my new applications in there. Let's add few folders under _LAYOUTS:

IIS1

ClientBin is folder that will contain all Silverlight client .dll files (=if you build your Silverlight project you automatically get ClientBin under your project folder which contains your projects client assemblies).

Silverlight folder is used to store .xaml files (=Silverlight pages). I also need to change settings for both of them in order make things work. First I'll change ClientBin settings:

Set only Read access and also set Execute permissions to None:

IIS2

Then I'll add .dll to allowed mime types (and .pdb for future debugging purposes :-):

IIS3

Then I'll change the Silverlight folders settings to support .xaml extension:

IIS4

 

Now SharePoint is set up... but let's create web part that will actually host the Silverlight application in our page. Here's the code for that:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
using System;
using System.Runtime.InteropServices;
using System.Web.UI;
using System.Web.UI.WebControls.WebParts;

namespace Silverlight_Web_Part
{
  [Guid("fc852641-9955-433c-945e-d773f46351eb")]
  public class Silverlight_Web_Part : WebPart
  {
    string xamlFile;
    [WebBrowsable(true), Personalizable(true)]
    public string XamlFile
    {
      get { return xamlFile; }
      set { xamlFile = value; }
    }

    public Silverlight_Web_Part()
    {
      this.ExportMode = WebPartExportMode.All;
    }

    protected override void Render(HtmlTextWriter writer)
    {
      if (string.IsNullOrEmpty(this.XamlFile) == false)
      {
        writer.Write("<div id='SilverlightControlHost' " + 
          "style='width: 640px; height: 480px;'></div>");
        writer.Write("<script type='text/javascript' " +
            "language='JavaScript' src='/_layouts/Silverlight.js'></script>");
        writer.Write("<script type='text/javascript' " +
          "language='JavaScript' src='/_layouts/SilverlightStarter.js'></script>");
        writer.Write("<script type='text/javascript' " +
          "language='JavaScript'>createSilverlight('" + xamlFile + "');</script>");
      }
      else
      {
        writer.Write("Xaml file is not selected.");
      }
    }
  }
}

My web part uses Silverlight.js and SilverlightStarter.js files. SilverLight.js is the same file that is included at the project when you create Silverlight 1.1 project in VS. SilverlightStarter.js is almost copy paste from that project template too but I have just modified it a little bit to support sending XAML file as parameter:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function createSilverlight(filename)
{
  Silverlight.createObjectEx({
    source: filename,
    parentElement: document.getElementById("SilverlightControlHost"),
    id: "SilverlightControl",
    properties: {
      width: "100%",
      height: "100%",
      version: "1.1",
      enableHtmlAccess: "true"
    },
    events: {}
  });
   
  document.body.onload = function() {
   var silverlightControl = document.getElementById('SilverlightControl');
   if (silverlightControl)
   silverlightControl.focus();
  }
}

And if you checkout my web part code on line 35 you actually notice that I'll just pass on the XAML file that has been set in web part properties:

WebPart

Now we just need to add some Silverlight stuff and we're done. So here is the content of the Page.xaml (=THE application :-):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<Canvas x:Name="parentCanvas"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Loaded="Page_Loaded" 
    x:Class="MySilverLight.Page;assembly=/_LAYOUTS/ClientBin/MySilverLight.dll"
    Width="640"
    Height="480"
    Background="White"    
    >

 <Rectangle x:Name="MyRectangle" 
       Canvas.Top="25" Canvas.Left="25" 
       Width="50" Height="50" 
       Fill="Gray" MouseLeftButtonDown="MyMouseLeftButtonDown" />
 <TextBlock x:Name="MyText" 
       Text="Click either rectangle or me" 
       MouseLeftButtonDown="MyMouseLeftButtonDown" />
</Canvas>

And my code behind Page.xaml.cs contains following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
using System;
using System.Windows.Controls;

namespace MySilverLight
{
  public partial class Page : Canvas
  {
    DateTime started = DateTime.Now;

    public void Page_Loaded(object o, EventArgs e)
    {
      // Required to initialize variables
      InitializeComponent();
    }

    public void MyMouseLeftButtonDown(object o, EventArgs e)
    {
      string runningTime = (DateTime.Now - started).TotalSeconds.ToString("F2");
      System.Windows.Shapes.Rectangle rectangle = o as System.Windows.Shapes.Rectangle;
      if (rectangle != null)
      {
        MyRectangle.Opacity = 1;
        MyText.Text = "You clicked rectangle! Application has been running for " + 
          runningTime + " seconds.";
      }

      System.Windows.Controls.TextBlock textBlock = o as System.Windows.Controls.TextBlock;
      if (textBlock != null)
      {
        MyRectangle.Opacity = MyRectangle.Opacity * 0.8;
        MyText.Text = "You clicked text block! Rectangle is fading away...";
      }
    }
  }
}

Now you're probably eager to know what our application actually does ๐Ÿ™‚ Here is our application just after request:

SilverLight1

And if user clicks the rectangle...

SilverLight2

If user clicks the text...

SilverLight3

Now we have working development environment so that we could build ant test Silverlight 1.1 applications and host them in SharePoint. Here are the steps so that you can (try ๐Ÿ™‚ to do it yourself.

1) Create new Silverlight project in VS2008
2) Code ๐Ÿ™‚
3) Build your solution
4) Copy contents of ClientBin\*.* to the SharePoint _LAYOUTS\ClientBin folder
5) Copy *.xaml files from your project to the SharePoint Silverlight folder (Note: you need to verify correct path in x:Class! See my Page.xaml and line 5 in source)
6) Create page that uses Silverlight web part and select your newly created XAML file


Here was my small intro to Silverlight 1.1 with SharePoint. In this example I just used static .xaml files sitting in file system in order to make everything as simple as possible... I just wanted to demo how you can start experimenting with this combination. This can be extended and improved in many different ways and I'll probably come back to those in my future posts.

Anyways... Happy hacking!

J

Comments (11)

  1. Juan Pelaez says:

    I Janne, I would like to translate your post to spanish, I believe is a terrific work.  after the translation I would send this to you to publish in your blog or if that’s ok with you publish in mine (with the credits of course). What do you think about?

    Happy Holidays

    Juan Peláez

  2. Hi Juan!

    Of course you can translate this post to spanish. You can also use any of the images as you see fit. Just post link here so that I can learn spanish too ๐Ÿ™‚

    J

  3. Juan Peláez says:

    Hi Janne, The spanish version can be found here: http://www.juanpelaez.com/Blog/2008/01/09/CreandoAplicacionesDeSilverlight11ParaSharePointConVS2008.aspx

    in the introductions I said:

    One of the blogs i am suscribed is Janne Mattila’s who always post interesting things about Sharepoint, advance ones but very very useful. In the last weeks Janne publish a post about Silverlight y Sharepoint. With Janne permission, I translate the Post to those who likes the spanish.  

    (Note: I am not a professional "translator".  Comments are welcome.)

  4. Hi Juan!

    Just one word: Cool!

    Thanks… I’ll try to learn few spanish words now.

    J

  5. Uno de los Blogs a los que estoy suscrito es el de Janne Mattila quien siempre tiene cosas muy interesantes

  6. Ayub Patel says:

    I followed your article step by step.

    1) Created webpart deployed.

    2) Created folder gave the mimetype. Copied files.

    Now when i go to website and add webpart and point it to /_layouts/silvelight/page.xaml.

    I just see blank webpart. can your tell me what could be the reason? It does not render xaml page.

  7. Hi Ayub!

    I think that only option you got is to do debug… I can’t give you silver(light ๐Ÿ™‚ bullet only with that information. Have you tried Fiddler etc. and checked that is everything on the wire as you expect them to be? It might me authentication issue or incorrect filepath or something like that. I can’t think of anything else right now. Try to debug it little bit more and get back to me with your results.

    J

  8. Ayub Patel says:

    I actually figured out what the issue was. In your article you are saying copy all the files in Layout/silverlight folder. where as in your webpart code you are giving a path to js files as layout/silverlight.js and layout/silverlightstarter.js. it was not able to find these files and there for it was failing.

  9. Hi Ayub!

    Actually I tried to say: "Silverlight folder is used to store .xaml files" but I never said where to put those js files ๐Ÿ™‚ But you’re right that it’s bit misleading. But good that you managed to make it work.

    J

  10. Son T Mai says:

    Hi Janne,

    I followed your article step by step.

    1) Created webpart deployed.

    2) Created folder gave the mimetype. Copied files.

    Now when i go to website and add webpart and point it to /_layouts/silvelight/page.xaml.

    I just see errors:

    ErrorCode: 1001

    ErrorType: ParserError

    Message: AG_E_UNKNOWN_ERROR

    XamlFile: /_layouts/SilverLight/Page.xaml

    Line: 11

    Position: 9

    Would you please help me fix this error!

    Thanks

Skip to main content