Create Silverlight Graphs with SharePoint 2010 Data by Using LINQ

Artigo
07/24/2014

SharePoint QuickStart Banner

Getting Started with Web Development in SharePoint 2010: Create Microsoft Silverlight applications that retrieve Microsoft SharePoint 2010 list data by using LINQ and then display the data in graphs.

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

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

Published: June 2010

Provided by: Frank Rice, Microsoft Corporation

Watch the Video

In this exercise, you create a Microsoft Silverlight 3 application that displays SharePoint list data in a graph by using the Silverlight Graphing controls. To complete this task, you must do the following:

Create a Silverlight Application Project
Add Code to Access List Data and Display It in a Silverlight Graph Control
Deploy and Test the Solution

This exercise assumes that you completed Create Silverlight Applications to Access SharePoint 2010 Data. That topic describes how to create a Microsoft Silverlight 3 application that retrieves SharePoint list data and then displays it in a DataGrid control on the website.

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, in the Name box, type SilverlightEmployeeContributionsGraph, and then click OK.
In the New Silverlight Application dialog screen, click OK.
Next, add a reference to the SharePoint Silverlight client object model. In Solution Explorer, right-click the SilverlightEmployeeContributionsGraph 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.
Next, add a reference to the Silverlight Charting Controls assembly. It is available in the Add Reference dialog screen, on the .NET tab, and is named System.Windows.Controls.DataVisualization.Toolkit.

Note

If you do not see this assembly in the Add Reference dialog screen, you can get it by installing the Microsoft Silverlight Toolkit.

Add Code to Access List Data and Display It in a Silverlight Graph Control

In this task, you add code that enables you to access SharePoint list data by using LINQ and the Silverlight Charting controls, to display the data in a graph.

To add code to the project

In Solution Explorer, right-click the App.xaml file, and then click View Code. 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);
```

In the XAML view of the MainPage.xaml file, add the following XML namespace in the UserControl element.

xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"

Add the following Silverlight Charting control inside the grid element.

<chartingToolkit:Chart x:Name="chart" Width="350" Height="250" Title="Team Contributions">
    <chartingToolkit:Chart.Series>
        <chartingToolkit:ColumnSeries ItemsSource="{Binding}" 
            DependentValuePath="Contributions" 
            IndependentValuePath="Name"
            AnimationSequence="FirstToLast"   
            Title="Contributions" IsSelectionEnabled="True" />
    </chartingToolkit:Chart.Series>
</chartingToolkit:Chart>

Open MainPage.xaml.cs and then add the following using statement to the top of the file.
```
using Microsoft.SharePoint.Client;
```

Add the following classes before the MainPage class.

public class EmployeeContributions
{
    public string Name { get; set; }
    public string TeamName { get; set; }
    public decimal Contributions { get; set; }
}

public class TeamContributions
{
    public string Name { get; set; }
    public decimal Contributions { get; set; }
}

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

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 employees = context.Web.Lists.GetByTitle("Employees");
context.Load(employees);

CamlQuery query = new CamlQuery();
string camlQueryXml = null;

query.ViewXml = camlQueryXml;
_employees = employees.GetItems(query);
context.Load(_employees);
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<EmployeeContributions> employees = new List<EmployeeContributions>();

        // Get the list item values into a strongly-typed class.
        foreach (ListItem li in _employees)
        {
            employees.Add(new EmployeeContributions
            {
                Name = li["Title"].ToString(),
                TeamName = li["Team"].ToString(),
                Contributions = Convert.ToDecimal(li["Contribution_x0020__x0028_in_x00"])
            });
        }

        // Use LINQ to organize employees by team name and then total team contributions.
         List<TeamContributions> teams = employees
             .GroupBy(e => e.TeamName)
             .Select(t => new TeamContributions
             {
                 Name = t.Key,
                 Contributions = t.Sum(e => e.Contributions)
             }).ToList();
         // This must be on a UI thread.
         chart.DataContext = teams; 
}

In the code that you added, the SharePoint Silverlight client object model retrieves data from a SharePoint list. When the employee contribution items are added to the list, LINQ is used to organize employees into teams and sum their contributions. Team contributions are then set as the chart’s data source.

Deploy and Test the Solution

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

To 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 SilverlightEmployeeContributionsGraph node, click Properties, and then click 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 SilverlightEmployeeContributionsGraph node, and then clicking Build. The .xap file is copied to the required directory and you are ready to add the Silverlight Web Part to the SharePoint web site.
Open Internet Explorer and navigate to the website specified previously.
Next, you update the Silverlight Web Part added in Create Silverlight Applications to Access SharePoint 2010 Data to point to the Silverlight Charting control that you created in this topic. Click the drop-down list in the upper-right-corner of the Silverlight Web Part, and then click Edit Web Part.
Click Configure on the far right of the screen, and then type /_layouts/ClientBin/SilverlightEmployeeContributionsGraph.xap in the Silverlight Web Part dialog screen.
Click OK and then click OK at the bottom of the Silverlight Web Part sidebar.

The result should resemble Figure 1.

Figure 1. Silverlight Chart Web Part

Compartilhar via