Mastering WPF DataGrid in a Day: Hour 4 DataGrid Rows

In this Hour 4 of the Mastering WPF in 24 Hrs series I will talk about the DataGrid row header and rows visibility, row appearance and a few other properties.

Before continuing this article, I highly recommend reading these previous parts:

• Mastering WPF DataGrid in a Day: Hour 1 Introduction
• Mastering WPF DataGrid in a Day: Hour 2 DataGrid Layout and Border
• Mastering WPF DataGrid in a Day: Hour 3 DataGrid Header

RowHeaderWidth

A DataGrid is a collection of rows and columns and each row and column can have a header. This header can be used to display text such as column and row titles.

The RowHeaderWidth property is used to set the row header width.

The code snippet in Listing 15 sets the RowHeaderWidth to 50.

<DataGrid HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top"
            Height="219" Width="465" Name="McDataGrid" AutoGenerateColumns="False"
                  RowHeaderWidth="50" />

Listing 15

The output looks as in Figure 8.


Figure 8

GridLinesVisibility

You can show or hide a DataGrid grid line using the GridLinesVisibility property. The GridLinesVisibility has the four values All, Horizontal, None and Vertical. If you want to show both the horizontal and the vertical lines, set the GridLinesVisibility to All. The None value hides both the horizontal and the vertical lines and the Horizontal and Vertical values display the horizontal and vertical lines only respectively. See Listing 16.



Listing 16

The code snipet in Listing 17 hides both row and column headers of a DataGrid.

<DataGrid HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top"
            Height="219" Width="509" Name="McDataGrid" AutoGenerateColumns="True"
            RowHeaderWidth="10" AlternatingRowBackground="LightGreen"
            GridLinesVisibility="Horizontal" />

Listing 17

The output looks as in Figure 9.


Figure 9

AlternatingRowBackground

The AlternatingRowBackground property is used to set and get the background color of every alternative row of a DataGrid.

The code snippet in Listing 18 sets the AlternatingRowBackground to LightGreen. Also note that I have changed the RowHeaderWidth to 10.

<DataGrid HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top"
            Height="219" Width="509" Name="McDataGrid" AutoGenerateColumns="True"
            RowHeaderWidth="10" AlternatingRowBackground="LightGreen" />

Listing 18

The output looks as in Figure 10.


Figure 10

SelectionMode and SelectionUnit

The SelectionMode and SelectionUnit properties can be used to define the selection behavior for the DataGrid control. The SelectionMode property indicates how rows and cells are selected in the DataGrid. The SelectionMode has one of the following two values:

• Extended: Multiple items can be selected at the same time.
  
  
• Single: Only one item can be selected a time.

The SelectionUnit property indicates whether rows, cells, or both can be selected in the DataGrid. The SelectionUnit has one of the following three values:

• Cell: Only cells are selected. Clicking a row or column header does nothing.
  
  
• CellOrRowHeader: Cells and rows are selected. Clicking on a cell selects only the cell. Clicking a row header selects the full row.
  
  
• FullRow: Click a cell or a row header to select the full row.

The code snippet in Listing 19 sets the SelectionUnit and SelectionMode properties to Cell and Extended.

<DataGrid HorizontalAlignment="Left" Margin="4,5,0,0" VerticalAlignment="Top"
            Height="120" Width="510" Name="McDataGrid" AutoGenerateColumns="True"
            AlternatingRowBackground="LightGreen" GridLinesVisibility="Horizontal"
            ColumnWidth="*" SelectionUnit="Cell" SelectionMode="Extended"/>

Listing 19

The output looks as in Figure 11. If you click on multiple cells with the CTRL key, you will see multiple cells are selected.


Figure 11

CanUserResizeRow and CanUserResizeColumns

By default, the DataGrid allow users to resize its columns and rows. But you can restrict users if they can resize the DataGrid columns and rows.

The CanUserResizeRows property is used to set whether or not users can resize the row. The CanUserResizeColumns property is used to set whether or not users can resize the columns.

The code snippet in Listing 20 restricts users from resizing rows and columns of the DataGrid.

<DataGrid HorizontalAlignment="Left" Margin="4,5,0,0" VerticalAlignment="Top"
            Height="120" Width="510" Name="McDataGrid" AutoGenerateColumns="True"
            AlternatingRowBackground="LightGreen" GridLinesVisibility="Horizontal"
            ColumnWidth="*" SelectionUnit="Cell" SelectionMode="Extended"
            CanUserResizeColumns="False" CanUserResizeRows="False"/>

Listing 20

RowStyle

The RowStyle property is used to style all rows of a DataGrid. The code snippet in Listing 21 creates a Style and sets the DataGrid.RowStyle property.

 

<DataGrid Margin="0,0,0,0" VerticalAlignment="Top"
    Height="227" HorizontalAlignment="Stretch"
    HorizontalContentAlignment="Stretch"
    ColumnWidth="*" Name="McDataGrid"
>
    <DataGrid.RowStyle>
        <Style TargetType="DataGridRow">
            <Setter Property="Background" Value="LightGreen" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Green"/>
                    <Setter Property="Foreground" Value="White"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </DataGrid.RowStyle>

</DataGrid>

Listing 21

Summary

In this article of the Mastering WPF DataGrid series, we saw some of the DataGrid rows related properties.

In the next article of this series, I will cover the basics of the DataGrid columns and their formatting.

 

<<Previous Article                                                  Next Article>>