I am trying to show pages in my WPF/Caliburn Micro application. The pages should be presented in a rectangular way to the user. My idea is to use a collection (the rows) of collections (the columns) of my base view model for the pages: ``` public BindableCollection > Children { get; set; } ``` And do something like this in the associated View: ``` ``` And this is wrong - I don't get what to put into the inner ItemsControl. Thanks for any idea! Solution I am still not sure whether this is the perfect solution, but it works and seems not too hacky to m…

Binding nested ItemsControls to nested collections

caliburn.micro, wpf

Solution

A forward slash in a `Binding.Path` means the current item from the parent collection, but that won't as an `ItemsSource` value because it's not a collection:

<ItemsControl ItemsSource="{Binding /}">   <!-- This won't work  here -->

You also need to define your inner `ItemsControl.ItemTemplate`. Try something like this:

<ItemsControl ItemsSource="{Binding Children}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Vertical" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate> <!-- Bind to the whole data item (a collection) here -->
            <ItemsControl ItemsSource="{Binding}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate> <!-- Display your BaseViewModel data items here -->
                        <YourXmlNamespacePrefix:YourControl DataContext="{Binding}" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Problem

I am trying to show pages in my WPF/Caliburn Micro application. The pages should be presented in a rectangular way to the user. My idea is to use a collection (the rows) of collections (the columns) of my base view model for the pages: ``` public BindableCollection<BindableCollection<BaseViewModel>> Children { get; set; } ``` And do something like this in the associated View: ``` <ItemsControl x:Name="Children"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Vertical" /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <ItemsControl ItemsSource="{Binding /}"> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal"/> </ItemsPanelTemplate> </ItemsControl> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> ``` And this is wrong - I don't get what to put into the inner ItemsControl. Thanks for any idea! Solution I am still not sure whether this is the perfect solution, but it works and seems not too hacky to me: ``` <ItemsControl x:Name="Children"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Vertical" /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <ItemsControl ItemsSource="{Binding}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal" /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <ContentControl cal:View.Model="{Binding}" /> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> ```

Original source