Display data from two levels down

Question

I have the following classes, which contain ObservableCollections of the next level down:

Draw
ObservableCollection<Round>();

Round
ObservableCollection<Formation>();

Formation

So a Draw is made up of Rounds, Rounds are made up of Formations.

I have a page which has a button to create a random draw, I currently have it calling another class which returns a draw:

this.defaultViewModel[DrawName] = RandomDraw.generate();

I am having no problem binding a ListView to Rounds and displaying round information, but how do I display the individual formations? This is what I am currently doing, I was not expecting to be able to just display things by binding to Formations but how do I access it?

<ListView
    ItemsSource="{Binding Rounds}"
    IsItemClickEnabled="True"
    ItemClick="ItemView_ItemClick"
    ContinuumNavigationTransitionInfo.ExitElementContainer="True">
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Margin="0,0,0,9.5">
                <TextBlock
                    Text="{Binding RoundNumber}"
                    TextWrapping="Wrap"
                    Pivot.SlideInAnimationGroup="1"
                    CommonNavigationTransitionInfo.IsStaggerElement="True"
                    Style="{ThemeResource ListViewItemTextBlockStyle}"
                    Margin="0,0,19,0"/>
                <TextBlock
                    Text="{Binding Formations}"
                    TextWrapping="WrapWholeWords"
                    Pivot.SlideInAnimationGroup="2" 
                    CommonNavigationTransitionInfo.IsStaggerElement="True" 
                    Style="{ThemeResource ListViewItemContentTextBlockStyle}"
                    Margin="0,0,19,0"/>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Answer 1

You should take a look at Hierarchical Data Templates, which are used by the WPF TreeView control rather than ListViews. They are a natural fit to show hierarchical data. Of course, like any WPF control, you can completely customize their appearance using styling and templates. Here are some good references:

MSDN How to: Use a TreeView to Display Hierarchical Data

Hierarchical Databinding in WPF

However, if you would like to keep using ListViews, then one way to do this is to nest another container control inside the parent ListVIew. ObservableCollections are processed automatically by specific WPF elements, such as Panels. In your example, you can replace the second TextBlock with another ListView, with an ItemTemplate similar to the first. It can also be any Collection-like Panel element, such as StackPanel.

<ListView
    ItemsSource="{Binding Rounds}"
    IsItemClickEnabled="True"
    ItemClick="ItemView_ItemClick"
    ContinuumNavigationTransitionInfo.ExitElementContainer="True">
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Margin="0,0,0,9.5">
                <TextBlock
                    Text="{Binding RoundNumber}"
                    TextWrapping="Wrap"
                    Pivot.SlideInAnimationGroup="1"
                    CommonNavigationTransitionInfo.IsStaggerElement="True"
                    Style="{ThemeResource ListViewItemTextBlockStyle}"
                    Margin="0,0,19,0"/>
                <!-- CHANGED CODE HERE -->
                <ListView
                    ItemsSource="{Binding Formations}"
                    ...>
                    <ListView.ItemTemplate>...</ListView.ItemTemplate>
                </ListView>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>