WPF Control Puzzle

Question

I am new to WPF and am wondering how to best achieve a master detail grid as shown below.

The user will be able to press the right/left arrow keys to open/close Parents or click on the icon to achieve the same result. The data structure will be a parent/child 1 level deep.

How would I go about this?

-------------------------------------  
Parent1  (P1)                       ^
-------------------------------------  
P1 - Child 1    
-------------------------------------  
P1 - Child 2
-------------------------------------  
Parent2  (P2)                       ^
-------------------------------------  
P2 - Child 2
-------------------------------------  
Parent3  (P3)                       >
-------------------------------------

Thanks in advance...

Answer 1

A couple of possibilities:

• Use a TreeView, with suitable HierarchicalDataTemplates for the parent and child levels. I believe this will handle the arrow keys for you, but you may have to do more extensive templating to align everything correctly (ItemContainerStyle and the TreeViewItem.Template property would be the starting point).
• Use an ItemsControl, and have your ItemTemplate include an Expander. The Header of the Expander would show the parent. The content of the Expander would be another ItemsControl, bound to the child items and with its ItemTemplate set to the appropriate detail view. Again, you would probably need to template the Expander to put the "expand/collapse" icon on the right rather than its default position on the left. You'll need to handle the arrow keys yourself in this case I think. The advantage is that this will naturally give you "stack" alignment (accordion style) rather than indenting.