WPF Toolkit: DataGrid Feature Walkthrough

The Build System

The WPF team is excited to release version 1 of our new WPF DataGrid control starting on Monday, October 27, 2008! Binaries and source code for the DataGrid can be downloaded from Codeplex.

Table of Contents

• Feature Walkthrough
  • Auto-generation of Columns
  • Column Types
  • Selection
  • Row Details
  • Validation
  • Row & Column Headers
  • Styling Properties
  • Design Time
• Get Started with DataGrid

Feature Walkthrough

Version 1 of the WPF DataGrid includes many of the features which Line-of-Business (LOB) application authors need to create rich end-user experiences for viewing and editing data. Features such as autogeneration of columns, a variety of stock column types, and built-in functionality like editing, sorting, and keyboard navigation will help developers get their data-centric applications up and running quickly. Developers can also create unique, branded experiences using DataGrid’s variety of styling features and advanced options such as row details and row-level validation. Following is a walkthrough of the major DataGrid features and explanations of how to use these features in your application.

Autogeneration of Columns

With only one line of code, it’s possible to generate a fully-functioning DataGrid. This is due to the autogeneration feature which will automatically map each field of the data source to a stock column type (DataGridTextBoxColumn, DataGridCheckBoxColumn, DataGridComboBoxColumn, or DataGridHyperlinkColumn). Autogeneration is on by default, so simply setting an ItemsSource and running the application with generate columns and produce a working DataGrid with features such as sorting, editing, keyboard navigation, end-user row and column resizing, and end-user column reordering through drag and drop.

    <dg:DataGrid ItemsSource="{StaticResource myData}"/>
    

Column Types

The DataGrid includes four basic stock column types:

• DataGridTextBoxColumn
• DataGridCheckBoxColumn
• DataGridComboBoxColumn
• DataGridHyperlinkColumn

Any of these column types can be specified in the DataGrid’s Columns collection. Stock columns include a variety properties which allow developers to customize the column’s look and behavior such as Header (to specify header content), Binding (to specify the data field the column should bind to), Width (can be an absolute value or one of the auto-sizing values, including Auto, SizeToHeader, SizeToCells, or *), CanUserSort (to toggle the ability to sort the column), and IsReadOnly (to toggle the ability to edit the column).

    <dg:DataGrid ItemsSource="{StaticResource myData}"/> >
    <dg:DataGrid.Columns>
        <dg:DataGridTextColumn Header="No." Width="SizeToCells"  
                                           Binding="{Binding CheckNumber}" 
                                           IsReadOnly="True"/>
        <dg:DataGridTextColumn Header="Date" 
                                           Binding="{Binding Date, StringFormat=d}" />
        <dg:DataGridTextColumn Header="Pay To" MinWidth="200" 
                                           Binding="{Binding Recipient}"
                                           CanUserSort="False" />
    </dg:DataGrid.Columns>
    </dg:DataGrid>
    

A fifth column type, DataGridTemplateColumn, was provided as a convenient way to create a new column type. Developers can set any WPF control in the CellTemplate of the DataGridTemplateColumn to create a custom column type. If the control in the CellTemplate does not have a built-in editing template (such as a Button) or the developer would like to use a different editing template, the developer can also specify a CellEditingTemplate to define what template the column should use when in editing mode (for example, TextBox). In the following example, a date column is created using the new DatePicker control as the CellEditingTemplate:

    <dg:DataGridTemplateColumn Header="Date" MinWidth="100">
        <dg:DataGridTemplateColumn.CellEditingTemplate>
            <DataTemplate>
                <dg:DatePicker SelectedDate="{Binding Date}" SelectedDateFormat="Short" />
            </DataTemplate>
        </dg:DataGridTemplateColumn.CellEditingTemplate>
        <dg:DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Date, StringFormat=d}" />
            </DataTemplate>
        </dg:DataGridTemplateColumn.CellTemplate>
    </dg:DataGridTemplateColumn>
    

Selection

DataGrid has built-in support for a variety of selection modes and units. The SelectionMode property can be set to Cell (for cell selection only), Row (for full row selection only), or CellOrRowHeader (where users can click on cells for cell selection or row headers to select full rows). The SelectionUnit property can be set to Single or Extended mode to allow for single selection or selection of multiple rows/cells.

Row Details

DataGrid’s row details feature allows application authors to specify a template for showing additional fields or other information in an expanded section of the row. This feature is useful, for example, if the data source has many fields which the developer doesn’t want to display as columns, or if there is a form which should be associated with each row. Developers can define any DataTemplate to be used as the RowDetailsTemplate and can set the RowDetailsVisibilityMode to Visible, Collapsed, or VisibleWhenSelected (where the row details are only visible if the row is selected). In the following example, a row details template is specified which allows the user to choose a category with a ComboBox.

    <dg:DataGrid x:Name="dg" ItemsSource="{Binding}" 
            RowDetailsVisibilityMode="VisibleWhenSelected">

        <dg:DataGrid.RowDetailsTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal" Margin="20,0,0,0">
                    <TextBlock Text="Category:" FontWeight="Bold"/>
                    <ComboBox IsEditable="True" 
                              ItemsSource="{Binding Source={x:Static Data:CheckBook.Categories}}" 
                             Text="{Binding Category}" />
                 </StackPanel>
            </DataTemplate>
        </dg:DataGrid.RowDetailsTemplate> 
    

Validation

Both cell- and row-level validation are possible in the WPF DataGrid. Since .NET 3.5, cell validation has been able to be achieved using IDataErrorInfo on any Binding. New in .NET 3.5 SP1 is a feature called BindingGroup which enables cross-field validation. In DataGrid, this feature is used to enable row-level validation where different cells of the DataGrid can be validated against each other. Developers can specify a collection of RowValidationRules which are used to validate the rows in the DataGrid and can define a RowValidationErrorTemplate to determine the visual style of the notification which the end-user receives when there is a validation error.

Row & Column Headers

DataGrid’s headers can be customized in a variety of ways to create the optimal DataGrid experience for every application. DataGrid’s HeadersVisibility property can be set to Row, Column, All, or None to toggle the visibility of the row and column headers. Developers can also set the RowHeaderWidth and ColumnHeaderHeight to change the size of headers. Row and column headers can also be styled through the RowHeaderStyle, RowHeaderTemplate, ColumnHeaderStyle, and ColumnHeaderTemplate properties. Some examples of styled headers are below:

Styling Properties

In addition to the header styling properties, DataGrid also includes many other properties which can be used to customize the DataGrid’s look and feel. The Background and AlternatingRowBackground properties can be used to set alternating row colors to enhance readability. Gridlines can be customized using GridLinesVisibility, HorizontalGridLinesBrush, and VerticalGridLinesBrush. Cells and rows can also be assigned styles using CellStyle and RowStyle.

Design Time

The DataGrid has a design time experience for both Expression Blend and the Visual Studio WPF Designer. Once the DataGrid has an ItemsSource assigned, the DataGrid designer will allow you to edit DataGrid properties, modify the Columns collection by adding and removing columns, and edit the properties of each column.

Get Started with DataGrid

Version 1 of the WPF DataGrid includes all of the above features and more. Check out the DataGrid in the WPF Toolkit on CodePlex starting October 28th!

Reffer to http://windowsclient.net/wpf/wpf35/wpf-35sp1-toolkit-datagrid-feature-walkthrough.aspx