Nested CollectionView or Displaying nested data inside of a collection view

I am trying to avoid bad practice by NOT adding a Collection View inside of a Collection view to display nested data and I have a class of

   public partial class Items
   {
        public int itemNumber { get; set; }
        public string itemdescr{ get; set; }
        public List<Items> Child { get; set; }
    }
    

my collection view looks as such

<CollectionView x:Name="CollectionViewBoM" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="9" ItemsSource="{Binding Data}">
                    <CollectionView.ItemTemplate>
                        <DataTemplate >
                            <mct:Expander >
                                <mct:Expander.Header>
                                    <Grid HeightRequest="45" MaximumHeightRequest="90" ColumnSpacing="1" RowSpacing="2">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="240"/>
                                            <ColumnDefinition Width="*"/>
                                        </Grid.ColumnDefinitions>
                                        <BoxView Grid.Column="0" Style="{DynamicResource ContentBoxView}"/>
                                        <BoxView Grid.Column="1" Style="{DynamicResource ContentBoxView}"/>
                                        <Label TextColor="{DynamicResource SecondaryTextColor}" Grid.Column="0" Text="{Binding itemNumber}" Style="{DynamicResource ContentLabel}"/>
                                        <Label TextColor="{DynamicResource SecondaryTextColor}" Grid.Column="1" Text="{Binding Description}" Style="{DynamicResource ContentLabel}"/>
                                    </Grid>
                                </mct:Expander.Header>
                                <mct:Expander.Content x:Name="CollectionViewChild">
                                    <StackLayout BindableLayout.ItemsSource="{Binding Child}">
                                        <BindableLayout.ItemTemplate>
                                            <DataTemplate>
                                                <HorizontalStackLayout>
                                                    <Label Text="{Binding itemNumber}" />
                                                    <Label Text="{Binding itemdescr}"  Margin="10,0,0,0"/>
                                                </HorizontalStackLayout>
                                            </DataTemplate>
                                        </BindableLayout.ItemTemplate>
                                    </StackLayout>
                                </mct:Expander.Content>
                            </mct:Expander>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>

I am binding to the view model as such but I am able to see the Data but not able to see the Child data. Am I incorrectly using the BindableLayout.ItemsSource?

        [ObservableProperty]
        public List<Items> data;

You can recheck if you could get the inner list data(Child) correctly.

Based on your code, I made a demo to achieve this functionality, and it could work properly.

You can refer to the following code:

public partial class MyViewModel:ObservableObject 
{
[ObservableProperty]
public List<Items> data;
public MyViewModel()
{
List<Items> Childs = new List<Items>();
Childs.Add(new Items { itemNumber = 01 - 1, itemdescr = "desc-01-1" });
Childs.Add(new Items { itemNumber = 02 - 1, itemdescr = "desc-02-1" });
Childs.Add(new Items { itemNumber = 03 - 1, itemdescr = "desc-03-1" });
Data = new List<Items>();
Data.Add(new Items { itemNumber= 01, itemdescr ="desc-01",Child= Childs });
Data.Add(new Items { itemNumber= 02, itemdescr ="desc-02", Child = Childs });
Data.Add(new Items { itemNumber= 03, itemdescr ="desc-03", Child = Childs });
Data.Add(new Items { itemNumber= 04, itemdescr ="desc-04" , Child = Childs });
Data.Add(new Items { itemNumber= 05, itemdescr ="desc-05" , Child = Childs });
Data.Add(new Items { itemNumber= 06, itemdescr ="desc-06" , Child = Childs });
}
}

Usage:

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiMVVMToolkitApp.MyPage"
xmlns:viewmodel="clr-namespace:MauiMVVMToolkitApp.ViewModels"
xmlns:mct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
Title="MyPage">
<ContentPage.BindingContext>
<viewmodel:MyViewModel></viewmodel:MyViewModel>
</ContentPage.BindingContext>
<VerticalStackLayout>
<CollectionView x:Name="CollectionViewBoM" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="9" ItemsSource="{Binding Data}">
<CollectionView.ItemTemplate>
<DataTemplate >
<mct:Expander >
<mct:Expander.Header>
<Grid HeightRequest="45" MaximumHeightRequest="90" ColumnSpacing="1" RowSpacing="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="240"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--<BoxView Grid.Column="0" />
<BoxView Grid.Column="1" />-->
<Label  Grid.Column="0" Text="{Binding itemNumber}" />
<Label  Grid.Column="1" Text="{Binding Description}" />
</Grid>
</mct:Expander.Header>
<mct:Expander.Content x:Name="CollectionViewChild">
<StackLayout BindableLayout.ItemsSource="{Binding Child}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<HorizontalStackLayout>
<Label Text="{Binding itemNumber}" />
<Label Text="{Binding itemdescr}"  Margin="10,0,0,0"/>
</HorizontalStackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</mct:Expander.Content>
</mct:Expander>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</VerticalStackLayout>
</ContentPage>

Note:

For the sake of code brevity, I commented out the two BoxView of the layout.

Besides, I noticed that the class Items should also contain another attribute Description, and that the property of the Class Items(Child), whose internal child elements are also of type Items. Please pay attention to this when initializing the data.

Firstly, I did the following name changes:

• Items -> Item
• itemNumber -> ItemNumber
• itemDescr -> ItemDesc
• Child -> Children
• Turned Item into a view model by making it inherit ObservableObject
• Made Children an ObservableCollection<Item>

	public partial class Item : ObservableObject
	{
		[ObservableProperty]
		private int _itemNumber;
		[ObservableProperty]
		private string _itemDesc;
		[ObservableProperty]
		private ObservableCollection<Item> _children = new ObservableCollection<Item>();
	}

Then, in my MainViewModel.cs I declare not only the ObservableCollection, but, I also implement a SelectedItem.

	public partial class MainViewModel: ObservableObject
	{
		[ObservableProperty]
		private ObservableCollection<Item> _items = new ObservableCollection<Item>();

		[ObservableProperty]
		private Item? _selectedItem;
		
		public MainViewModel()
		{
			Item item;
			item = new Item() { ItemNumber = 101, ItemDesc = "Parent Item 101" };
			item.Children.Add(new Item() { ItemNumber = 1001, ItemDesc = "Child Item 1001" });
			item.Children.Add(new Item() { ItemNumber = 1002, ItemDesc = "Child Item 1002" });
			Items.Add(item);
			item = new Item() { ItemNumber = 201, ItemDesc = "Parent Item 201" };
			item.Children.Add(new Item() { ItemNumber = 2001, ItemDesc = "Child Item 2001" });
			item.Children.Add(new Item() { ItemNumber = 2002, ItemDesc = "Child Item 2002" });
			item.Children.Add(new Item() { ItemNumber = 2003, ItemDesc = "Child Item 2003" });
			Items.Add(item);
			SelectedItem = Items[0];
		}
	}

Then, for UI I declared two CollectionViews one for Master and one for Detail. In the first CollectionView I do a TwoWay data binding on the SelectedItem (note you also need to set SelectionMode="Single"). In the second CollectionView the same SelectedItem is used as a binding context so that I can access the Children. Lastly, another way to reduce the complexity of your XAML is to put your DataTemplates in Resources and refer to their key names later.

You should note that the CollectionViews are not nested but declared sequentially, so, it should be simple for you to control their placement. I've used a simple VerticalStackLayout, but you can space them how you want with Grid.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="maui_mvvm_sample.MainPage">
<ContentPage.Resources>
<DataTemplate x:Key="parentTemplate">
<HorizontalStackLayout>
<Label Text="{Binding ItemNumber}"/>
<Label Text="{Binding ItemDesc}"/>
</HorizontalStackLayout>
</DataTemplate>
<DataTemplate x:Key="childTemplate">
<HorizontalStackLayout>
<Label Text="{Binding ItemNumber}"/>
<Label Text="{Binding ItemDesc}"/>
</HorizontalStackLayout>
</DataTemplate>
</ContentPage.Resources>
<VerticalStackLayout>
<Label Text="Master"/>
<CollectionView ItemsSource="{Binding Items}"
ItemTemplate="{StaticResource parentTemplate}"
SelectedItem="{Binding SelectedItem,Mode=TwoWay}"
SelectionMode="Single"/>
<Label Text="Detail"/>
<CollectionView BindingContext="{Binding SelectedItem}"
ItemsSource="{Binding Children}"
ItemTemplate="{StaticResource childTemplate}">
</CollectionView>
</VerticalStackLayout>
</ContentPage>

If you do not wish to do a TwoWay binding on SelectedItem you can create navigation commands such as First, Previous, Next, Last, and update SelectedItem that way.