Welcome to day #26 in my series called the 31 Days of Silverlight. Today, we’re going to be talking about how to use a DataGrid control in your Silverlight applications. Let’s get right to it.
1. Add a new reference to your Silverlight project
In order to use the Silverlight DataGrid control, we first need to add a new reference to our project. Go find System.Windows.Controls.Data, and add a reference to that assembly to your project. Make sure you’re only including this reference if you’re using a DataGrid. It’s sizeable, and you really don’t want the burden of this DLL unless you fully intend to use it.
2. Add the XML namespace to your XAML.
In order to use that reference, we need to add the XML namespace for that assembly to our page. This will allow us to add an actual DataGrid to our page. Here’s what my entire XAML page looks like before we begin:
<UserControl x:Class="SilverlightDataGrid.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Canvas x:Name="LayoutRoot">
</Canvas>
</UserControl>
3. Add a DataGrid to your page
Adding the DataGrid is the simple part of this tutorial. We’ll spend most of our time today manipulating its data. To add the grid to the page, however, use this little snippet of code inside your <Canvas>:
<data:DataGrid x:Name="citygrid" AutoGenerateColumns="True" />
Now, before you get too excited and start running your project, remember that we haven’t added any data to this DataGrid yet. We should probably do that first.
4. Adding data to the DataGrid from code
In order to have some data with some substance, I have set up a new Class file that defines a simple “Location.” Here’s how it looks:
public class Location
{
//Fields
private string _city;
private int _population;
private double _latitude;
private double _longitude;
private double _elevation;
//Properties
public string City
{
get { return _city; }
set { _city = value; }
}
public int Population
{
get { return _population; }
set { _population = value; }
}
public double Latitude
{
get { return _latitude; }
set { _latitude = value; }
}
public double Longitude
{
get { return _longitude; }
set { _longitude = value; }
}
public double Elevation
{
get { return _elevation; }
set { _elevation = value; }
}
}
Next, I’m going to create a List of Locations, and use that as my data source. For my locations, I have the population, elevation, and latitude/longitude or the 16 largest cities in the United States (according to the 2000 US Census). Here’s my data:
List<Location> locations = new List<Location>{
new Location {City="New York, NY", Population=8363710, Latitude=40.714269, Longitude=-74.005973, Elevation=10},
new Location {City="Los Angeles, CA", Population=3833995, Latitude=34.052234, Longitude=-118.243685, Elevation=71},
new Location {City="Chicago, IL", Population=2853114, Latitude=41.850033, Longitude=-87.650052, Elevation=182},
new Location {City="Houston, TX", Population=2242193, Latitude=29.763284, Longitude=-95.363271, Elevation=13},
new Location {City="Phoenix, AZ", Population=1567924, Latitude=33.448377, Longitude=-112.074037, Elevation=340},
new Location {City="Philadelphia, PA", Population=1540351, Latitude=39.952335, Longitude=-75.163789, Elevation=12},
new Location {City="San Antonio, TX", Population=1351305, Latitude=29.424122, Longitude=-98.493628, Elevation=198},
new Location {City="Dallas, TX", Population=1279910, Latitude=32.783330, Longitude=-96.800000, Elevation=131},
new Location {City="San Diego, CA", Population=1279329, Latitude=32.715329, Longitude=-117.157255, Elevation=22},
new Location {City="San Jose, CA", Population=948279, Latitude=37.339386, Longitude=-121.894955, Elevation=26},
new Location {City="Detroit, MI", Population=912062, Latitude=42.331427, Longitude=-83.045754, Elevation=183},
new Location {City="San Francisco, CA", Population=808976, Latitude=37.774929, Longitude=-122.419415, Elevation=16},
new Location {City="Jacksonville, FL", Population=807815, Latitude=30.332184, Longitude=-81.655651, Elevation=5},
new Location {City="Indianapolis, IN", Population=798382, Latitude=39.768377, Longitude=-86.158042, Elevation=218},
new Location {City="Austin, TX", Population=757688, Latitude=30.267153, Longitude=-97.743061, Elevation=149},
new Location {City="Columbus, OH", Population=754885, Latitude=39.961176, Longitude=-82.998794, Elevation=275}
};
Once we have some data to work with, we just need to set the ItemsSource property of our grid. I named my grid “citygrid,” so our statement will look like this:
citygrid.ItemsSource = locations;
If you run your project at this point, you should have a working grid, with all of the data populating it.
5. Using “some” of the data
Much like we did in Day #15, we’re going to use LINQ to select the cities we want. In this case, perhaps we only want cities with more than 1,000,000 citizens. Here’s how you can modify your ItemsSource statement to select just a portion of the entire set of data:
citygrid.ItemsSource = from location in locations
where location.Population > 1000000
orderby location.City, location.Population
select location;
6. Checking out the built in functionality
If you haven’t run your project yet, give it a try. You should see a grid on your page, with either some or all of your data, depending on what you did in step #5. The grid has some built in functionality that makes our lives a little easier, and required ZERO code.
The first thing is that the columns auto-sort. So you can click on a column heading, and it will sort your cities, populations, etc. from top to bottom, and reversed.
Second, the cells are editable. So you can change the values we have stored in code without writing anything additionally. If you want to turn that off, just add the IsReadOnly=”True” property to your grid.
Third, the grid also has native validation. So, for example, if you try to edit one of the longitude cells, and enter a string for a value, it will prompt you that the value you entered is invalid. A nice bit of functionality for free, huh? Here’s my working Silverlight DataGrid in action (see it in a new window):
You can download my Silverlight DataGrid application here.
7. Summary
In short, it’s incredibly refreshing to have a DataGrid control for Silverlight. There’s thousands of business applications for this, and if you dig a little deeper, you’ll discover just how customizable this control really is. It doesn’t have to look like a grid at all, to be honest. Dan Wahlin has a good tutorial on customizing a grid to look like a timesheet application.
JEFF BLANKENBURG 
Leave a Reply