I finally downloaded and started using Silverlight 2.0. In a nutshell, it's worlds better than Silverlight 1.0 and 1.1. Of all the new controls we now have access to, the one I was most interested in seeing was the DataGrid. WPF doesn't even have a DataGrid (if you don't count the ListView with a GridView applied), so I surprised when I learned Silverlight was shipping with one. This tutorial is going to introduce you to the DataGrid and demonstrate how to populate it with data from an RSS feed.

Here's the application we're building today. It contains a DataGrid and a couple of buttons. When the left button is clicked, Silverlight will request our RSS feed and populate the DataGrid with the title and date of each post. When the right button is pressed, the DataGrid will be cleared.

Building the User Interface

The first thing we need to do is get the DataGrid and our buttons onto our Silverlight UserControl. I'm going to assume you know how to get a Silverlight project up and running. Just in case you don't, here's a great 'Hello World' tutorial that should show you everything you need to know.

When you create a new Silverlight project, you're presented with a UserControl and a Grid. I really like Grids for layout, so I'm going to keep it and add my DataGrid as a child.

I added two rows to my layout grid - one to hold the DataGrid and another to hold my buttons. I set the height of the button row to 40 pixels. I then added a DataGrid to my layout. I simply dragged the control from the toolbox, which automatically added the xmlns:my declaration for me. The DataGrid sits in the System.Windows.Controls.Data namespace, so you'll have to remember to bring that into the XAML if you didn't drag and drop the control like I did.

To start out, I set the AutoGenerateColumns property to true to let the DataGrid create and name columns for me. This is a great way to quickly get data on the screen without having to manually set up each column individually, which we'll be doing later in this tutorial.

Next up are the buttons. I simply put these in another layout control called a StackPanel. StackPanels are perfect for creating individual rows or columns of controls.

Requesting the RSS Feed

At this point, you've got something that looks pretty close to the finished product. Now we need to go out and download the RSS feed used to populate the DataGrid. Silverlight 2.0 provides us with a WebClient object that makes this super easy. The WebClient is located in the System.Net namespace.

I added this code to the click event handler for my btnPopulate button. The first thing I do is disable the button while it's requesting the feed. That way the user can't make another request while one is already happening. It also gives the user a little bit of feedback that something is actually happening while the data is being requested. Next, I make a WebClient object and hook the event that gets fired when the request is finished. Lastly, I instruct the client to request the rss feed asynchronously so the UI can still respond while it's working.

An important piece of information here is that the WebClient can't just request any URL. It can always request a URL on the same domain as the host website, but if the domain is different, the remote server will have to have an XML policy file that gives permission to read the data. Almost all sites that host rss feeds will include this file since they want you to be able to read the rss using other websites and applications.

Populating the Silverlight DataGrid

Now that we've got the data requested, we need to get it into our DataGrid. Fortunately, Silverlight 2 comes with LINQ, which makes parsing XML easier than ever before. If you're new to LINQ, here's one of our introductory tutorials on the subject. The code to fill the DataGrid is going to be added to the event handler for the WebClient's DownloadStringCompleted event.

Before I started parsing the XML, I needed to create a new object to hold the information about one of our posts. In this case the title and the publish date. I probably would have just bound the DataGrid to the anonymous objects created by the LINQ code, but Michael Sync had a post which indicated that doing this was a known bug in Silverlight 2.0.

The first thing I do in the DownloadStringCompleted event handler is to re-enable the populate button. Next I check to make sure there were no errors in the download process. After that I parse the XML. I'm not going to go into any details on using LINQ since there are already lots of tutorials out there. Lastly, I set the ItemsSource property of the DataGrid to my LINQ output. A DataGrid's ItemsSource property can be set to anything that implements IEnumerable (Array, List, ObservableCollection, etc).

This is where the neat stuff happens. Since we set the AutoGenerateColumns property to True on our DataGrid, it's going to automatically create columns for each property in the SOTCPost object. It will also name them the same as the property's name - Title and Date.

Clearing the DataGrid

When the "Clear DataGrid" button is pressed, we need to remove all the data from the DataGrid. This turns out to be very easy. All we have to do is set the ItemsSource property of the DataGrid to null.

Customizing the DataGrid Columns

If you noticed the example application at the top of the post, my columns were named something different than my property names. We can accomplish this by disabling the AutoGenerateColumns property and setting up the columns ourselves.

The Columns property of the DataGrid can be populated with all kinds of different types of columns, but for this example we're going to stick to the basic DataGridTextBoxColumn. The important piece of information here is the DisplayMemberBinding property. This tells the column which property of our object to display in each cell - in this case Title and Date.

Hopefully you found this introduction to Silverlight DataGrids useful and informative. We haven't even begun to scratch the surface of the available features in the DataGrid, but we'll be posting more advanced tutorials in the future. If you have any questions, just leave us a comment and we'll try to answer them as best we can.

References

• First Look at Silverlight 2
• Using the Silverlight DataGrid
• Defining Columns for a Silverlight DataGrid
• Silverlight 2 (beta1) Known Issues and workarounds (if any)