DataGrid XAML control

Note

This control is in preview and can be found as a prerelease package. The control could change between now and the final release

The DataGrid control you know and love from Silverlight and WPF is now available for Windows10. This control presents data in a customizable table of rows and columns.

DataGrid control

High level feature list

The DataGrid control supports most of all features supported by the Silverlight DataGrid. This includes:

1. GridLines

<controls:DataGrid GridLinesVisibility="All"/>

Gridlines

2. AlternatingRowBackground

<controls:DataGrid AlternatingRowBackground="LightGray"/>

AlternateRowBackground

3. Customizable Cells

<controls:DataGrid CellStyle="{StaticResource cellStyle}" />

<controls:DataGridTemplateColumn Header="Range" CellTemplate="{StaticResource cellTemplate}" />

4. Row details with customization

<controls:DataGrid RowDetailsTemplate="{StaticResource rt}" RowDetailsVisibilityMode="VisibleWhenSelected"/>

RowDetails

5. Autogenerate columns

<controls:DataGrid AutoGenerateColumns="True"/>
<!-- Autogenerates column headers and columns based on the Data model provided -->

6. Frozen columns

<controls:DataGrid FrozenColumnCount="2"/>

FrozenColumns

7. Reorder and resize columns

<controls:DataGrid CanUserReorderColumns="True" CanUserResizeColumns="True"/>

ResizeColumns

8. Cell and Row editing

<controls:DataGrid BeginningEdit="dg_Editing" CellEditEnding="dg_CellEditEnding" RowEditEnding="dg_RowEditEnding" />

Editing

9. Built-in validation UI

  • Use INotifyDataErrorInfo in your DataModel or ViewModel
  • Implement data validation using DataErrorsChangedEventArgs, HasErrors and GetErrors
  • The DataGrid control automatically shows the error UI when the error conditions are met

Validation

10. Single and extended selection modes

<controls:DataGrid SelectionMode="Extended"/>

Selection

11. Sorting, Grouping, Filtering

  • In V1 DataGrid control has built-in UI for sorting on column headers and supports one-level grouping on row headers. Filtering UI is not built into the control.
  • The Sample app shows how to implement sorting, grouping and filtering using this DataGrid control.
<controls:DataGrid CanUserSortColumns="True" Sorting="dg_Sorting"/>
<controls:DataGrid LoadingRowGroup="dg_loadingrowgroup" RowGroupHeaderPropertyNameAlternative="Range"/>
//implement sort, group and filter using LINQ in the view model
dataGrid.ItemsSource = ViewModel.SortData(...);

//Use DataGridSortDirection enum for showing the buil-in sort icon in column header
e.Column.SortDirection = DataGridSortDirection.Ascending;

Sort Group

13. Accessibility

  • DataGrid supports Narrator and Touch Narrator for navigation and interaction for blind users
  • DataGrid has built in keyboard navigation support through headers and cells. Supports arrow key navigation as well as Home/End/PageDown/PageUp/Ctrl+ combinations etc., Use Enter key to sort on Column headers and collpase/open group headers etc.,
  • UIAutomation is also supported

Sample Code

DataGrid Sample Page Source.

Requirements

Device family Universal, 10.0.15063.0 or higher
Namespace Microsoft.Toolkit.Uwp.UI.Controls
NuGet package Microsoft.Toolkit.Uwp.UI.Controls.DataGrid

API