Using The Silverlight DataGrid

This post has been updated to work with the RTW version of the Silverlight 2 DataGrid.  The code examples are not guaranteed to work with previous Beta versions of the DataGrid.  Read more about the features that the Silverlight 2 DataGrid has to offer...

If you have ever worked on an application that displayed large amounts of data, one of the cornerstones of your application was probably a DataGrid control.  We have provided four .NET DataGrids over the years, two for ASP.NET and two for Windows Forms, but until now Silverlight and WPF were left out of the party. 

At MIX 2008 we shipped the first preview of the Silverlight DataGrid and a preview of it in WPF was also shown.  Now that it is out there people want to know how to use it.  If you are one of those people, then you have come to the right place.  Here's a quick guide on how to get up and running with a Silverlight DataGrid.

Step 0: Create A Silverlight Project

Start a new Silverlight Application as outlined in my previous post.  When given the option, choose the default "Add a new ASP.NET Web project" option.

Step 1: Add a DataGrid

If everything went smoothly in the previous step, your project should be loaded and opened to Page.xaml.  Now just find the DataGrid on the Toolbox and drag it into the root layout Grid named "LayoutRoot".


This does a few things behind the scenes:

  1. It adds a reference in your Silverlight project to System.Windows.Controls.Data
  2. It adds an xmlns called "data" to the root UserControl that specifies that the DataGrid is in the System.Windows.Controls namespace and located in the System.Windows.Controls.Data assembly

  3. It adds an instance of the DataGrid as a child of "LayoutRoot"

If you are the type of the person who likes to see things working after each step, feel free to F5 (choose the option to allow debugging in the popup) and take in the awesome sight that is an empty DataGrid.


Not much here, so lets fill it with something.

 Step 2: Set the ItemsSource and AutoGenerateColumns

The way to make a DataGrid interesting is by giving it some data.  This is done through the DataGrid's ItemsSource property.  This is same property that other controls in WPF and Silverlight, such as ListBox, use to specify where they will get their data.  The one difference here is that you cannot place arbitrary content in it and have it create a collection for you.

Instead you need to provide it a collection of anything that implements IEnumerable such as a List or ObservableCollection.

The ItemsSource can be specified inline in XAML such as:

<data:DataGrid x:Name="dg">
        <!--Something that implements IEnumerable -->

However, it is more commonly set in code behind, which is what we will do in this example. 

Step 2 A: Name the DataGrid and build

Before we go to the code behind you will want to be sure to give the DataGrid a name such as "dg".  Also be sure to build so that you can reference the DataGrid in code:

<my:DataGrid x:Name="dg" ></my:DataGrid>

Step 2 B: Create and Set the Items Source

Now that the DataGrid is ready to have its ItemsSource set, go to the Page's constructor located in the code behind file for Page.xaml (A handy shortcut to do this from within Page.xaml is F7) and add the following line below InitializeComponent:


public Page()
    dg.ItemsSource = "H e l l o W o r l d !".Split();


Public Sub New()
    dg.ItemsSource = "H e l l o W o r l d !".Split()
End Sub

(If you get the build error: "The name 'dg' does not exist in the current context" with the code above be sure to build a second time so that the name has a chance to propagate)

One of the easiest ways to generate an IEnumerable collection is String.Split.  When the resulting array is set as the ItemsSource of the DataGrid a column will be automatically generated since AutoGenerateColumns is true.  When you run the application, it will look like this:


This is a little better, but so far this could be done with a ListBox.  Lets add some more complicated data so that we actually need to use a DataGrid.

Add a new class to your Silverlight project (not the Web project) and name it "Data".


Then add a few properties to bind to.


If you are using C#, you can use the great 3.0 Automatic Properties feature.

public class Data
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public int Age { get; set; }
    public bool Available { get; set; }


Public Class Data
    Private _firstName As String
    Private _lastName As String
    Private _age As Integer
    Private _available As Boolean

    Property FirstName() As String
            Return _firstName
        End Get
        Set(ByVal value As String)
            _firstName = value
        End Set
    End Property

    Property LastName() As String
            Return _lastName
        End Get
        Set(ByVal value As String)
            _lastName = value
        End Set
    End Property

    Property Age() As Integer
            Return _age
        End Get
        Set(ByVal value As Integer)
            _age = value
        End Set
    End Property

    Property Available() As Boolean
            Return _available
        End Get
        Set(ByVal value As Boolean)
            _available = value
        End Set
    End Property
End Class

Once the Data class is defined, it can now be used to provide data for the DataGrid.  Go back to the code behind file for Page.xaml and replace the previous ItemsSource assignment with the following.  A useful trick here is to use the C# and VB 3.0 Object Initializer feature to initialize the Data objects as we add them to the List.


public Page()
    //dg.ItemsSource = "H e l l o W o r l d !".Split();

    List<Data> source = new List<Data>();
    int itemsCount = 100;

    for (int i = 0; i < itemsCount; i++)
        source.Add(new Data() 
            FirstName = "First", 
            LastName = "Last", 
            Age = i, 
            Available = (i % 2 == 0) 

    dg.ItemsSource = source;


Public Sub New()
    'dg.ItemsSource = "H e l l o W o r l d !".Split()

    Dim Source As List(Of Data) = New List(Of Data)
    Dim ItemsCount As Integer = 100

    For index As Integer = 1 To ItemsCount
        Source.Add(New Data() With _
        { _
            .FirstName = "First", _
            .LastName = "Last", _
            .Age = index, _      .Available = (index Mod 2 = 0) _

    dg.ItemsSource = Source
End Sub

When you run this you will notice that columns are created for you. This is because auto-generation takes over, using reflection to create a column for each property in Data, setting the column header to the name of the property, and choosing default column types based on the property type.  For instance the Available column is a DataGridCheckBoxColumn.  (If you did not want this behavior, but rather wanted to choose your own columns, you can do this by setting the DataGrid's AutoGenerateColumns property to false.  For information on choosing your own columns see my post on Defining Columns for a Silverlight DataGrid)


Step 3: Simple Customization of the DataGrid

The easiest way to customize the DataGrid is through a variety of properties.  The other two ways are through Styles and Templates which will be covered in future posts.  Some of the most useful properties for customization are:

GridLinesVisibility & HeadersVisibility

These properties are enumerations that control what gridlines and headers are displayed.

RowBackground & AlternatingRowBackground

These properties are shortcuts to setting the background color for both rows and alternating rows.

ColumnWidth & RowHeight

These properties set the default column width and default row height.

IsReadOnly & CanUserResizeColumns

These properties control if the end user can edit the data in the grid and if the columns can be resized.

For instance if you set the following properties to the following values:

<data:DataGrid x:Name="dg" AutoGenerateColumns="True" 
    GridlinesVisibility="None" HeadersVisibility="All"
    RowBackground="Cornsilk" AlternatingRowBackground="LemonChiffon"
    ColumnWidth="85" RowHeight="30"
    IsReadOnly="True" CanUserResizeColumns="False"

You would get this:


Step 4: Enjoy

Now that you have the basics, enjoy using the DataGrid.  Next time I'll go into how to explicitly define and customize columns instead of using auto generation.

Also, you can read more about the features that the Silverlight 2 DataGrid has to offer...

Comments (89)

  1. Handan Daily says:


    Silverlight DataGrid

    Silmal datagrid!

  2. Hi Scott – thanks for this blog post. When do you gyus plan to virtualize the Grid? Now it is practicaly unusable with large data. What are your plans in this area?


    Keep up the great work 🙂

  3. Hi Valentin – Currently we do have UI virtualization but not data virtualization.  We have been testing the DataGrid with millions of rows and have been seeing favorable results.  Also we plan to continue to make performance enhancements throughout development.  I would love to hear any specific scenarios where you are seeing performance issues.  Please email me through the Email link above so that we can dig into the specifics.  Thanks for the feedback!

  4. Scott Morrison ( the PM for the Silverlight DataGrid) recently posted a very good walk through of using

  5. luoksesi says:

    How can i fill my datagrid with a query of sql?

    i can’t use directly ..i don’t know why =(

    Please, show me an example =D

  6. mani says:

    Great article Scott. Thanks for the blog.

    I am working on DataGrid for last few days and I found it very easy to use initially.

    But as I tried to use it in real life application scenarios, I got stuck.

    I don’t have solutions for

    1. How to get controls like CheckBox and List box (if you add it to grid). for example I want to disable the check box based on data from other columns on same row

    2. How to bind events to controls under the grid

    3. Which event will be raised once data grid is populated?

    I hope to find these answers in future articles. (or in response to my comments 🙂

    Keep up the great work.

  7. Shawn Wildermuth creates Linkable SL Apps, Scott Morrison on Getting Started with SL2 and a walk-thru

  8. BenHayat says:

    Hi Scott;

    You mentioned you have tested the grid with a million records. I’ve been waiting for SL 2.0 for over a year and now that is out, I don’t have any database capabilities to develop business applications that works with data files from SL.

    My first question is, how are you getting a million of records into SL and secondly, when are we going to have database programming incapabilities to develop t-tier apps with SL?

    Thank you and if you can’t answer my second question, could you please point to the right person?

  9. Techniques says:

    Over at Scott Morrison’s blog he has a great entry on how to setup and use the datagrid control in Silverlight

  10. Don Burnett says:

    I highly recommend if you are interested in adding a SQL data source, yes you can do this by creating a webservice and using the LINQ2SQL functions. Remember SL 2.0 is client side so you are going to have to do something still serving it that sql data.. In fact with LINQ you can use any kind data you want..

    Check out this video blog tutorial from the Swiss MSDN TEAM..

    After watching this you should find it very easy to be mapping SQL data to the datagrid…


  11. BenHayat says:

    Hi Don;

    Thank you for the link. Before I get started to develop a complex middle tier data server (using WCF) for my SL client (which can become fairly complex, I like to know what are the plans from MSFT to provide us with some tools for the middle tier. I like to know if Astoria is the solution for SL or id SL team have a more customized solution for SL? Again, I don’t want to re-invent the wheel, if the team is already working on it.

    I’m going to watch the video now, thank you again!

  12. marlongrech says:


    I wrote a very small article on how one can make the DataGrid show up in Blend …


  13. You’ve been kicked (a good thing) – Trackback from

  14. diekus says:

    Hi Scott,

    Interesting indeed. I have a question regarding rendering. The thing is that I’ loading an XML file containing a list of countries and I’ve added to the cs class of country a fielda named include (bool) cause I want to be able to select a country, but when I scroll down upper items that where selected appear unchecked. I wouldn’t say it’s because of binding to the itemsource if we where talking about an aspx application because it would retain it’s state until there’s a postback, but I’m not sure while it happens on a RIA. Does it have to do with rendering when scrolling? if so, why do items that do not go off screen do maintain their state?

    Great blog btw, i’m adding it to my blogroll as soon as i finish building my site

    Thanks in advanced for your attention,


  15. Hi Diego,

    Based on what you are saying I’m guessing that what you have the DataGrid bound to is something like an IEnumerable which does not persist changes made to it. If this is the case, then when you scroll a row out of view and then back in the row’s data is being refreshed from the data source due to a performance increasing process called UI virtualization.  Since the IEnumerable doesn’t accept the changes, you get the original value.  To fix this behavior, instead bind your DataGrid to a List or ObservableCollection.  If you are using XLinq to query your XML then you can use the shortcut method .ToList<T> on the collection that was returned from the Linq expression.  Hope this helps.


  16. Ethan Nagel says:

    Hi, Scott, thanks for the post.   I’m attempting to implement sorting using the DataGrid, do you have an example as a starting point?  Thus far I’ve found it challenging and haven’t found an example (yet) that implements this basic feature.

  17. A very nice walkthrough on using the new Silverlight DataGrid can be reached here: Using The Silverlight

  18. Malky says:

    Hi Scott,

    Since I attempt binding with adding row dynamicly using List<T> I found that we have to set ItemSource property of datagrid to null value before we set again with correspondence List<T>, do you have any solution other than this…?

    Thanks for your attention


  19. Kellen says:

    I’m currently unable to test this myself, but does the silverlight datagrid support freezepanes?  And if not are there any future plans to add this support?

  20. Thomas says:

    I don’t see any mention of paging in this post or in the docs. Is paging not supported by the SL2 DataGrid?

  21. Ethan,

    I’ll be posting a topic on it however there are a dozen or so topics in the queue before it so it could be a while.  To get you started, be sure to bind to an ObservableCollection<T> or some other collection that implements INotifyCollectionChanged.  Then you can change the contents of the collection (such as sorting it) and have these changes reflected in your DataGrid.


    The answer to your question is actually the same as Ethan’s.  To avoid the behavior that you are seeing you need to bind to something that gives collection changed notifications so that the DataGrid knows to update itself.  Go ahead and use an ObservableCollection and you should see the behavior that you want.


  22. Is there a way to set "dinamically" just the shown values… let’s say i want the list work under a List<myIds> but when those ids will be presented then i will "catch" the other data that i will present form any source i want…

  23. If you read my last post , you might have noticed how easy it is to get a Silverlight DataGrid up and

  24. Blogs says:

    Here is the latest in my link-listing series .&#160; Also check out my ASP.NET Tips, Tricks and Tutorials

  25. Hot Topics says:

    Scott Guthrie lists a number of posts and videos about the Silverlight 2.0 DataGrid in March 28th Links

  26. I’ll be using this page to link to Silverlight 2 articles and posts (both ones I write as well ones by

  27. Zqin says:

    Silverlight 2 DataGrid 示范教程发布了

  28. jasonxz says:


    I appreciate the blogs and the great work y’all are doing on the framework.

    But, I’m really lost on one thing:

    I want to make a DataGrid with 7 columns, the value of which each come from a separate table.  All tables are related.  So, I’m struggling with figuring out how I am supposed to get that data into a List or Collection of non-anonymous, non-DataRow objects from the server to the client.  I’m trying to do the whole SL/WCF/EF thing here, I can’t seem to figure out this piece.

  29. Richie Scott says:

    Firstly, what controls can I place in a DataGrids column? I would like to add a date picker, a button, a list (for simple lookups).

    Secondly, does (or when will) the DataGrid support Drag and Drop.



  30. Hi Richie,

    Using a DataGridTemplateColumn you can essentially put any FrameworkElement in a column.  Go ahead and read my next post for more info.

    As far as drag and drop, it is currently not a planned feature.



  31. lakshmi says:

    can any one help me add a check box column to a datagrid???

  32. For information how how to use specific column types such as the CheckBox column, please read: for more info.

    Let me know if you have any questions that were not covered there.



  33. Una nueva cuadrícula de datos entra en liza Después de instalar el conjunto de herramientas necesarias

  34. Nice intro… are you going to write a part 2 talking about the details view?



  35. Now that you know the basics of the Silverlight DataGrid and how to specify the Columns in XAML , you

  36. Hi Braulio,

    Row Details is on the list of upcoming posts and should show up soon.  Thanks for reading.


  37. Gulsen says:

    Can a column have an icon/image? What type would it be?

  38. arigney says:

    Any updates yet on the paging issue?

    thanks guys

  39. Gulsen,

    You can use a TemplateColumn for that.  See for how to use them.

    Hope this helps.


  40. markti says:

    Scott Morrison has a great post on basic DataGrid usage in Silverlight. Check it out!

  41. I’ve been OOF on vacation (Hawaii, where it’s warm!). But I’m back now and here’s a few new sample applications

  42. 星际 says:


  43. 星际 says:


  44. Alexandre says:

    Can I use it with ASP.NET MVC Framework?

  45. yevgeny says:

    Hello Scott,

    Thank you very much for this post! It provides a good introduction to the DataGrid.

    Playing with the DataGrid we encountered a challenge, that we do not succeed to overcome:

    Is there a way to have different RowHeight per row?

    And is it possible to define a functionality that will act like: "RowHeight=Auto"?

    Thanks a lot!


  46. Hi Yevgeny,

    The autosizing feature for rows is coming soon, so stay tuned.


  47. chris says:

    What about data from and to SQL???

  48. Hi Chris,

    There are a few links to the Swiss MSDN Blog who have some great walkthroughs on how to do that here:

    Hope this helps.


  49. Pari says:

    its gud but explain it more its beneficial for



  50. 蓝色飞翔 says:


  51. 蓝色飞翔 says:


  52. 蓝色飞翔 says:



  53. Valerie says:

    Thank you for the helpful information!

    I am having a very strange issue with a SL 2 B1 datagrid concerning the row details and nested datagrid/listbox.

    The main datagrid gets populated based on a selection made from a drop-down control.  Each row of the datagrid displays its row details when moused over.  Depending on the object that is moused over, the row details may be a nested datagrid (I have also tried making it a listbox but get the same problem).  Everything works perfectly the first time around.

    However, if I change the drop-down selection and mouse over an object, the datagrid doesn’t appear… instead I see a solid black line in the upper left area, that is the result of many strings being piled on top of each other.  If it’s a list box, then nothing appears at all.

    I’m manually creating and adding the datagrid/listbox in the preparing row details method in the code behind.  I cannot for the life of me figure out why it works properly for the first item and goes bonkers after that.

    Also, the other objects that do not have dg/lb in their details are showing their details just fine every time.

    I realize there are many factors that could be causing this issue, but I have tried everything I can think of.

    If you have any ideas please email me at


  54. Here is the latest in my link-listing series .&#160; Also check out my ASP.NET Tips, Tricks and Tutorials

  55. Silverlight2.0beta中据说对DataGrid控件有了不少增强,于是在网上搜了下,找到该项目的PM写的一个介绍帖子:

  56. Kalyan says:

    How one can make the DataGrid show up in Blend June 2008 Preview ?

  57. pari says:

    can i change single row style at runtime when i select any row then style of that row should be chaged

  58. Pavlo says:

    Nice post,

    Do you know if a grouping feature is planned for the DataGrid?

  59. Hey,

    Nice work, I have a question here, Last night i was playing with the datagrid and i could find 2 most important feature, which should be there anyway,

    1. There is no rowdatabound event, the closest thing i found was RowLoading event, which fires only once, I was able to change the data using the PropertyChanged event, but I was not able to change the row style.

    2. I was unable to access the Cells property of the DataGridRow class, later i found it but marked as internal, why is that?

  60. borith says:

    can you access SL Datagrid rowtype like datagrid? and could you list all SL Datagrid event?


  61. MerrillMarie says:

    can you update a specific position in a data grid .. ie column 6 row 5 with code behind routine as oposed to doing it manually? My hope is to update the grid without updating the source?

  62. GregT says:

    I find that I can not get the DataGrid to work in the RC0 release. I drag it from the toolbox to the XAML and it is placed in the XAML, but then an error occurs: "The type ‘DataGrid’ was not found…".

    The assembly System.Windows.Controls.Data v2.0.5.0 is referenced.

    My installation:

    VS 2008 SP1, .Net 3.5 SP1, Silverlight 2 RC0

    Any ideas?


  63. GregT says:

    I solved the problem. There is a bug in dragging items from the toolbox to the XAML. I already had a TabControl in the XAML which created the appropriate reference at the top. Apparently when you do this again with a control that references a different assembly it fails. nothing is added to the top (i.e. xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" should be added). If I temporarily delete the reference for the TabControl add the DataGrid – everything works correctly and then I add the reference for the TabControl back in.


  64. As you might have heard , we just released Silverlight 2 , and with it the first version of the Silverlight

  65. DjoDjo says:

    Hi guy,

    Nice post about this ! Hawever, I have a little question about the grid: How can I be notified that the grid has been sorted (after clicking a header) ? I haven’t found any event for that?

    thanks again !


  66. hegi kang says:

    may be datagrid’s scroll system is something wrong

    in the loading_row event, i had creat new binding object and bind DataGrid’s RowVisibility property so some row to be not displayed(visibility.collapsed)

    but when scrolling scrollbar do not work visibility binding, by result all row display

    Scrollbar may be handling DataGrid Row’s RowVisibility property internally..

    my english skil so poor , do understand.

  67. Your Story is Submitted – Trackback from DotNetShoutout

  68. Andrew says:

    Hey Scott, great post and well put together. I am just learning Silverlight, and this was very helpful. Thanks for taking the time and providing such a clear example.

  69. Scott,

    How can I disable virtualization?

    In WPF we can access the VirtualizingStackPanel, but in this case it seems to be something internal to the datagrid and I can’t find how to disable it.

  70. Delay's Blog says:

    Last week, I released the ComputeFileHashes tool for calculating file checksums . (To read more about

  71. 今天无意发现一个老外的博客,上面有一篇讲解如何在silverlight中使用DataGrid的文章,很是不错,把地址记在这里,以方便日后查看

  72. JIM says:

    Hi Scott,

    Thanks for your article about silverlight datagrid .

    I’m learning silverlight datagrid , having some problems.

    How to add a hyperlink column in a silverlight datagrid and the hyperlink column can pass different parameter to it’s page.

    Thanks .

  73. Manokaran says:

    hi scotttt

    its nice to see the example code and ur explaination… its helps me a lot…  keep it up

  74. dotnetguts says:

    Do you have any article for SL Datagrid Sorting and Paging?  – Thanks

  75. Zdenek says:

    This is greate for beginners :o)

    Thank you!

  76. Alan Jackson says:

    Hey Scott, just saw your session on Data Driven RIA’s.  Good talk.  Nice stuff.  I need to ask you though if you could elaborate on the groupby functionality in the out of band release of the datagrid.  To me, that seems more like a reporting type of tool and not as useful as a master – detail – detail relationship that I could have built in traditional datasets.  For example, if you have a collection of Authors who have each have a collection of books and also a collection of videos.  In ASP.Net I would just build a relationship object between those three tables.  It would be nice to be able to decompose that master record into the many collections which it may contain.

    I would also appreciate any feedback you could provide on performing this functionality on a UDF which throws up a table.  In my real world, I might need to pull together 7 different tables for my forms which might involve unions, and the best way to do that is through a UDF.  Forget about ASP Entity Framework at the moment as feel it is only about half backed.

  77. Michael says:

    For a datagrid, how can I bind data without any code behind

    I mean my data will be defined in the xaml file.

    I don’t want code anything in the c# or VB class.

    I know, in a c# code behind class, it is easy to do that. But, what I am trying to do is to dynamic generate xaml file in a string on server side, and send the string to the client side by using WCF service, then, load the xaml file string using XmlReader.Load(fileString), finally the xaml file will be displayed in the client side browser.

    There’re so many reasons that I can’t send data to client side and using c# class to load data to the class properties and sign it to the Datagrid.ItemSource.

    So, I have to build everything in the xaml file string. Can I do it?


  78. venjo says:

    Hi Scott,

    Is it possible to display a new column instead of new row when you display your data in datagrid? I want my data to display from left to right dynamically in a single row.

  79. Mark Brooker says:


    The grid is awesome, but there are definately times when you want to dynamically build the grid.  

    Also …DataSet/DataTable?  The serialization can happen, you just need to find a way to put the string indexers on the DataRow after serialization.  Just replace the underlying ListDictionary<oibject> with a Dictionary<string, object>.  

    Actually, don’t sweat the serialization, just put the Data Objects in the Silverlight side and support them in the grid.

  80. Niraj Kr. Rai says:

    Excellent Grid Example for silver Light.

  81. Key says:

    Thanks mate. It’s really useful post for beginners. Cheers.

  82. This series of articles is truely great! Solved a number of problems for me to do with a silverlight control I am building.

    Many Many thanks!

  83. iris says:

    thank u for ur great n simple tutorial…:)

  84. Philipp says:

    IMO, data virtualization is a must have for the grid. I don't care whether it performs nicely with millions of rows. For one thing, I don't want to keep them in memory, and – more importantly – I don't want to fetch them from my server at once. This is quite a show stopper for us I'm afraid.

  85. Herman_whyd says:


    this very helpfull for me,,

  86. Mac says:

    Useless information. I need to know how to enable scroll bars in a Siverlight datagrid. It's simply nowhere to be found in Microsoft's documentation. I would think that something that baisic would be well documented, heck it should be automatic but it's not. Thanks for wasting a full day and starting another one…

  87. mkamoski says:

    Scott  — Please help. That is a nice article. Can you please explain a bit more? If one sets AutoGenerateColumns=false then how can one add columns programmatically to a Silverlight DataGrid? Please advise. Thank you. — Mark Kamoski

  88. Hi Mac,

    To enable scrollbars, make sure that your DataGrid is either in a control that constrains its height (like a Grid) or explicitly set a height.


    Looks like you already found the article, but for others who are interested:…/defining-columns-for-a-silverlight-datagrid.aspx

    Hope this helps!


  89. Ezequias Rocha says:


    And if I don't know the exact number of columns at design time? how do I fullfill the datagrid dynamically without a class?


    – Ezequias

Skip to main content