Question

This is an interesting case to which I haven’t been able to find any info online. I am trying to create a grid and need to bind an ObservableCollection of ObservableCollection to it. Imagine a model such as this:

public class App
{
    private ObservableCollection<MyNewCollection> collections;
}

public class MyNewCollection : DependencyObject
{
    public ObservableCollection<MyCollectionItem> items;
    // ... public properties: string CollectionTitle 
}

public class MyCollectionItem : DependencyObject 
{
    // ... public properties: string ItemTitle
}

I want the first column of the grid to list items in collections object so that every row would contain the CollectionTitle from one of the items in the collections ObservableCollections. For the second column, I want each row to contain the set of MyCollectionItems items associated with the appropriate collection object.

From the code above:

1. collections as ‘c’
2. items as ‘i’

+---------------------------------------------------------------------------------------------+
+        |       Column 0          |                        Column 1                          |
+---------------------------------------------------------------------------------------------|
+ Row 0  |  c[0].CollectionTitle   | c[0].i[0].ItemTitle ...i[1].ItemTitle ... i[2].ItemTitle |
+ Row 1  |  c[1].CollectionTitle   | c[1].i[0].ItemTitle ...i[1].ItemTitle ... i[2].ItemTitle |
+        |                         |                                                          |
+ ...                                                                                         |
+---------------------------------------------------------------------------------------------+

This would have been easy if I had a static set of MyNewCollection objects but since that can grow to infinity, I need to create a new ObservableCollection of the MyNewCollection objects and this is where I am running into trouble in understanding how to do this with WPF. Any help will be appreciated.

Thanks.

Answer 1

Here’s one way using an ItemsControl where each row contains another ItemsControl.

The Xaml:

<Page.Resources>
    <DataTemplate x:Key="ChildItemTemplate" 
                  DataType="{x:Type Samples:NestedCollectionItem}">
        <TextBlock Text="{Binding Title}" Margin="5"/>
    </DataTemplate>
    <ItemsPanelTemplate x:Key="ChildItemPanel">
        <StackPanel Orientation="Horizontal"/>
    </ItemsPanelTemplate>
    <DataTemplate x:Key="ItemTemplate" 
                  DataType="{x:Type Samples:NestedCollectionChildViewModel}">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" SharedSizeGroup="c1"/>
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <TextBlock VerticalAlignment="Center"  Text="{Binding Title}"/>
            <ItemsControl 
                Grid.Column="1" 
                ItemsSource="{Binding Items}"
                ItemsPanel="{StaticResource ChildItemPanel}"
                ItemTemplate="{StaticResource ChildItemTemplate}"
                />
        </Grid>
    </DataTemplate>
</Page.Resources>

<Page.DataContext>
    <Samples:NestedCollectionRootViewModel/>
</Page.DataContext>

<Grid>
    <ItemsControl 
        Grid.IsSharedSizeScope="True"
        ItemsSource="{Binding Items}" 
        ItemTemplate="{StaticResource ItemTemplate}"/>
</Grid>

The code:

public class NestedCollectionRootViewModel
{
    public NestedCollectionRootViewModel()
    {
        Items =
            new ObservableCollection<NestedCollectionChildViewModel>
                {
                    new NestedCollectionChildViewModel
                        {
                            Title = "Item 1",
                            Items =
                                new ObservableCollection<NestedCollectionItem>
                                    {
                                        new NestedCollectionItem {Title = "One"},
                                        new NestedCollectionItem {Title = "Two"},
                                        new NestedCollectionItem {Title = "Three"},
                                        new NestedCollectionItem {Title = "Four"},
                                    }
                        },

                    new NestedCollectionChildViewModel
                        {
                            Title = "Item 2",
                            Items =
                                new ObservableCollection<NestedCollectionItem>
                                    {
                                        new NestedCollectionItem {Title = "Five"},
                                        new NestedCollectionItem {Title = "Six"},
                                    }
                        },

                };
    }

    public ObservableCollection<NestedCollectionChildViewModel> Items 
       { get; private set; }
}

public class NestedCollectionChildViewModel
{
    public string Title { get; set; }
    public ObservableCollection<NestedCollectionItem> Items { get; set; }
}

public class NestedCollectionItem
{
    public string Title { get; set; }
    // ... etc
}