The problem with the checkbox in a WPF DataGrid

By default, if you place a checkbox in a WPF DataGrid, you will have to click twice to check or uncheck the checkbox. And there is a logical explanation. The first click will select the row in the DataGrid, and the second one, the checkbox in that specific row.

In this simple tutorial, we will see how to do it in a better, with one click for both actions.

Solution to the DataGrid checkBox issue

First of all, we will create our simple project and add a Person model:

Now, let’s check the View with the DataGrid:

As you can see, the secret is simply to create a DataTemplate with a checkbox containing UpdateSourceTrigger=PropertyChanged. There is a commented line in the XAML code (DataGridCheckBoxColumn), which is the broken solution, forcing us to click twice, so you can compare them.

Last but not least, our ViewModel:

And this is what the result looks like when we run the code:

WPF DataGrid single click checkbox
WPF DataGrid single click checkbox

Here it is! Now your DataGrid has a checkbox per row, and you don’t have to click twice on it to check it.

Here is a link to a previous post about how to put colors in your grid depending on a value.

And another one about the official Microsoft documentation for a WPF DataGrid.

Happy coding! 🙂