Edit

Share via

DataGrid Elements

The DataGrid control is composed of several specialized component types that work together to display and manage tabular data. Understanding these components and their relationship to the DataGrid helps you customize the appearance and behavior of the data grid to meet your specific needs.

Element overview

The DataGrid consists of the following primary elements:

  • DataGridCell - Represents an individual cell within the grid that displays a single data value.
  • DataGridRow - Represents a row of data within the grid, containing multiple cells.
  • DataGridRowHeader - Provides the row header area at the left side of each row, typically used for row selection indicators.
  • DataGridColumnHeader - Represents the header of a column, typically displaying the column title and providing sorting functionality.
  • DataGridColumnHeadersPresenter - Contains and presents all column headers in a row at the top of the grid.

These elements are arranged hierarchically within the DataGrid to create the familiar tabular layout. The DataGridColumnHeadersPresenter displays column headers at the top, while each DataGridRow contains multiple DataGridCell elements along with a DataGridRowHeader.

Customizing elements

You can customize each element by applying styles or modifying templates. For example:

For more information about styling and templating, see Styling and Templating.

DataGridCell

The DataGridCell element represents an individual cell within the data grid and responds to user interactions such as selection and editing.

Parts

The DataGridCell element doesn't define any named template parts.

States

The following table lists the visual states for the DataGridCell element.

VisualState Name VisualStateGroup Name Description
Normal CommonStates The default state.
MouseOver CommonStates The mouse pointer is positioned over the cell.
Focused FocusStates The cell has focus.
Unfocused FocusStates The cell doesn't have focus.
Current CurrentStates The cell is the current cell.
Regular CurrentStates The cell isn't the current cell.
Display InteractionStates The cell is in display mode.
Editing InteractionStates The cell is in edit mode.
Selected SelectionStates The cell is selected.
Unselected SelectionStates The cell isn't selected.
InvalidFocused ValidationStates The cell isn't valid and has focus.
InvalidUnfocused ValidationStates The cell isn't valid and doesn't have focus.
Valid ValidationStates The cell is valid.

DataGridRow

The DataGridRow element represents a row of data within the grid. Each row contains multiple cells and a row header.

Parts

The DataGridRow element doesn't define any named template parts.

States

The following table lists the visual states for the DataGridRow element.

VisualState Name VisualStateGroup Name Description
Normal CommonStates The default state.
MouseOver CommonStates The mouse pointer is positioned over the row.
MouseOver_Editing CommonStates The mouse pointer is positioned over the row and the row is in edit mode.
MouseOver_Selected CommonStates The mouse pointer is positioned over the row and the row is selected.
MouseOver_Unfocused_Editing CommonStates The mouse pointer is positioned over the row, the row is in edit mode, and doesn't have focus.
MouseOver_Unfocused_Selected CommonStates The mouse pointer is positioned over the row, the row is selected, and doesn't have focus.
Normal_AlternatingRow CommonStates The row is an alternating row.
Normal_Editing CommonStates The row is in edit mode.
Normal_Selected CommonStates The row is selected.
Unfocused_Editing CommonStates The row is in edit mode and doesn't have focus.
Unfocused_Selected CommonStates The row is selected and doesn't have focus.
InvalidFocused ValidationStates The control isn't valid and has focus.
InvalidUnfocused ValidationStates The control isn't valid and doesn't have focus.
Valid ValidationStates The control is valid.

DataGridRowHeader

The DataGridRowHeader element appears at the left side of each row and typically displays row selection indicators or row numbers.

Parts

The following table lists the named parts for the DataGridRowHeader element.

Part Type Description
PART_TopHeaderGripper Thumb The element that is used to resize the row header from the top.
PART_BottomHeaderGripper Thumb The element that is used to resize the row header from the bottom.

States

The following table lists the visual states for the DataGridRowHeader element.

VisualState Name VisualStateGroup Name Description
Normal CommonStates The default state.
MouseOver CommonStates The mouse pointer is positioned over the row.
MouseOver_CurrentRow CommonStates The mouse pointer is positioned over the row and the row is the current row.
MouseOver_CurrentRow_Selected CommonStates The mouse pointer is positioned over the row, and the row is current and selected.
MouseOver_EditingRow CommonStates The mouse pointer is positioned over the row and the row is in edit mode.
MouseOver_Selected CommonStates The mouse pointer is positioned over the row and the row is selected.
MouseOver_Unfocused_CurrentRow_Selected CommonStates The mouse pointer is positioned over the row, the row is current and selected, and doesn't have focus.
MouseOver_Unfocused_EditingRow CommonStates The mouse pointer is positioned over the row, the row is in edit mode, and doesn't have focus.
MouseOver_Unfocused_Selected CommonStates The mouse pointer is positioned over the row, the row is selected, and doesn't have focus.
Normal_CurrentRow CommonStates The row is the current row.
Normal_CurrentRow_Selected CommonStates The row is the current row and is selected.
Normal_EditingRow CommonStates The row is in edit mode.
Normal_Selected CommonStates The row is selected.
Unfocused_CurrentRow_Selected CommonStates The row is the current row, is selected, and doesn't have focus.
Unfocused_EditingRow CommonStates The row is in edit mode and doesn't have focus.
Unfocused_Selected CommonStates The row is selected and doesn't have focus.
InvalidFocused ValidationStates The control isn't valid and has focus.
InvalidUnfocused ValidationStates The control isn't valid and doesn't have focus.
Valid ValidationStates The control is valid.

DataGridColumnHeadersPresenter

The DataGridColumnHeadersPresenter element contains all column headers and displays them in a row at the top of the data grid.

Parts

The following table lists the named parts for the DataGridColumnHeadersPresenter element.

Part Type Description
PART_FillerColumnHeader DataGridColumnHeader The placeholder for column headers.

States

The following table lists the visual states for the DataGridColumnHeadersPresenter element.

VisualState Name VisualStateGroup Name Description
InvalidFocused ValidationStates The cell isn't valid and has focus.
InvalidUnfocused ValidationStates The cell isn't valid and doesn't have focus.
Valid ValidationStates The cell is valid.

DataGridColumnHeader

The DataGridColumnHeader element represents the header of a column. Column headers typically display the column title and provide sorting functionality when clicked.

Parts

The following table lists the named parts for the DataGridColumnHeader element.

Part Type Description
PART_LeftHeaderGripper Thumb The element that is used to resize the column header from the left.
PART_RightHeaderGripper Thumb The element that is used to resize the column header from the right.

States

The following table lists the visual states for the DataGridColumnHeader element.

VisualState Name VisualStateGroup Name Description
Normal CommonStates The default state.
MouseOver CommonStates The mouse pointer is positioned over the control.
Pressed CommonStates The control is pressed.
SortAscending SortStates The column is sorted in ascending order.
SortDescending SortStates The column is sorted in descending order.
Unsorted SortStates The column isn't sorted.
InvalidFocused ValidationStates The control isn't valid and has focus.
InvalidUnfocused ValidationStates The control isn't valid and doesn't have focus.
Valid ValidationStates The control is valid.

See also

  • Last updated on