Question

I am attempting to create a ListView control which is populated via a binding to an ObservableCollection, which itself contains another ObservableCollection from which I need to display data in the ListView.

To clarify I have an object hierarchy as follows:

ClassA
{
    int ID = 123;
    string Name = "Value";
}

ClassB
{
    int ID = 456;
    ObservableCollection<ClassA> CollectionOfClassA;
}

ClassC
{
    int ID = 789;
    ObservableCollection<ClassB> CollectionOfClassB;
}

From this I would like to end up with the following ListView layout:

(ClassC.CollectionOfClassB ListView)
+-------------+-------------+------------------+--------------------------------+
|  ClassB.ID  |  CollectionOfClassA.ClassA.ID  |  CollectionOfClassA.ClassA.ID  |
+-------------+-------------+------------------+--------------------------------+
|  ClassB.ID  |  CollectionOfClassA.ClassA.ID  |  CollectionOfClassA.ClassA.ID  |
+-------------+-------------+------------------+--------------------------------+

To achieve this I would assume I need to bind my ListView to my CollectionOfClassB collection, however, the datatemplate structure and subsequent binding for producing the rows has me a bit stumped.

Can anyone assist me with this please?

Many thanks,

Edit:

The first column in the table above references the ID field for the indexed object in the ClassC.CollectionOfClassB collection, each row being an individual object stored in the CollectionOfClassB.

Each of the ClassB objects stored in CollectionOfClassB has its own CollectionOfClassA, which I am attempting to place in the listview on the same row as its parent. Each ClassA object in CollectionOfClassA being a column.

Edit 2:

The first column is populated by the ID field from ClassB for the current item in the CollectionOfClassB, the subsequent columns are populated with data from each item in the CollectionOfClassA. The column header would be ClassA.ID, whilst the content would be ClassA.Name for example.

I am looking for example XAML markup that will allow me to achieve this.

Answer 1

If you know that ClassB.CollectionOfClassA is always the same length, you can bind to an indexed value of it

Here’s a rough example

<!-- Assumes DataContext is ClassC -->
<ListView ItemsSource="{Binding CollectionOfClassB}">
    <ListView.View>
        <GridView>
            <GridViewColumn DisplayMemberBinding="{Binding Id}" Header="ClassB.Id" />
            <GridViewColumn DisplayMemberBinding="{Binding CollectionOfClassA[0].Id}" Header="ClassA[0].Id" />
            <GridViewColumn DisplayMemberBinding="{Binding CollectionOfClassA[1].Id}" Header="ClassA[1].Id" />
        </GridView>
    </ListView.View>
</ListView>

If you have a dynamic number of columns, it becomes a bit trickier

The simplest way would be to use a custom column and display the items in something like a horizontal StackPanel

<!-- Assumes DataContext is ClassC -->
<ListView ItemsSource="{Binding CollectionOfClassB}">
    <ListView.View>
        <GridView>
            <GridViewColumn DisplayMemberBinding="{Binding Id}" Header="ClassB.Id" />
            <GridViewColumn Header="CollectionOfA"
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <ItemsControl ItemsSource="{Binding CollectionOfClassA}">
                            <ItemsControl.ItemsPanelTemplate>
                                <StackPanel Orientation="Horizontal" />
                            </ItemsControl.ItemsPanelTemplate>

                            <ItemsControl.ItemTemplate>
                                <TextBlock Text="{Binding Id}" Width="50" />
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
        </GridView>
    </ListView.View>
</ListView>

Of course, this doesn’t use the built-in GridView features like sorting