DataGrid
In previous articles we've seen how to configure a basic data grid using Windows Presentation Foundation. The earlier articles described how data can be bound to a DataGrid control to show it in a grid of rows and columns, and how different types of column can be configured.
Resizing and Reordering
DataGrids include many built-in features, including giving the user the ability to resize columns, by dragging the edge of a column's header, and reorder the columns, by dragging the centre of a header to the left or right. These features allows for a very flexible control. However, in some situations you will want to fix the size of one or more columns, using the Width property, and ensure that the order of columns remains unchanged.
To demonstrate the ability to disable these features we'll extend the example created in previous articles. This example shows some details of the planets in the solar system in a grid. If you do not have a copy of the sample project, you can download it using the link at the top of the article, "WPF Data Display Controls - DataGrid - Sorting".
Disabling Resizing
By default, the user is able to resize the columns and the rows in a data grid. To resize the columns, he or she can position the mouse pointer between two column headers, so that the cursor changes to a double-headed arrow. Dragging this area adjusts the width. To resize rows, the mouse pointer must be positioned over the line between two rows, within the small area at the left. The row is then resized by dragging.
The two key areas for resizing are circled in the image below. Run the sample project and try resizing the rows and columns.
In some situations you may wish to disable resizing of columns and rows. You can do so using the two Boolean properties, CanUserResizeColumns and CanUserResizeRows. These are applied to the DataGrid control to completely disallow resizing.
To demonstrate, let's set both properties to false in the DataGrid, as follows:
<DataGrid ItemsSource="{Binding Source={StaticResource SortedPlanets}}"
AutoGenerateColumns="False" Hyperlink.Click="DataGrid_Click"
CanUserResizeRows="False" CanUserResizeColumns="False">If you run the program again, you'll see that pointing at the resizing areas does not change the mouse pointer. Dragging the areas no longer resizes the columns or rows.
Often you will want to disable resizing of some columns but allow the user to adjust others. This is useful when including columns where the content has a fixed width. To do so, you can set the CanUserResize property of individual columns to false.
To demonstrate, start by removing the resizing properties from the DataGrid:
<DataGrid ItemsSource="{Binding Source={StaticResource SortedPlanets}}"
AutoGenerateColumns="False" Hyperlink.Click="DataGrid_Click">Next, modify the definition of the "Rings" column to fix the column width:
<DataGridCheckBoxColumn Binding="{Binding HasRings}" Header="Rings?" Width="50"
CanUserResize="False"/>Run the program again to see the results. The "Rings" column will have a fixed width but the other columns will permit resizing.
Disabling Reordering
DataGrids include many built-in features, including giving the user the ability to resize columns, by dragging the edge of a column's header, and reorder the columns, by dragging the centre of a header to the left or right. These features allows for a very flexible control. However, in some situations you will want to fix the size of one or more columns, using the Width property, and ensure that the order of columns remains unchanged.
To demonstrate the ability to disable these features we'll extend the example from the previous articles. This example shows some details of the planets in the solar system in a grid. If you do not have a copy of the sample project, you can download it using the link at the top of the article, "WPF Data Display Controls - DataGrid - Sorting".
Disabling Resizing
Usually, the user is able to change the order in which the columns in a DataGrid are displayed, in a similar manner to resizing them. Instead of pointing at the vertical line between column headers, you drag the header itself to the left or right. Once moved to the position between two other columns, the column is relocated.
The draggable area for moving a column is circled in the image below. Run the program and drag a column to see the feature in action.
If you need the columns in the DataGrid to remain in the order in which you define them, you can switch off the column reordering feature. You do this by setting the CanUserReorderColumns property of the data grid to false, as shown below.
<DataGrid ItemsSource="{Binding Source={StaticResource SortedPlanets}}"
AutoGenerateColumns="False" Hyperlink.Click="DataGrid_Click"
CanUserReorderColumns="False">Make the change and run the program to see the results. It will no longer be possible to drag the columns to change their positions.
As with resizing, you can apply the reordering restrictions to individual columns. In this case you need to set the CanUserReorder property of the affected columns to false. To demonstrate, remove the CanUserReorderColumns attribute from the DataGrid's XAML and modify the "Planet" column, as follows:
<DataGridTextColumn Binding="{Binding Name}" Header="Planet" Width="80"
Foreground="Blue" FontWeight="Bold" CanUserReorder="False"/>Run the program for a final time. You'll find that the first column cannot be dragged to relocate it.
16 November 2014