Getting Started with Adobe After Effects - Part 6: Motion Blur

Upload Image Close it
Select File

Dinesh's Blog
Browse by Tags · View All
brh 20
silverlight 18
Silverlight 4.0 9
bing 7
bing maps 6
wcf services 5
map 5

Archive · View All
August 2010 10
September 2010 3
July 2010 3
June 2010 3
October 2010 1

Different Ways to Bind Data Grid in Silverlight

Sep 28 2010 7:00AM by Dinesh Sodani   

In the previous article I described the basics of Data Binding in Silverlight. In this article I will demonstrate How to Bind Data grid with different data sources like:

  • Binding with Static Collection/List
  • Binding with XML
  • Binding with Database via WCF Services
  • Binding with Database via WCF RIA Services

To setup an example let’s create a new Silverlight project is VS 2010 called “DataBinding”. See How to create Silverlight application in VS 2010” for more information. Let’s create add a new Class file called “Item.cs” with Item Class as following:

namespace DataBinding
    public class Item
        public string ItemNumber { get; set;}
        public string ItemDescription { get; set; }
        public int Quantity { get; set; }
        public Item()
        public Item(string ItemNumber, string ItemDescription, int Quantity)
            this.ItemNumber= ItemNumber;
            this.ItemDescription = ItemDescription;
            this.Quantity = Quantity;

We will refer the above class to bind the data gird. Let’s add a DataGrid on the MainPage.xaml page by drag & drop the data grid control from the toolbox. You will see the below in MainPate.xaml page..

<UserControl x:Class="DataBinding.MainPage"
    d:DesignHeight="513" d:DesignWidth="662" 
    <Grid x:Name="LayoutRoot" Background="White" Height="540" Width="664">
        <sdk:DataGrid AutoGenerateColumns="False" 
                      Height="100" HorizontalAlignment="Left" 
                      Margin="12,21,0,0" Name="dataGrid1" 
                      VerticalAlignment="Top" Width="311" />

Let’s change the property AutoGenerateColumns to True and create a Collection of Item class in Item.cs class file as following:

public class ItemsCollection : Collection
   public ItemsCollection()
      Add(new Item("1", "Item Name1", 1));
      Add(new Item("2", "Item Name2", 2));
      Add(new Item("3", "Item Name3", 3));

On the MainPage’s constructor write following to bind the data grid with collection object

dataGrid1.ItemsSource = new ItemsCollection();

Same thing you can also do by setting the ItemSource property in XAML and then assign DataContext of datagrid as following:


dataGrid1.DataContext = new ItemsCollection();

Now the run the project you will the data grid have three column and three rows of items we added in the collection.

Binding with XML

In Silverlight, you cannot bind Data Grid directly to XML data. A possible workaround for this is to convert the XML to CLR objects, and then bind to the CLR object.

Let say we have following XML file called “ItemList.xml” for the list of items…

<?xml version="1.0" encoding="utf-8" ?>
    <Item ItemNumber="1" ItemDescription="Item Name1" Quantity="1" />
    <Item ItemNumber="2" ItemDescription="Item Name2" Quantity="2" />
    <Item ItemNumber="3" ItemDescription="Item Name3" Quantity="3" />

Let’s first create a function which returns the Item object by passing the XML Element

private Item GetItem(XElement el)
    Item s = new Item();
    s.ItemDescription = el.Attribute("ItemDescription").Value;
    s.ItemNumber = el.Attribute("ItemNumber").Value;
    s.Quantity = Convert.ToInt32(el.Attribute("Quantity").Value.ToString());
    return s;

We can have two cases.

  1. XML is in Silverlight project
  2. XML is on Sever Side(we have URL or xml file is in the Client Bin Folder)

When XML is in Silverlight project

Let’s a create function which return the list of items

 public List<Item> GetItemList()
    List<Item> itemList = new List<Item>();
    XElement doc = XElement.Load(@"Data/ItemList.xml");

    itemList = (from el in doc.Elements()
                select GetItem(el)).ToList();
    return itemList;

We can assign the Itemsource of data grid as following :

dataGrid1.ItemsSource = GetItemList();

When XML is on Sever Side

We need to create a asynchronous method to get the content of XML file from the server and then create the List of items from the xml. See the code below

private void ReadDataFromXML()
    Uri url = new Uri("ItemList.xml", UriKind.Relative);
    WebClient client = new WebClient();
    client.DownloadStringCompleted += new DownloadStringCompletedEventHandler(client_DownloadStringCompleted);

void client_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
    dataGrid1.ItemsSource = GetItemList(e.Result);
public List<Item> GetItemList(string xmlcontent)
    List<Item> itemList = new List<Item>();

    XElement doc = XElement.Parse(xmlcontent);

    itemList = (from el in doc.Elements()
                select GetItem(el)).ToList();

    return itemList;

You will need to add reference of System.Xml.Linq.

Binding with Database

Silverlight project doesn't support normal ADO.NET objects like DataTable, DataSet, DataColumn, Database connection providers like SqlConnection, OledbConnection objects. You can use System.Data namespace but that contains Services related stuffs not ADO.NET stuffs. To get the data from the database we need to create WCF Data Services or WCF RIA Services… Read “Introduction to WCF Services” to get more details.

Create Database

Let’s fist create a database and a table called tblItem as following:

CREATE TABLE [dbo].[tblItem](
	[ItemNumber] [varchar](50) NULL,
	[ItemDescription] [varchar](50) NULL,
	[Quantity] [int] NULL

Let’s insert few records in the table…

VALUES ('1','Item Name1',1),
       ('2','Item Name3',2),
       ('3','Item Name3',3)

Creating WCF Service

Now create “CItem” class in web project for Item as following...

using System.Runtime.Serialization;
namespace DataBinding.Web
    public class CItem
        public string ItemNumber { get; set;}
        public string ItemDescription { get; set; }
        public int Quantity { get; set; }

Let’s add Silverlight-enabled WCF Service in the Web project called “DataService.svc”

New WCF Service

Let’s create a function in the wcf service so that it return the list of items as following:

using System;
using System.Collections.Generic;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.Data;
using System.Data.SqlClient;
namespace DataBinding.Web
    [ServiceContract(Namespace = "")]
    public class DataService
        static string connectionString = "Data Source=.\\sql2008;Initial Catalog=DataBinding;Integrated Security=True;";
        public List<CItem> GetItems()
            SqlConnection sqlConnection = new SqlConnection(connectionString);
            DataSet objSet = new DataSet();

            SqlCommand sqlCommand = new SqlCommand();
            sqlCommand.Connection = sqlConnection;
            sqlCommand.CommandText = "Select * FROM tblItem";
            SqlDataAdapter sqlDataAdapter = new SqlDataAdapter();
            sqlDataAdapter.SelectCommand = sqlCommand;

            List<CItem> lstResult = new List<CItem>();
            CItem objEmployee;

            if (objSet.Tables.Count > 0)
                foreach (DataRow dr in objSet.Tables[0].Rows)
                    objEmployee = new CItem();
                    objEmployee.Quantity = Convert.ToInt32(dr["Quantity"]);
                    objEmployee.ItemDescription = dr["ItemDescription"].ToString();
                    objEmployee.ItemNumber = dr["ItemNumber"].ToString();
            return lstResult;

Consuming WCF Service in Silverlight project

To consume the WCF service we just created we need to add Service Reference of that WCF service in the Silverlight project.

WCF Service Reference

Now we need to create object of the WCF service client and event handler which will get the results sent by the WCF service as following:

private void ReadDataFromDatabase()
    DaService.DataServiceClient  t = new DaService.DataServiceClient();
    t.GetItemsCompleted += new EventHandler<DaService.GetItemsCompletedEventArgs>(GetItemCompleted); 

void GetItemCompleted(object sender, DaService.GetItemsCompletedEventArgs e)
    dataGrid7.ItemsSource = e.Result; 

You are done… Run the project you will see the grid is show data from the database with three rows and column we inserted.

So far we set the AutoGenerateColumns property of data grid to True. So those columns are generated automatically for all the properties of Item Class.Let’s define the column and set the binding property in XAML:

<sdk:DataGrid AutoGenerateColumns="False" 
                Height="100" HorizontalAlignment="Left" 
                Margin="341,21,0,0" Name="dataGrid2" 
                VerticalAlignment="Top" Width="311" >
        <sdk:DataGridTextColumn CanUserReorder="True" CanUserResize="True" 
                CanUserSort="True" Width="Auto" 
                Binding="{Binding ItemNumber}" 
        <sdk:DataGridTextColumn CanUserReorder="True" CanUserResize="True" 
                CanUserSort="True" Width="Auto" 
                Binding="{Binding ItemDescription}" 
        <sdk:DataGridTextColumn CanUserReorder="True" CanUserResize="True" 
                CanUserSort="True" Width="Auto" 
                Binding="{Binding Quantity}"

In the next article we will see “How to Bind Data Grid with Database via WCT RIA Services” and what are different column types in Datagrid…

You may find below little bit interesting…

What is difference between ItemSource and DataContext

  1. DataContext expects an object type where ItemsSource expects IEnumerable type objects.
  2. DataContext is a dependency property is exposed by FrameworkElement base class,where as ItemsSource is defined by the ItemsControl class. All the descendants of FrameworkElement can utilize the DataContext property and set an object to its value. But we can only set a type of IEnumerable (or instance of class that derives from).
  3. DataContext does not generate template, it only used to hold common data for other controls to bind. In terms of ItemsSource property, it is mainly used to generate template regardless of you set it in XAML or in the code behind. 
  4. DataContext is mainly used to hold common data that other child want to share. Thus it can be inherited by other child elements without problem. But for ItemsSource, it not used to share data in the visual tree. It is only valid for the element that defined. There is still one thing to be noted is that the child element can override the DataContext of the perent DataContext no mater directly or indirectly.

Tags: silverlight, brh, Xml Data source, #DOTNET, #SILVERLIGHT, wcf data contracts, wcf, wcf services, wcf contracts, wcf service contracts, #ASP.NET, Data Binding, DataGrid,

Dinesh Sodani
30 · 6% · 1807



  • Hi Dinesh,

    I have did as per your guidance, but in last step i am facing an error

    void GetItemCompleted(object sender, DaService.GetItemsCompletedEventArgs e) { dataGrid7.ItemsSource = e.Result; }

    At this point of time i am getting the below "The type or namespace name 'GetItemsCompletedEventArgs' does not exist in the namespace 'databinding.Web.DaService' (are you missing an assembly reference?)"

    Please give me some suggestion

    Thanks, Shijin.

    commented on Feb 21 2011 7:34AM
    1023 · 0% · 26
  • I have dont this suucessfully...but i add edit button to end of row and displaying child window where edit can be possible but i didnt get selected row value for editing in child window...

    can it possible...

    please tel me what i have to changed as per this application....

    thank you...

    commented on Sep 3 2011 5:42AM
    3162 · 0% · 2

Your Comment

Sign Up or Login to post a comment.

"Different Ways to Bind Data Grid in Silverlight" rated 5 out of 5 by 2 readers
Different Ways to Bind Data Grid in Silverlight , 5.0 out of 5 based on 2 ratings
    Copyright © Rivera Informatic Private Ltd Contact us      Privacy Policy      Terms of use      Report Abuse      Advertising      [ZULU1097]