WPF DataGrid Control — Provides flexible a way to display collection of data in rows and columns

  • In simple terms a DataGrid is a customizable grid used to display data collections
  • The DataGrid control also provides some useful built in functionalities for data display, i.e.

# Sorting # Grouping # Filtering etc.

This article assumes you have some exposure to WPF and common data display controls such as ListBoxes,ListViews etc.

  • If you only want to display you data collection, the code below is sufficient to get you started. Full source code.
Basic DataGrid from Observable collection
  • By default the DataGrid control will create an appropriate column for each entry in your collection
  • The control type for each column depends on the type of the field of each collection entry

^ Boolean field types — Mapped to DataGrid.CheckBoxColumn

^ Enum field types — Mapped to DataGrid.ComboBoxColumn

^ String or Number type — Mapped to DataGrid.TextColumn

^ Complex types (e.g. Nested classed / structs ) — Mapped to DataGrid.TemplateColumn

  • Visit the Official Docs to discover other attributes you can set to customize your DataGrid.
  • If your collection contains complex type fields, you need to generate the columns manually.

^ This is achieved by setting the AutoGenerateColumns property to false

  • In the previous section, out collection contained entries with a nested class = Address
  • Since this is a complex data type the DataGrid control did not know how to display it. Hence it called the ToString method on the Address class to try and represent the address class as a string.
  • As a result the address field was displayed as <name-space>.Address which is a fully qualified name of the Address class
  • There are two options to solve this:

^ 1. Override the toString method in the Address class

// Override ToString()public class Address{     public string Place { get; set; }     public int StreeNo { get; set; }    public override string ToString()    {       return $"Address: {Place}, {StreeNo}";    }}
  • This time the address column will display “Address: Montana, 810” on the first row

^ 2. Define a custom DataTemplate for the Address column inside the DataGrid

  • You can also use the DataGrid control to group your collection by any unique property
  • In order to accomplish this, there are a few changed to be made to the UI bound collection

^ 1. Convert your List into a CollectionView type. The CollectionView class supports sorting, grouping and filtering of any data collection that implements the IEnumerable interface.

public ListCollectionView collectionView;.....// constructor
collectionView = new ListCollectionView(clientList);
collectionView.GroupDescriptions.Add(new PropertyGroupDescription("Gender"));

^ 2. Next, bind the DataGrid ItemSource to the CollectionView Instead of the ObservableCollection.

— — — — — — — — — Optional: Change grouping property — — — — — — — — — —

  • It might also be useful to be able to change the grouping property in response to events or commands
`# ..window.xaml<StackPanel Grid.Row="1" Margin="10"><Button Command="{Binding GroupByCommand}" Margin="5" Padding="5" CommandParameter="Gender" Content="Group by Gender" /><Button Command="{Binding GroupByCommand}"Margin="5"Padding="5"CommandParameter="BirthPlace" 
Content="Group by BirthPlace" />
</StackPanel>`# ..viewModel.csprivate void OnGroupByAction(object groupingProperty){var groupby = (string)groupingProperty;switch (groupby){case "BirthPlace":collectionView.GroupDescriptions.Clear();collectionView.GroupDescriptions.Add(new PropertyGroupDescription("BirthPlace"));break;case "Gender":default:collectionView.GroupDescriptions.Clear();collectionView.GroupDescriptions.Add(new PropertyGroupDescription("Gender"));break;}}

To be continued…

Written by

Former Glorified Electrician(aka Electrical Engineer). Now a Software Developer working on complex Enterprise Software. Lets connect on twitter @NdamuleloNemakh

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store