Programming Microsoft SharePoint and Silverlight 2: Easier Than You Think

More Resources SharePoint and Silverlight Blueprints Microsoft Silverlight Site SharePoint Development Resources

In the world of Web-based application development, users are demanding ever-improved application experiences. Further, the demands of these Web-based applications go beyond supporting a single browser technology or platform. If you are building a Web app today, you need technologies that support not only a way to deliver a more compelling user experience, but also that enable developers to deliver this experience quickly to multiple technologies and audiences.

Silverlight 2 is one example of a technology that enables robust Web application development opportunities. Silverlight is a cross-browser, cross-platform plug-in that provides developers access to a rich programming model for building Web-based user experiences.

SharePoint is another technology that is frequently being used for Web-based application development. Companies that invested in SharePoint for intranet development now want to extend this technology out to externally facing Web sites. Together, Silverlight and SharePoint provide a simple, yet powerful, infrastructure for building intranet and extranet applications with sophisticated user interface designs and interactions.

In this article, we'll discuss one of the key ways in which you can use SharePoint and Silverlight together by integrating a Silverlight application within a SharePoint Web Part. We start by walking you through building a fairly simple media application using Silverlight 2 Beta 2 (see Figure 1). We'll then show how you can use the SharePoint Web Part as a wrapper for your Silverlight application. This is an interesting approach because it enables you to not only create isolated hosted applications, but also interconnect the Web Parts through the native SharePoint object model—for example, through a provider/consumer model.

Figure 1. Silverlight WMV Player Web Part

Creating the Media Player

Silverlight 2, in beta 2 as we go to press, is quite an evolution from Silverlight 1.0. For example, Silverlight 2 supports managed code, so in addition to JavaScript, you can now use Visual Basic and C# in your applications. Further, Silverlight 2 ships with a set of controls and facilitates the extension of controls to make the job of creating Silverlight-based user interfaces much easier. The designer experience is now much better and is supported by both a UI designer tool within Visual Studio 2008 and Expression Blend. To prepare your environment to build Silverlight applications for SharePoint, make sure you have the following installed:

• Windows Server 2003 or Windows Server 2008
• Windows SharePoint Services 3.0 and SP1
• Microsoft Office SharePoint Server 2007 and SP1
• Visual Studio 2008 Professional Edition
• Silverlight Tools Beta 2 for Visual Studio 2008
• Silverlight 2 Beta 2 Runtime
• Windows SharePoint Services 3.0 Tools: Visual Studio Extensions, Version 1.2

After you've set up your environment, open Visual Studio 2008 and create a new project. In either the C# or Visual Basic nodes, you'll find a new project node called Silverlight, which contains two project templates: one to create a Silverlight application and another to create a Silverlight class library (see Figure 2).

Figure 2. Silverlight Application New Project Template

For the sample app, we selected the Silverlight application template, provided a name (MediaPlayer in our case), and accepted the other default options. After completing those steps and clicking OK, you will be prompted to either add a new Web to the solution or to dynamically generate an HTML test page for hosting Silverlight within the project. Select the first choice (adding a new Web to the solution), again accepting the default options. When finished, your solution will consist of both the Silverlight project and the hosting Web application (as opposed to just an HTML page).

In our example, you can see these two projects in the MediaPlayer solution. The first is a Web site called MediaPlayerWeb. This is the test Web site that you will use to develop and test your Silverlight application. The second project is the Silverlight application called MediaPlayer. For this article, we'll focus on the Page.xaml and the Page.xaml.cs files in the MediaPlayer project. In Silverlight 2, the UI is generated using an XML-based declarative language called XAML—the same language used to create Windows Presentation Foundation (WPF) UI for client applications. Page.xaml contains the XAML code that defines the UI, while Page.xaml.cs contains the codebehind for the application.

You can have only one Page.xaml.cs file, but you can have multiple XAML files that can be managed through the central Page.xaml file. You might do this if you want to manage separate Silverlight controls in one Page.xaml.