Hide/Un-Hide Columns using Context Menu in DataGrid in WPF

In this article we will see how we can add a ContextMenu for the Header and that will perform our Hide/Un-Hide function in Datagrid.


Introduction

In my article on "Hide/Un-Hide Columns In DataGrid In WPF", we saw how to use it using CheckBoxes. In this article we will see how we can add a ContextMenu for the Header and that will perform our Hide/Un-Hide function.

Creating WPF Application Project

Fire up Visual Studio 2008 and Create a WPF Application and name the project as ContextMenuDGWPF.

1.gif
 
First we need to create some sample data that will be loaded into DataGrid.

2.gif
 
Above class is for our Employee Data to be bound to DataGrid.

Add the following code into Constructor of the Window.

3.gif
 
Now run the application to see if Data is displayed!

4.gif
 
Great!

Now we will tweak a litle bit. We will add the event handler AutoGeneratedColumns for DataGrid.

Add the handler in the constructor.

5.gif
 
Now in the above added event we will generate our ContextMenu.

6.gif
 
As you see in the above code we are looping through all the columns and adding a MenuItem to ContextMenu each time.

We need to add the above event handlers for MenuItem as we are going to Click/Check/Uncheck them at runtime.

Now in the Click event we will add the following code:

7.gif
 
Here is the logic; when we click on the MenuItem only the Click event is handled, not the Check/Uncheck event. So we have Changed the IsChecked property each time the MenuItem is clicked. Then we can handle the Checked/Unchecked events.

Now we will do similar thing that we did in our last article.

Add the following code for Checked event of MenuItem.

8.gif
 
Add the following code for UnChecked event of MenuItem.

9.gif
 
Next is our major part where we will handle the RightMouseButtonDown event and identify whether we have right clicked on the Header or not.

10.gif
 
It seems we are ready. Run the application.

11.gif
 
As you see above we have successfully displayed the ContextMenu on Column Header.

Now we will perform the Hide/Un-Hide functions.

12.gif
 
Hope this article helps.