Mastering WPF DataGrid in a Day: Hour 1 Introduction

In this article of the series, I will cover almost everything you will need to master the WPF DataGrid control and its functionality. This article is the first article of the series, introduction to simple data binding.

The WPF DataGrid is one of the most widely used controls. The DataGrid control displays data in a row and column format. The DataGrid not only allows you to display data in a grid format but also lets you add, update, delete, filter and sort data displayed in the control. In this e-book, you will learn how to use a DataGrid control in your real-world applications.

In this series, we will cover the following topics:

Create a DataGrid
Data Binding
DataGrid Properties
DataGrid Header
Row Details
Add Remove Columns
Frozen Column
Show Selected Row Information
Data Filter
Sorting in DataGrid
Drag and Drop Data Binding
Master Details Data Display
Grouping
Data Entry with Images
DataGrid Style
CRUD in DataGrid

The preceding topics may be updated as I move to the topics.

Creating a DataGrid

Like any other control, there are two ways to create a DataGrid control; at design-time and at run-time. In most of the cases, you're likely to use a design-time approach to create a control. You may end up adjusting the control layout and position at run-time.

In the design-time approach, you use the Visual Studio IDE designer to drag and drop the DataGrid control from the Toolbox to a window. You can use drag and drop to move, resize and position the control. Alternatively, you can also type in all the code by hand in the XAML file.

Create a New WPF Application

Create a WPF application using the Visual Studio IDE and drag and drop a DataGrid control from the Toolbox to the window. Figure 1 shows the IDE Toolbox, the page and XAML code preview after a DataGrid is dropped to a window.

Figure 1

You can use the Grid handles to resize and move the DataGrid control. Go ahead and place the control whereever you like and resize it using the bottom-right and other corners. My final DataGrid looks like Figure 2.

Figure 2

When you use the Visual Studio IDE designer, the designer not only creates the control layout but also creates the XAML code. Listing 1 is the typical XAML written by the designer.

<Window x:Class="DataGridSample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="389.801" Width="650" Loaded="Window_Loaded">
<Grid>
<DataGrid HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top"
Height="219" Width="465"/>
</Grid>
</Window>

Listing 1

The DataGrid element in XAML represents a DataGrid control. The Width and Height properties represent the width and the height of a DataGrid. The Margin property sets the placement margins of the DataGrid on a window. The Name property represents the name of the control, which is a unique identifier of a control. As you can see from the listing, the designer does not add the Name property. So we will add it manually. Now the final DataGrid XAML is listed in Listing 2.

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

Listing 2

Data Binding

Once a DataGrid control is created, now the next step is to display some data in it. As we discussed earlier, a DataGrid control displays data in a grid (tabular data). A grid is a collection of rows and columns so our data must also be in the same format.

Data Collection

Before we can display any data in a DataGrid, we must have some data. The data that is a collection of objects.

Let's create a class that has some public properties. The code snippet in Listing 3 defines the Author class that has five public properties. The properties are ID, Name, DOB, BookTitle and IsMVP or int, string, DateTime, string and bool types.

public class Author
{
public int ID { get; set; }
public string Name { get; set; }
public DateTime DOB { get; set; }
public string BookTitle { get; set; }
public bool IsMVP { get; set; }
}

Listing 3

Now, we have an object. All we need to do is, create a collection of it. Once we have a collection of objects, we will be able to display its data in a DataGrid.

The code snippet in Listing 4 creates a List of Author objects using the LoadCollectionData method.

public class AuthorCollection : CollectionBase
{
/// <summary>
/// List of Authors
/// </summary>
/// <returns></returns>
public List<Author> LoadAuthors()
{
List<Author> authors = new List<Author>();
authors.Add(new Author()
{
ID = 101,
Name = "Mahesh Chand",
BookTitle = "Graphics Programming with GDI+",
DOB = new DateTime(1975, 2, 23),
IsMVP = false
});
authors.Add(new Author()
{
ID = 201,
Name = "Mike Gold",
BookTitle = "Programming C#",
DOB = new DateTime(1982, 4, 12),
IsMVP = true
});
authors.Add(new Author()
{
ID = 244,
Name = "Dhananjay Kumar",
BookTitle = "ADO.NET Development",
DOB = new DateTime(1985, 9, 11),
IsMVP = true
});
return authors;
}
}

Listing 4

ItemsSource

The ItemSource property of the DataGrid is the key to the data binding. The user can bind any data source that implements IEnuemerable. Each row in the DataGrid is bound to an object in the data source and each column in the DataGrid is bound to a property of the data source objects. To display a collection of data in a DataGrid, we simply need to bind its ItemsSource property to the Author collection that we created in the AuthorCollection class in Listing 4. Double-click or use the Properties windows and create a Window Loaded event handler. See Listing 5. On the Window's Loaded event handler, we create an AuthorCollection object and call its LoadAuthors() method to bind to the DataGrid by setting DataGrid's ItemsSource property.

private void Window_Loaded(object sender, RoutedEventArgs e)
{
AuthorCollection authors = new AuthorCollection();
McDataGrid.ItemsSource = authors. LoadAuthors();
}

Listing 5

Build and Run

Now let's build and run our application (Hit F5). The output looks as in Figure 3. As you can see from Figure 3, the object properties names are automatically generated as DataGrid columns with the title being the property name.

Figure 3

Summary

In this first article of the Mastering WPF DataGrid series, we saw how to create a DataGrid using Visual Studio and display some data in it. In the next article of this series, I will cover some of the common properties of the WPF DataGrid.

Next Article: Mastering WPF DataGrid in a Day: Hour 2 Layout

14 Comments

Join the conversation! Your thoughts help the community grow.

chirag patel6y ago
We use nested datagrid in WPF C# but sir don't know how to bind it because nested datagrid name property not accessible....how can i bind this nested datagrid??
chirag patel6y ago
Hello Mahesh Sir,
R S6y ago
In which file(App.xaml.cs or MainWindow.xaml.cs) put a code of Listing3, Listing4 and Listing5 code ? Where to double click for windows properties?
Viknaraj Manogararajah8y ago
nice article thank you for sharing
Shaikh Asad9y ago
Can't we just use Collections.Generic instead of CollectionBase!! just asking.
- Mahesh Chand8y ago
  Data source can be anything that is valid.
Mohamed Gani Mn11y ago
Butter to us
Raihan Mahmud11y ago
where to put listing 5 code. pls do help
- Mahesh Chand8y ago
  This is Main Window's Loaded event handler. You can also double click on the Window to add this event handler.
Vithal Wadje12y ago
super..
Mahesh Chand12y ago
Sure guys, no problem. Yes I will try to post 1 part of this series every 2 days.
Anoop Kumar Sharma12y ago
Nice Article Sir. I am eagerly waiting for the next article of this series.
Keyur Patel12y ago
Simple and Good
Saineshwar Bageri12y ago
nice one sir