Create Silverlight Applications to Access SharePoint 2010 Data

Article
07/24/2014

SharePoint QuickStart Banner

Getting Started with Web Development in SharePoint 2010: Create Microsoft Silverlight applications that display SharePoint 2010 lists inside DataGrid controls, and how to deploy Silverlight applications to SharePoint sites.

Applies to: SharePoint Foundation 2010 | SharePoint Server 2010 | Visual Studio | Visual Studio 2010

In this article
Create a Silverlight Application Project
Add Code to Access and Display SharePoint List Data
Deploy and Test the Solution
Next Steps

Published: August 2010

Provided by: Frank Rice, Microsoft Corporation

Watch the Video

In this exercise, you create a simple Microsoft Silverlight 3 application that displays a SharePoint Server 2010 list inside a DataGrid control. The data for the list is retrieved from the server by using the Microsoft SharePoint 2010 client object model. Then, you deploy the Visual Studio 2010 solution to the local server that is running Microsoft SharePoint Server 2010. To complete this task, you must do the following:

Create a Silverlight Application Project
Add Code to Access and Display SharePoint List Data
Deploy and Test the Solution

Note

This exercise assumes that you have a list named Projects on the SharePoint site specified later in this topic. Find instructions to create the Projects list in Create Linked Lists in SharePoint 2010

Create a Silverlight Application Project

In this task, you create a Silverlight application project in Microsoft Visual Studio 2010.

To create the Silverlight project

Start Visual Studio 2010, click File, point to New, and then click Project.
In the Installed Templates section, navigate to the Other Project Types node, click Visual Studio Solutions, and then click Blank Solution.
At the top of the screen, select .NET Framework 3.5, type Begin in the Name box, and then click OK.
On the File menu, point to New, and then click Project.
In the Installed Templates section, expand the Visual C# node, click Silverlight, and then click Silverlight Application.
At the top of the screen, select .NET Framework 3.5, type SPSilverlightExample in the Name box, and then click OK.
In the New Silverlight Application dialog box, click OK.
Next, add a reference to the SharePoint Silverlight client object model. In Solution Explorer, right-click the SPSilverlightExample node, and then click Add References.
Navigate to the following folder: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin.
Select Microsoft.SharePoint.ClientSilverlight.dll and Microsoft.SharePoint.Client.Silverlight.Runtime.dll, and then click OK.

Add Code to Access and Display SharePoint List Data

In this task, you add code to the project that enables you to access and display the SharePoint list data.

To add code to the project

To display the toolbox, on this View menu, click Toolbox.
From the toolbox, drag a DataGrid control onto the existing grid in the Page.xaml Silverlight Designer.
Expand the DataGrid control to use the whole page. In the Properties pane, set the following properties to the values that are shown:

Property

Value

Width

Auto

Height

Auto

HorizonalAlignment

Stretch

VerticalAlignment

Stretch

Margin

0
Also in the Properties pane, select the AutoGenerateColumns check box.
Open App.xaml.cs and then add the following using statements to the top of the file.
```
using Microsoft.SharePoint.Client;
using System.Threading;
```
Add the following code to the beginning of the Application_Startup method.
```
ApplicationContext.Init(e.InitParams, SynchronizationContext.Current);
```
Open MainPage.xaml.cs and then add the following using statement to the top of the file.
```
using Microsoft.SharePoint.Client;
```

Property	Value
Width	Auto
Height	Auto
HorizonalAlignment	Stretch
VerticalAlignment	Stretch
Margin	0

Add the following class before the MainPage class.

public class Project
{
    public string Title { get; set; }
    public DateTime DueDate { get; set; }
    public string Description { get; set; }
}

Add the following variable to the MainPage class.
```
private ListItemCollection _projects;
```

Add the following code to the MainPage method after the call to InitializeComponent.

ClientContext context = new ClientContext(ApplicationContext.Current.Url);
context.Load(context.Web);
List Projects = context.Web.Lists.GetByTitle("Projects");
context.Load(Projects);

CamlQuery query = new Microsoft.SharePoint.Client.CamlQuery();
string camlQueryXml = "<View><Query><Where><Gt>" +
    "<FieldRef Name='Due_x0020_Date' />" +
    "<Value Type='DateTime'>2008-01-1T00:00:00Z</Value>" +
    "</Gt></Where></Query><ViewFields>" +
    "<FieldRef Name=\"Title\" /><FieldRef Name=\"Description\" />" +
   "<FieldRef Name=\"Due_x0020_Date\" />" +
    "</ViewFields></View>";

query.ViewXml = camlQueryXml;
_projects = Projects.GetItems(query);
context.Load(_projects);
context.ExecuteQueryAsync(new ClientRequestSucceededEventHandler(OnRequestSucceeded), null);

Add the following code after the MainPage method.

private void OnRequestSucceeded(Object sender, ClientRequestSucceededEventArgs args)
{
    // This is not called on the UI thread.
    Dispatcher.BeginInvoke(BindData);
}

private void BindData()
{
    List<Project> projects = new List<Project>();
    foreach (ListItem li in _projects)
    {
        projects.Add(new Project()
        {
            Title = li["Title"].ToString(),
            DueDate = Convert.ToDateTime(li["Due_x0020_Date"].ToString()),
            Description = li["Description"].ToString()
        });
    }
    dataGrid1.ItemsSource = projects; // must be on UI thread
}

The code that you added in the previous steps initializes the SharePoint Silverlight client object model context (ClientContext). It then gets a reference to the Projects list and runs a simple CAML query against the list to retrieve all projects with a due date later than 1/1/2008. The results are converted into a list of Projects and bound to the Silverlight DataGrid control.

Deploy and Test the Solution

In this task, you deploy and then test the solution by adding the Web Part to the page on the SharePoint site.

To deploy and test the solution

To deploy the solution to SharePoint, the resulting .xap file that is created by the Silverlight project must be in the C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin folder.

Right-click the SPSilverlightExample node, click Properties, and then select Build.
Change the Output path to C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin.
Build the solution by right-clicking the SPSilverlightExample node, and then clicking Build. The .xap file is copied to the required SharePoint directory and you are ready to add the Silverlight Web Part to the SharePoint site.
Open Internet Explorer and navigate to the SharePoint site.
Select the Edit icon at the top of the page.
Click Insert, and then click Web Part.
From the Category list, click Media and Content, from the Web Part list, click Silverlight Web Part, and then click Add.
In the Silverlight Web Part dialog box, type /_layouts/ClientBin/SPSilverlightExample.xap as the URL, and then click OK.

The Web Part should resemble Figure1.

Figure 1. Silverlight Web Part listing Project list items

Share via