Friday, November 18, 2011

The DataGrid

Grids play a prominent role in many applications, and Silverlight includes a DataGrid control in the System.Windows.Controls.Data assembly. You can drag this control from the Visual Studio Toolbox window into your XAML file and Visual Studio will take care of referencing the correct assemblies and adding the proper XML namespace definitions to your XAML file. The DataGrid supports editing, sorting, and drag n’ drop columns. The DataGrid, like the ListBox, has an ItemsSource property we can use to set a binding expression. Simply setting up the binding after placing the grid in your XAML is enough to get started, as the grid is capable of auto-generating columns from the model (the grid will create a column for every public property).

<data:DataGrid AutoGenerateColumns="True"                 HeadersVisibility="All"                ItemsSource="{Binding}"                                       RowBackground="Cornsilk"                 AlternatingRowBackground="BlanchedAlmond"                ColumnWidth="85" RowHeight="30"                IsReadOnly="True" CanUserResizeColumns="False">         data:DataGrid>

Simple customizations of the grid are possible just by setting some properties - background colors, grid lines, and resizable columns. For more control you can define the exact columns you want the grid to use by setting the Columns property. The Silverlight grid includes three types of columns: a GridTextColumn (to display text), a DataGridCheckBoxColumn (great for boolean properties), and a DataGridTemplate column. Like most templates in Silverlight, you can use a DataGridTemplate column to display nearly anything you want inside a grid – use calendars, stack panels, colored rectangles, etc. Notice the TimeCards column in the above screen shot. That grid is using auto-generated columns and doesn’t know how to display a property that is a collection. Now look at the following XAML:

<Grid x:Name="LayoutRoot" Background="White">     <data:DataGrid AutoGenerateColumns="False"                            ItemsSource="{Binding}"                                   IsReadOnly="False">         <data:DataGrid.Columns>             <data:DataGridTextColumn Binding="{Binding Name}" Width="50" />             <data:DataGridTemplateColumn>                 <data:DataGridTemplateColumn.CellTemplate>                     <DataTemplate>                         <data:DataGrid AutoGenerateColumns="True"                                         ItemsSource="{Binding TimeCards}"/>                      DataTemplate>                 data:DataGridTemplateColumn.CellTemplate>             data:DataGridTemplateColumn>         data:DataGrid.Columns>     data:DataGrid> Grid> 

In the above XAML we’ll turn off auto-generated columns and explicitly define the columns for display. Using the DataGridTemplateColumn we can even define a nested data grid to display all the time cards for an employee. For more information about the grid control, I highly recommend the following blog posts.

Also, be aware of a “bug” in the Silverlight 2.0 version of the DataGrid. Jesse Liberty describes the problem in his post “It Ain’t You, Babe … A Not-a-bug Bug in DataGrid”. The problem is that validation errors are tricky to catch with the DataGrid. Let’s look at validation next.

No comments:

Post a Comment