I really like doing things in 10 easy steps, because although there is a lot of good tips and tricks out there for Silverlight, it's not always easy to get from A-Z for beginners. In similar fashion to my 10 steps on SharePoint and Visual Studio workflows, I hope this post helps you connect the dots on SharePoint and Silverlight.
In this two part series, we're going to build the conventional "Hello World" application in Silverlight. We are then going to wrap that Silverlight application within a SharePoint web part and deploy the web part into a MOSS/WSS site collection.
<update date="06-11-08">
Since I first posted this series, a new version of Silverlight has been released. I wrote the series off Silverlight 2 beta 1, and Silverlight to since been upgraded to beta 2. Read this follow-up post to view the changes that I had to make to these tens steps due to the new beta release.
</update>
1. Install extensions for SilverLight
The first thing we're going to do is get our development environment ready by installing the SilverLight tools for Visual Studio (Microsoft Silverlight Tools Beta 1 for Visual Studio 2008). As the name suggests, you must first have Visual Studio 2008 installed (2005 won't cut it). This download also installs the SilverLight runtime as well as the SDK, so you'll have everything you need.
Other items you may or may not have done already:
-MOSS SP1 and WSS SP1
-.NET 3.5
-System.Web.Silverlight.dll in the GAC (C:\windows\assembly)
2. Create a Visual Studio SilverLight Project
After you have installed the toolkit, a new project type category called Silverlight is available:
Go ahead and create a new "Silverlight Application" project, and call it "HelloWorldSilverLightApplication". After you click ok on the new project window, you'll notice another popup – toggle the dropdown selection to be "Web Application Project":
This in turn will generate an ASP.NET web application project, along with the Hello World Silverlight project you just created. You will use that web application project for testing purposes. Notice that you can right click on the HelloWorldSilverLightAppicationTestPage.aspx page that is created in the web project – this is how we will test our Silverlight application while it's in development. Later, we will migrate the finished product into our MOSS/WSS site:
Direct your attention to the HelloWorldSilverlightApplication project files, notice the two files that were created:
App.xaml: This file is used as the global resource definition file, very similar to how HTML pages utilize CSS style sheets to define styles rather than having redundant definitions within the HTML itself.
Page.xaml: This is the main page for the Silverlight application and is where you'll be defining the Silverlight controls that are contained therein. Notice by default we start with a UserControl with a grid control defined in it:
The grid control is equivalent to the <table> element in HTML. Rows and columns can be defined in a very similar fashion with Silverlight as you would with HTML.
3. Build and Unit Test your SilverLight Hello World Application
To keep things simple, let's start by removing the grid from within the UserControl and replacing it with the TextBlock control to get some text on the screen:
To be slightly less boring, I edited the font family, size, style, weight and streach. Also, I put a gradiant on the text to show off SilverLight's capabilities (to a small degree, but still compelling). To do this I added a LinearGradientBrush within the TextBlock.Foreground and set two GradientStop commands. Tangent: the gradient stops are always between 0 and 1, where 0 is the left most part of the text and 1 is the rightmost. Also, multiple stops can be added. If a stop is added with an offset of .5 and the color set to Blue, the whole rainbow would show since it would go from red to blue to yellow, with everything inbetween!
And that's it! Now, right click on your HelloWorldSilverLightAppicationTestPage.aspx file, and choose view in browser to see if it is working properly:
That's it for today folks! The remaining 7 steps involve how to get this new SilverLight application into our MOSS or WSS site. I will publish my project source on Codeplex at that time as well, so STAY TUNED!
Phil