DataGrid
In the previous four articles we've begun to examine the DataGrid class. This is a WPF control that allows you to display the properties from a collection of objects, arranged in a grid. One row is presented for each object with columns bound to specific properties. We've seen how to set up a data bound grid, control the columns that are displayed, sort the grid and resize and reorder its columns.
In this article we'll consider the selection features provided by data grids. By default, the user is able to select one or more rows in a data grid. You can modify this behaviour to limit the selection to a single item or to allow selection of individual cells. You can then use the properties of the grid to determine which cells are currently selected.
To demonstrate, we'll extend the example from the previous article. This sample project displays details of the planets of the solar system. If you do not have a copy of the project, download it using the link at the top of the article, "WPF Data Display Controls - DataGrid - Resizing and Reordering".
To see the normal behaviour of the data grid, run the program. If you click any row of data, that row will change colour to indicate that it is selected. If you drag the mouse over several rows, they will all become selected. You can also hold the Shift key whilst clicking to select a contiguous range of rows, or press the Ctrl key and click rows to add them to the current selection.
Selection Modes
Data grids support two selection modes, set using the SelectionMode property and a value from the DataGridSelectionMode enumeration. By default, grids are set to Extended mode. This allows the dragging and use of the Shift and Ctrl keys to select multiple items. You can change the selection mode to Single to restrict the user to selecting one item at a time.
Let's switch the data grid to single selection mode. Change the XAML for the DataGrid's opening tag, as follows:
<DataGrid ItemsSource="{Binding Source={StaticResource SortedPlanets}}"
AutoGenerateColumns="False" Hyperlink.Click="DataGrid_Click"
SelectionMode="Single">
Run the program to see the new behaviour. You should find that it is no longer possible to select multiple rows.
Selection Units
You can change the selection unit to allow the user to select individual cells, rather than entire rows, by modifying the SelectionUnit property of the control. Three options are available, each defined in the DataGridSelectionUnit enumeration. The options are:
- Row. The default option, permitting the selection of entire rows only.
- Cell. When the selection unit is set to Cell, the user can select individual cells.
- CellOrRowHeader. This option combines Row and Cell. Clicking individual cells selects them. Clicking the small row header, positioned to the left of each row, selects all of the cells in that row.
Let's change the selected unit to allow selection of single cells or entire rows. We'll also set the selection mode to extended, so that any number of cells can be highlighted.
<DataGrid ItemsSource="{Binding Source={StaticResource SortedPlanets}}"
AutoGenerateColumns="False" Hyperlink.Click="DataGrid_Click"
SelectionMode="Extended" SelectionUnit="CellOrRowHeader">
Run the program and try selecting cells and rows.
20 November 2014