How do I display two tables in a data grid/tree view showing columns for both the parent and child tables (when child expanded)

Question

I'm trying to use a TreeView/DataGrid to display some data. I need to display columns for the top level items, but also display a header for the expanded level.

I have a dataset with two tables, e.g. Orders and Items, items has a foreign key to Orders.

I'm trying to bind the dataset to the datagrid/tree view so that I show the list of orders.

The WinFrom DataGrid can show multiple tables from the DataSet:

Which I set with:

dataGrid.DataSource = dataSet;
dataGrid.DataMember = "Orders";

Clicking the [+] expands the row to show the link:

Following that link brings up the Items Table:

What I'm after is a mix of both but in WPF:

I've used a dataset for this example but I can massage my data into collections etc that WPF can use to display the data in the way I'm trying to achieve.

I've looked at the TreeListView which gives me the top level item headers, but I'm scratching my head trying to get the expanded items header to be shown. Could someone point me in the right direction, thanks.

Update I've come back to looking at this issue. As per @offapps-cory's answer I tried using a ListView with expander with a listview. 1st attempt:

As you can see, it expanded in the cell :) I'm thinking maybe I can throw a treeview into the mix...

Answer 1

Could you instead use a ListBox with ListViews nested in the items? While I have not had ListViews nested, I have nested ListBoxes several levels deep to achieve some functionality that I needed.

I originally thought that one might do as you are asking by customizing the TreeViewItem template and the ItemsPresenter, but ItemsPresenter is expecting a Panel, and ListView is a control.

I would try creating a DataTemplate with a ListView/GridView in it and an expander. You may need to do some funny databinding to get it working, but I don't see why it wouldn't work.