Binding DataGrid columns to DataContext items

The WPF DataGrid is a fantastic component. It’s flexible and can serve in a lot of different scenarios. Recently I was using the DataGrid in a project and had the need to dynamically hide certain columns via a users selection in a configuration section.

The idea is the user would check a box to hide a corresponding column represented in the DataGrid and the column would not appear.

 image image

I implemented the XAML as below, binding the columns visibility flag to the checkboxes IsChecked value with the appropriate converter. I was surprised to find that this didn’t work at all. Toggling the checkbox did nothing.


Looking in the IDE’s Output window I noticed the following binding error message:

System.Windows.Data Error: 2 : Cannot find governing FrameworkElement or FrameworkContentElement for target element. BindingExpression:Path=IsChecked; DataItem=null; target element is ‘DataGridTextColumn’ (HashCode=19699911); target property is ‘Visibility’ (type ‘Visibility’)

After some digging around, I found that the DataGrid columns aren’t actually in the Visual Tree of the window as you can see from the screenshot below.


This is the source of our error, as the DataGridTextColumn we are trying to bind to things isn’t participating in the Visual Tree.  To work around this we can implement the DataGrid’s DataContextChanged event and “forward’ the DataContext to the individual columns.

This would allow the individual columns to be able to be bound to items within the DataContext. Below is a quick and dirty implementation of how to perform this forwarding.

A more elegant way to do this would be to override the DataContextChanged property on all Datarid’s using  a metadata override.

Here’s the code behind to handle the DataContextChanged event and forward the context to the columns. Notice that I’ve also implemented a property with change notification to be used by the checkbox to store it’s “IsChecked” value so that it can be retrieved via the DataContext.


And here’s the modified XAML showing the Checkbox now bound to the new property and the DataGrid’s first column bound to the same value using the DataContext.


Because the DataGridTextColumn is not part of the visual tree I don’t believe there is any way to perform direct element bindings.

If someone figures this out, drop me a note.


Data Visualization in WPF using Graph#

I’m currently working on a prototype for my current project to visualize a set of data in a way that can give a user a quick overview of the relationships between objects within a “project”.

In the product I work on there is a lot of inter-related data that users are exposed, but it is still fairly difficult for users to get the “big picture” rather quickly. Instead they currently rely on a set of reports and data dumps to help them visualize the data.

I thought I would generalize this a bit (names removed to protect the innocent) and showcase a use of a great open source library – Graph# – for visualizing data. Nothing fancy, but I believe showing the data in an additional view, will enable someone to better understand the relationships between the items at a glance.

First some background is in order. For the purposes of my project I have a pseudo-hierarchical set of items that can be linked to one another. So our model can have both hierarchical relationships as well as associative relationships.


Demo Background

To make this a bit more concrete I will use an example right out of software development. We will have a software “project” we are working on with the following item types:

  • Project – deliverable that “contains“ features.
  • Feature – a feature “contains” tasks. A feature may also have a document associated with it.
  • Task – a task is the low level unit of work being done. A task may also have issues “associated” with it.
  • Issue – a problem or defect found in a task. A single issue can pertain to multiple tasks.
  • Document – a textual description of something. Can be associated to a task.


    The design is fairly straight forward in that I’ve defined a few abstract classes that represent a “Model” and “ProjectItem”. Deriving from these I’ve created classes for each of the above item types we will support.

    The GraphViewFactory component is the bridge between the”Model” implementation and the objects the graph needs. It will walk the model and flatten it, producing a set of vertices and links to add to the graph.

    From there the graph control is used to layout and render the graph. The demo application has a few tweakable items available in the UI, such as the Layout algorithm. Additionally you can drill down into a node to get a rendering of that node, it’s sub-tree and it’s immediate parent (to go back up the tree).

    Incidentally, the data is loaded from an XML file – SampleData.xml. This was my first attempt at using LINQ to XML.


    The Finished Product


    While not awe inspiring perhaps, it does showcase the ease with which normal data can be visualized in a different way. The project I am working on actually has spiffy icons, tooltips and details panels for each item with the graph.

    Some of the interesting ways we are considering using visualization

    • Give users the ability to see “covered” items.
      • For instance, in our demo we could visualize the number of issues being generated and easily see which items were getting a lot of defects, or see which items do/don’t have enough “Documentation”
    • The ability to see transitive links. Currently systems are fairly good at showing you a relationship between an item and other items in a many to many relationship. With visualization we can take them to the next level by seeing the connections of the connections of…

    Screenshot #1


    Screenshot #2


    Download the source for the demo here

    Digg This