Silverlight Graph using SharePoint List 2010

Assuming SharePoint Site(http://sp2010:22913/sites/sc2/) has following List called  "Programming-Languages"(as shown below)

Step1) Create Silverlight project using .Net 3.5 (GRAPHDEMO)

Step 2)  Add Sharepoint Silverlight dll reference
             Located in 
             %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\LAYOUTS\ClientBin 

            1)Microsoft.SharePoint.Client.Silverlight.dll 
            2) Microsoft.SharePoint.Client.Silverlight.Runtime.dll 


Step 3)  Add reference System.Windows.Controls.DataVisualization.Toolkit.


Step 4)  Add another namespace in MainPage.xaml for charting
           xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"


Step 5) Drap & drop  Chart Control into MainPage.xaml



        <chartingToolkit:Chart  x:Name="Chart1" HorizontalAlignment="Left" Margin="10,10,0,0"  Title="Programming Language Usage" VerticalAlignment="Top" Height="225" Width="390">
            <chartingToolkit:ColumnSeries DependentValuePath="Usage"  ItemsSource="{Binding}"
                                          IndependentValuePath="Name" 
                                           AnimationSequence="FirstToLast"
                                            IsSelectionEnabled="True"
                                          >
            </chartingToolkit:ColumnSeries>
        </chartingToolkit:Chart>

Step 6) Add new class ProgramUsage.cs

  it has 2 properties , 1 for Programming Language 2 for Usage

public class ProgramUsage

    {

        public string Name { get; set; }

        public int Usage { get; set; } 

    }

Step 7)    Add following varibles to  MainPage.xaml.cs

        ClientContext ctx = null; //sharepoint client context

        Web web = null;  //web

        List list = null;  //list refernce

        ListItemCollection allItems = null; //lits item collection

        List<ProgramUsage> pUsage= new List<ProgramUsage>(); //list of items parsed added to List of ProgramUsage 

in the constrcutor  ad\fter InitializeComponent() add this

this.Loaded += new RoutedEventHandler(MainPage_Loaded);

Add MainPage_Loaded method and try to get   list asynchronously

        void MainPage_Loaded(object sender, RoutedEventArgs e)

        {

            try

            {

                ctx = new ClientContext("http://sp2010:22913/sites/sc2/");//ApplicationContext.Current.Url);

               // ClientContext.Current;

                

                web = ctx.Web;

                

                ctx.Load(web);

               // ctx.ExecuteQuery();

                list = web.Lists.GetByTitle("Programming-Languages");

                CamlQuery query = CamlQuery.CreateAllItemsQuery();

                allItems

                  = list.GetItems(query);

                ctx.Load(allItems);

                ctx.ExecuteQueryAsync(successEventHandler, FailedEventHandler);

            }

            catch (Exception ex)

            {

                label1.Content = ex.Message;

            }

        }

//Add success,failed delagates methods

        void successEventHandler(object sender, ClientRequestSucceededEventArgs args)

        {

            //Bind datagrid asynchronously with delegate

            Action a = new Action(UpdateGrid);

            this.Dispatcher.BeginInvoke(a);

        }

     //Update chart with delegate/ashynchronously

        void UpdateGrid()

        {

            try

            {

                foreach (ListItem item in allItems)

                {

                    ProgramUsage ProgramL =

                        new ProgramUsage

                        {

                            Name = item["Title"].ToString(),

                            Usage = (item["Usage"] != null) ? System.Convert.ToInt16(item["Usage"]) : 0

                        };

                    

                    pUsage.Add(ProgramL);

                }

                Chart1.DataContext = pUsage;

            }

            catch (Exception ex)

            {

                label1.Content = ex.Message;

                

            }

        }

        void FailedEventHandler(object sender, ClientRequestFailedEventArgs args)

        {

            label1.Content = args.Message;

        }

Step 8)  BUILD THE PROJECT  GRAPHDEMO.XAP FILE WILL BE GENERATED.

STEP 9)  DEPLOY SILVERLIGHT .XAP FILE IN SHAREPOINT

               Upload generated .xap file into document library .

 in this example: http://sp2010:22913/sites/sc2/doclib/GRAPHDEMO.XAP

            GRAPHDEMO.XAP  uploaded to doclib --> document library.

STEP 10)  Create a Web page IN SHAREPOINT SITE,   insert Silverlight Web part

              note: Silverlight Web part located in   "Media & Content"-->Silverlight Web part.

STEP 11)   In Silverlight webpart, it asks for .xap file path
                  give same path  in Step 9)

Step 12)  OUTPUT

Silverlight in Sharepoint 2010 webpart

Step 1) Create Silverlight project using Visual Studio 2010

Step2) Add Sharepoint Silverlight dll Reference  

located in
 %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\LAYOUTS\ClientBin


1)Microsoft.SharePoint.Client.Silverlight.dll
2) Microsoft.SharePoint.Client.Silverlight.Runtime.dll


Step 3)   Add  DataGrid & button to xaml file



    <Grid x:Name="LayoutRoot" Background="White">
        <sdk:DataGrid AutoGenerateColumns="True" Height="92" HorizontalAlignment="Left" Margin="10,10,0,0" Name="dataGrid1" VerticalAlignment="Top" Width="378" />
        <Button Content="Get List Data" Height="34" HorizontalAlignment="Left" Margin="10,120,0,0" Name="GetListData" VerticalAlignment="Top" Width="211" Click="GetListData_Click" />
    
Step 4) Add Button event handler 

in the button event handler.
 //1. get current context
 //2. get web on which silverlight xap file runs
//3. get perticular list in that web
//4. load all items in the list
//silverlight only supports asynchronous mechanism, so load with ExecuteQueryAsync    
   
  private void GetListData_Click(object sender, RoutedEventArgs e)
        {
             ctx = ClientContext.Current;
             currentWeb=ctx.Web;
            ctx.Load(currentWeb);
            list=currentWeb.Lists.GetByTitle("Sales-Details");//get Sales-details custom list
            //query all items in the list.
            CamlQuery query = CamlQuery.CreateAllItemsQuery();
            allItems=list.GetItems(query);
            ctx.Load(allItems);


            ctx.ExecuteQueryAsync(successEventHandler, FailedEventHandler);




        }

        void FailedEventHandler(object sender, ClientRequestFailedEventArgs args)

        {

        }

       //On success this method gets executed.

        void successEventHandler(object sender, ClientRequestSucceededEventArgs args)

        {

           //Bind datagrid asynchronously with delegate

            Action a = new Action(UpdateGrid);

            this.Dispatcher.BeginInvoke(a);

        }

        void UpdateGrid()

        {

            foreach(ListItem item in allItems)

            {

                PurchaseOrder oRder = new PurchaseOrder { TITLE= item["Title"].ToString()};

                poList.Add(oRder);

                

            }

            dataGrid1.ItemsSource = poList;

        }

Step 5) Add a class  PurchaseOrder  with single property in that

namespace SilverlightApplication2

{

    public class PurchaseOrder

    {

        private string Title;

        public string TITLE

        {

            get { return Title; }

            set { Title = value; }

        }

    }

}

Step 6) If user has more columns/fields in the list then add corresponding properties in PurchaseOrder class

           and samething in UpdateUI method.

Step 7)  Build the Silverlight Project,

              .XAP file will be generated.

Step 8) Upload generated .xap file into document library .

             in this example: http://sp2010:22913/sites/sc2/doclib/SilverlightApplication2.xap

           SilverlightApplication2.xap uploaded to doclib --> document library.

Step 9)   Create a Web page,   insert Silverlight Web part

              note: Silverlight Web part located in   "Media & Content"-->Silverlight Web part.

Step 10)  The following Output will generate

                            Figure1) Empty data Grid

 After button click, actual data in the list will be displayed.

Complete Sample Code in  MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.SharePoint.Client;
using Microsoft.SharePoint.Client.Utilities;
namespace SilverlightApplication2
{
    public partial class MainPage : UserControl
    {
        ClientContext ctx = null;
        Web currentWeb = null;
        ListItemCollection allItems = null;
        List list = null;
        System.Collections.Generic.List<PurchaseOrder> poList =
            new List<PurchaseOrder>();
        public MainPage()
        {
            InitializeComponent();
        }


        private void GetListData_Click(object sender, RoutedEventArgs e)
        {
             ctx = ClientContext.Current;
             currentWeb=ctx.Web;
            ctx.Load(currentWeb);
            list=currentWeb.Lists.GetByTitle("Sales-Details");
            CamlQuery query = CamlQuery.CreateAllItemsQuery();
            allItems=list.GetItems(query);
            ctx.Load(allItems);


            ctx.ExecuteQueryAsync(successEventHandler, FailedEventHandler);




        }


        void FailedEventHandler(object sender, ClientRequestFailedEventArgs args)
        {
        }
        void successEventHandler(object sender, ClientRequestSucceededEventArgs args)
        {
            Action a = new Action(UpdateGrid);
            this.Dispatcher.BeginInvoke(a);
        }


        void UpdateGrid()
        {
            foreach(ListItem item in allItems)
            {
                PurchaseOrder oRder = new PurchaseOrder { TITLE= item["Title"].ToString()};


                poList.Add(oRder);
                
            }


            dataGrid1.ItemsSource = poList;
        }


    }
}