Integrating Silverlight 4 with SharePoint 2010

Understanding the benefits of integrating Silverlight with SharePoint

The following list shows many benefits of integrating Silverlight with SharePoint 2010:

  • Rich UX: Silverlight RIAs can offer a rich user experience. You can take full advantage of the rich visual capabilities offered by Silverlight and include them in a SharePoint site. The rich and interactive content offers an incredible new world of possibilities in SharePoint. For example, you can offer an interactive balanced scorecard with animated graphs, rich navigation capabilities, and context menus.
  • Code runs on the client: You can take advantage of the power of the client computers accessing the SharePoint server. You can use threading and asynchronous calls to offer responsive user interfaces and to take advantage of modern multi-core microprocessors found in client computers. You can offer great response times without the need to wait for the server to load another page. You can take advantage of rich controls, animations, and exciting multimedia effects. The processing removes load from the server and enables you to use both the server and the client in your solutions. Additionally, Silverlight 4 is cross-browser capable and we can take advantage of the improved Out of Browser features to create applications that interact with the SharePoint 2010 server but run in the Windows desktop, out of the web browser.
  • Efficient applications: As you can work with the power offered by the client, you can process data without the need to make requests to the server all the time. This way, you can create load-balanced solutions.
  • Access to the Client OM (Client Object Model): When you have to access data and services offered by the SharePoint 2010 server, you don't need to create your own complex infrastructure. There is no need to add additional layers. You can take advantage of the new Client Object Model, also known as Client OM. As you can work with asynchronous calls to the Client OM, you can still offer great responsive applications when consuming services from the server. Users can interact with SharePoint data without requiring server calls as they would from traditional pages. Lots of the processing can be pushed down to the client. This way, as previously explained, you can remove load from the SharePoint server and create load-balanced solutions.
  • Leverage your existing Silverlight knowledge, components, and applications: You can build new capabilities quickly from existing Silverlight components and applications, integrating them with SharePoint 2010.


Creating a SharePoint solution


Now, when we design a new SharePoint 2010 solution, we will be able to consider Silverlight RIAs as new components for the global solution. We have to consider the aforementioned benefits of integrating Silverlight with SharePoint and decide which parts would be convenient to create as Silverlight RIAs.

This way, we can focus on preparing the SharePoint 2010 infrastructure and then we can access data and services offered by the server through Silverlight RIAs. For example, you can view the images found in an assets library defined in SharePoint through a Silverlight application.

Once you start integrating Silverlight with SharePoint, you will find a new exciting way of enhancing SharePoint solutions.

Preparing the development environment

We want to take full advantage of modern technologies. First of all, we must install the latest tools and begin working on configurations. Later, we will be able to use our existing knowledge to create different kinds of RIAs for SharePoint 2010, using Silverlight 4—the newest kid-on-the-block from Microsoft.

Silverlight 4 is backward-compatible with its previous version, Silverlight 3. Therefore, when an example uses a feature found only in Silverlight 4, you will find a note explaining this situation. Most of the examples work for both Silverlight versions. However, we will also take advantage of some of the new features found in Silverlight 4.

The only requirements underpinning the development and integration of RIAs into SharePoint 2010 sites are understanding the basics of the C# programming language, ASP.NET, XAML code, and the Visual Studio IDE. We will cover any other requirements in our journey through the creation of many different kinds of RIAs to run in a SharePoint 2010 site. First, we must download and install various Silverlight development tools. We need Visual C# 2010 Professional, Premium, or Ultimate installed, in order to successfully complete the installations explained in the following section. Visual C# 2010 allows us to choose the desired Silverlight version (for example, version 3 or version 4). The following part will show Visual Studio 2010 Ultimate screenshots. If you use other versions, some elements that appear in the screenshots could be different but the steps are all valid for the aforementioned versions.

Setting up the development environment

Follow these steps to prepare the development environment:

  1. Download the following files:
  2. Application's name

    Download link

    File name


    Silverlight 4 Tools for Visual Studio 2010


    We must install Silverlight 4 Tools in order to create Silverlight 4 applications in the Visual Studio 2010 IDE, using XAML and C#. It will co-exist with previous Silverlight SDKs (Software Development Kits). This new version of Silverlight Tools also includes the WCF RIA Services package.

    Silverlight 4 Offline Documentation (in CHM format)


    We must download and run this file to decompress its content because, because we will need access to Silverlight 4 official documentation in due course.

    Expression Blend for .NET 4


    This tool will enable us to create content that targets Silverlight 4 and to create rapid prototypes with the SketchFlow tool.

    Silverlight Toolkit (Updated for Silverlight 4 compatibility)


    It is convenient to download the latest stable release. This toolkit provides a nice collection of Silverlight controls, components, and utilities made available outside the normal Silverlight release cycle. It will be really helpful to use these controls to provide even more attractive user interfaces. Besides, it includes more Silverlight themes.

  3. Run the installers in the same order in which they appear in the above table and follow the steps to complete the installation wizards.
  4. Once the installations have successfully finished, run Visual Studio 2010 or Visual Web Developer 2010 (or later).
  5. Select File | New | Project... or press Ctrl+Shift+N. Select Visual C# | Silverlight under Installed Templates in the New Project dialog box. You will see many Silverlight templates, including Silverlight Business Application and WCF RIA Services Class Library, as shown in the following screenshot:

Discovering the rich controls offered by the Silverlight Toolkit

Silverlight Toolkit is a Microsoft project offering many rich controls, components, and utilities that can help us to enhance our Silverlight UI (User Interface). As we want to create a very attractive UI for SharePoint, it is convenient to get familiar with its features. Follows these steps to see the controls in action and to change the values for many of their properties.

  1. Select Start | All Programs | Microsoft Silverlight 4 Toolkit April 2010 | Toolkit Samples and your default web browser will display a web page with a Silverlight application displaying a list of the controls organized in ten categories as follows:
    • Controls
    • Data
    • DataForm
    • Data Input
    • DataVisualization
    • Input
    • Layout
    • Navigation
    • Theming
    • Toolkit
  2. By default, the default.htm web page is located at C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\Toolkit\Apr10\Samples in 64-bit Windows versions.

  3. Click on a control name under the desired category and the right panel will display the control with different values assigned for its properties, creating diverse instances of the control. For example, the following screenshot shows many instances of the Rating control under the Input category.

  4. Click on the buttons shown at the bottom of the web page and you will be able to see both the XAML and the C# code used to create the sample for the control. For example, the following screenshot shows the XAML code for the DataGrid control example, DataGridSample.xaml. You can also click on DataGridSample.xaml.cs and check the C# part. This control appears under the Data category.

Browsing themes with sample controls

Silverlight Toolkit also includes 11 themes that allow us to change and improve the overall look-and-feel for our Silverlight UI. They are:

  • Bubble Creme
  • Bureau Black
  • Bureau Blue
  • Expression Dark
  • Expression Light
  • Rainier Purple
  • Rainier Orange
  • Shiny Blue
  • Shiny Red
  • Twilight Blue
  • Whistler Blue

Click on Theme Browser under the Theming category and you will be able to select one of the themes shown in the previous list to preview the look-and-feel of many controls. The following screenshot shows the preview for the Whistler Blue theme:

Preparing the server

So far, we have prepared the development environment. Now, it is time to make sure that we have the necessary configuration for the SharePoint 2010 server in which we are going to integrate Silverlight applications.

In order to complete all the examples in this article, you must be an administrator of a SharePoint site collection. SharePoint Server 2010 or SharePoint Foundation 2010 must be installed in the same computer that runs Visual Studio 2010. You can check the necessary steps to perform a SharePoint Server 2010 or SharePoint Foundation 2010 installation for your development computer at Follow these steps to ensure that you are a site collection administrator:

  1. Open your default web browser, view the SharePoint site, and log in with your username and password. You have to enter the SharePoint server URL. In our examples, we will use http://xpsgaston as our default SharePoint 2010 site. However, you have to replace it with your SharePoint 2010 site URL. Your default site will appear, in this case, http://xpsgaston/SitePages/Home.aspx, as shown in the following screenshot:

  2. Click Site Actions | Site Permissions and a list of users with their permission levels will appear.
  3. Now, click on Site Collection Administrators in the ribbon. A new dialog box with the names of the users with administrator rights on this site collection will appear.

  4. If your user name appears in the text box, you are a Site Collection Administrator.

    If you cannot see the Site Collection Administrators button in the ribbon, it means that you don't have site collection administrator privileges on the site. In this case, you have to request this permission from the SharePoint site administrator.


Browsing SharePoint Site collections


Once we have ensured that our username is a Site Collection Administrator, we can use Server Explorer in Visual Studio to browse a SharePoint site.

  1. Start Visual Studio as a system administrator user. In Windows Server 2008 R2, 2008, and 2003, if you are already logged as Administrator on the machine you can simply run the application. However, in Windows 7 or Windows Vista, you can do it by right-clicking on its shortcut and selecting Run as administrator in the context menu that appears, as shown:

  2. Activate the Server Explorer palette. If it isn't visible, you have to select View | Server Explorer in the main menu.
  3. Click on the expand button for SharePoint Connections. If the name of your desired SharePoint 2010 server doesn't appear in the list, you can manually connect to the server. You can do it by right-clicking on SharePoint Connections and selecting Add Connection… in the context menu that appears. Then, you have to enter the URL for the server, for example, http://xpsgaston and click OK in the dialog box that appears. If your user has the previously explained privileges, the server will appear in the list.

  4. Now, click on the expand button for the SharePoint server and you will be able to browse its different nodes. Every component of a SharePoint site is represented by a node in the Server Explorer tree view. You can inspect the properties for each node, as shown in the following screenshot:

  5. You can view some lists in your default web browser by right-clicking on a node and then selecting View in Browser in the context menu that appears. For example, you can do it for the node Home | Lists and Libraries | Site Pages and your default web browser will display all the pages. In this case, the URL shown is http://xpsgaston/SitePages/Forms/AllPages.aspx.

Remember to run Visual Studio as a system administrator user in order to interact with SharePoint for all the examples covered in this article.


In this article we have learned:

  • Understand the benefits of integrating Silverlight with SharePoint
  • Prepare the development environment to develop applications for SharePoint 2010 using Silverlight 4
  • Prepare the SharePoint 2010 server to host Silverlight applications

You've been reading an excerpt of:

Microsoft Silverlight 4 and SharePoint 2010 Integration

Explore Title