Displaying Hierarchical Data using WPF DataGrid

The WPF DataGrid control of the WPF toolkit has a very interesting feature called row details which can be used to display related data of a selected row. It’s basically a template, much like those in the data controls of ASP.NET. If you create a template with a grid on it, basically you already have a control for displaying hierarchical data. So given the simplified object model below,

the markup required to display the items every time an order row is selected would be:

The key object here is Binding. It contains the path that tells WPF how to find the data to display. In the code illustration above, the Path property for the child grid is resolved to Items property of the Order bound to the selected row. The data is taken from the DataContext property of the data grid which are set up and assigned using the codes such as these:

Voila! The effect is a much friendlier data presentation.