Mastering WPF DataGrid in a Day: Hour 6 DataGrid Columns In-Depth

Before continuing with 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
• Mastering WPF DataGrid in a Day: Hour 4 DataGrid Rows
• Mastering WPF DataGrid in a Day: Hour 5 DataGrid Columns

DataGrid Columns

Earlier in this book, we saw when the AutoGenrateColumns property is set to true, the DataGrid automatically generates columns based on the data source and its objects and public properties. However, in most of the applications, we define columns, their types and bind to data source properties.

DataGrid.Columns

The Columns property represents all columns of the DataGrid. The Columns property is a collection and provides methods to add, update and delete columns from the collection.

To create manual columns, the AutoGenerateColumns property must be set to false. See Listing 26.

<DataGrid x:Name="authorDataGrid" AutoGenerateColumns="false" Grid.Row="0" Grid.Column="1" />

Listing 26

The DataGrid has the following four types of columns:

• DataGridHyperlinkColumn: Used to display a hyperlink in a column.
• DataGridComboBoxColumn: Used to display drop-down items with one selected item.
• DataGridTextColumn: Used to display text.
• DataGridCheckBoxColumn: Used to display Boolean value using a CheckBox.

The code snippet in Listing 27 creates a DataGrid with five columns. The first column is a DataGridHyperlinkColumn. The next three columns are DataGridTextColumns and the last column is a DataGridCheckBoxColumn.

<DataGrid HorizontalAlignment="Left" Margin="4,5,0,0" VerticalAlignment="Top"
   Height="120" Width="510" Name="McDataGrid" AutoGenerateColumns="False"
   AlternatingRowBackground="LightGreen" GridLinesVisibility="Horizontal"
   SelectionUnit="Cell" SelectionMode="Extended">
   <DataGrid.Columns>
      <DataGridHyperlinkColumn Binding="{Binding ID}" Header="Author ID" Width="70"/>
      <DataGridTextColumn Binding="{Binding Name}" Header="Name" IsReadOnly="True" Width="120"/>
      <DataGridTextColumn Binding="{Binding DOB}" Header="DOB" IsReadOnly="True" Width="60"/>
      <DataGridTextColumn Binding="{Binding BookTitle}" Header="Book Title" IsReadOnly="True" Width="200"/>
      <DataGridCheckBoxColumn Binding="{Binding IsMVP}" Header="Is MVP" IsReadOnly="True" Width="50"/>
   </DataGrid.Columns>
</DataGrid>

Listing 27

Listing 27 generates Figure 12.



Figure 12

DataGrid Column Properties

Each DataGrid column has its own properties and can be managed differently from other columns. The following lists the common DataGrid column properties.

• Binding: Binding associated with the column with a property in the data source.
• CanUserReorder: Whether the user can change the column display position by dragging the column header.
• CanUserResize: Whether the user can adjust the column width by using the mouse.
• CanUserSort: Whether the user can sort the column by clicking the column header.
• FontFamily: Font family for the content of cells in the column.
• FontSize: Font size for the content of cells in the column.
• FontStyle: Font style for the content of cells in the column.
• FontWeight: Font weight for the content of cells in the column.
• Foreground: Brush that is used to paint the text contents of cells in the column.
• Header: Content of the column header.
• IsAutoGenerated: Whether the column is auto-generated.
• IsFrozen: Whether the column is prevented from scrolling horizontally.
• IsReadOnly: Whether cells in the column can be edited.
• SortDirection: Sort direction (ascending or descending) of the column.
• Visibility: Show or hide the column.
• Width: Width of the column or automatic sizing mode.

The code snippet in Listing 28 creates a column and sets its various properties.

<DataGridTextColumn Binding="{Binding Name}" Header="Name" IsReadOnly="True" Width="120"
   CanUserReorder="False" CanUserResize="False" CanUserSort="False"
   FontFamily="Georgia" FontSize="14" FontStyle="Normal" FontWeight="Bold"
   SortDirection="Ascending" Foreground="Blue" Visibility="Collapsed"/>

Listing 28

Binding

The Binding property binds an object property with the column. The code snippet in Listing 29 binds the DataGridTextColumn with the Name property of the data source objects.

<DataGridTextColumn Binding="{Binding Name}" Header="Name" Width="120"/>

Listing 29

Dynamic DataGrid Columns

As I said earlier, the DataGrid.Collumns represents a collection of columns in a DataGrid. The DataGrid.Columns is inhertited from the ObservableCollectiom<T> and provides all collections-related functionality such as add, remove and find items in a collection.

The Add method is used to add a dynamic column to the collection. The code listed in Listing 30 creates a DataGridTextColumn, sets it Binding and Header properties and adds the column to the DataGrid columns.

DataGridTextColumn col = new DataGridTextColumn();
col.Binding = new Binding(“AuthorName”);
col.Header = “Author Name”;
McDataGrid.Columns.Add(col);

Listing 30

The Remove and RemoveAt methods are used to remove columns from the DataGrid columns collections. The code listed in Listing 31 can be used to remove a column at run-time.

McDataGrid.Columns.Remove(col);

Listing 31

Frozen Columns

Frozen columns are columns that are always visible and cannot be scrolled out of visibility. Frozen columns are always the leftmost columns in display order. For example, if you have a DataGrid that has too many columns that don't fit on the screen and the DataGrid requires horizontal scrolling, but you want the first two columns to always be visible, then you can freeze the columns.

The FrozenColumnCount property sets the number of columns to be frozen in the DataGrid. By default there is no frozen column in the DataGrid. But if you set the FrozenColumnCount value to 2, the leftmost 2 columns will be frozen. See Listing 32.

<DataGrid x:Name="McDataGrid" Margin="0" AutoGenerateColumns="False" FrozenColumnCount="2">

Listing 32

Expand and Collapse DataGrid Rows

A DataGrid provides a collapsed and expanded views of a row where users can not only see the details of a row but it can also be used to edit and update the row data.

RowDetailsVisibilityMode Property

The RowDetailsVisibilityMode property of the DataGrid is responsible for showing and hiding the row details. The RowDetailsVisibilityMode has one of the three values, Visible, Collapsed and VisibleWhenSelected. The Visible value keeps the row details visible all the time. The Collapsed value keeps the row details collapsed all the time. And the VisibleWhenSelected value shows the row details when a row is selected.

The following code snippet in Listing 33 sets the RowDetailsVisibilityMode to VisibleWhenSelected in XAML:

RowDetailsVisibilityMode="VisibleWhenSelected"

Listing 33

The following code snippet in Listing 34 sets the RowDetailsVisibilityMode to VisibleWhenSelected in C#:

McDataGrid.RowDetailsVisibilityMode = DataGridRowDetailsVisibilityMode.VisibleWhenSelected;

Listing 34

Summary

In this article of the Mastering WPF DataGrid series, we saw some of the advanced DataGrid columns functionality.

In the next article of this series, I will continue to cover some more advanced functionality related to the DataGrid columns.

<<Previous Article                                    Next Article>>