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 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:


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:


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


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



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:

 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:

 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:


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

 <Canvas x:Name="parentCanvas"    xmlns=""     xmlns:x=""     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:

 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:


And if user clicks the rectangle...


If user clicks the text...


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!