How to bind a list of list to a ListView control

Question

I have The following structure

QPage class Object contains a List<List<QLine>> QLine object contains List<Qword>

every list of words constructs a line and every list of lines consists a group(paragraph) and every list of paragraphs consists a page.

I want to bind the page to structure like this in XAML

<ListView>
    <StackPanel Orientation="Vertical">
        <StackPanel Orientation="Horizontal">
            <TextBlock>                 
            </TextBlock>
        </StackPanel>
    </StackPanel>
</ListView>

where each item of the ListView is a paragraph(List<QLine>) and each vertical stack panel holds an item of the List<QLine> and each item of the horizontal stack panel holds an item of the List<Qword> and the texblock is bound to Qword.text property. I have no idea how to do such binding from the XAML code.

Answer 1

Hopefully I did not miss some list but this should work. Basically it's a ListBox that hosts List<List<QLine>> (called it QPageList). Then you have ItemsControl that hosts each List<QLine> in vertical panel and finally there is another ItemsControl that hosts List<Qword> from QLine (called it QwordList) where each QWord is displayed as TextBlock on horizontal StackPanel

<!-- ItemsSource: List<List<QLine>>, Item: List<QLine> -->
<ListBox ItemsSource="{Binding QPageList}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <!-- ItemsSource: List<QLine>, Item: QLine -->
            <ItemsControl ItemsSource="{Binding}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <!-- ItemsSource: QLine.List<QWord>, Item: QWord --> 
                        <ItemsControl ItemsSource="{Binding QwordList}">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Horizontal"/>
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <!-- Item: QWord -->
                                    <TextBlock Text="{Binding text}"/>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Answer 2

What you are looking for is ListView.ItemTemplate. Basically, you need to provide your list with a way to understand the nested data structure of your rows.

Here is a good tutorial to get you started on ItemTemplates.

Once your list has an item template then you just bind the ListView directly to your data source and that's it.