Xamarin Forms ListView Inside CollectionView

Question

I have a collection view whose source is an IObservable(Object1) inside of each Object1 is a List(Object2). I would like to show each Object2 that is related to its Object1.

I have tried to place a ListView inside of a collectionView

I am getting the error System.InvalidOperationException LoadTemplate should not be null

<CollectionView Grid.Row="2" ItemsSource="{Binding Object1Collection}">
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>

                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="0.65*"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                
                                <Label TextColor="Black" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Text="{Binding Response}"></Label>

                                <Label TextColor="Black" Grid.Row="1" Grid.Column="0" Text="Restriction: "></Label>
                                
                                <ListView Grid.Row="1" Grid.Column="1" ItemsSource="{Binding Object2List }">
                                    <ListView.ItemTemplate>
                                        <DataTemplate>
                                            <!--
                                            <StackLayout Orientation="Horizontal">
                                                <Label TextColor="Black"  Text="{Binding Statistic}"></Label>
                                                <Label TextColor="Black" Text=" : "></Label>
                                                <Label TextColor="Black" Text="{Binding Amount}"></Label>
                                            </StackLayout>
                                            -->
                                        </DataTemplate>
                                    </ListView.ItemTemplate>
                                </ListView>
                            </Grid>

                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>

Answer 1

You could use CollectionView Grouping. https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/grouping

Xaml:

 <CollectionView ItemsSource="{Binding Object1Collection}" IsGrouped="True">
        <CollectionView.GroupHeaderTemplate>
            <DataTemplate >
                <Label Text="{Binding Response}"/>
            </DataTemplate>
        </CollectionView.GroupHeaderTemplate>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <ScrollView>
                    <Grid Padding="10">
                        <StackLayout BackgroundColor="Blue">
                            <Label Text="{Binding Statistic}"/>
                            <Label TextColor="Black" Text=" : "></Label>
                            <Label Text="{Binding Amount}"/>
                        </StackLayout>
                    </Grid>
                </ScrollView>
            </DataTemplate>
        </CollectionView.ItemTemplate>
        
    </CollectionView>

Model:

 public class Object1Model : List<Object2Model>
{
    public string Response { get; set; }
    public Object1Model(string response, List<Object2Model> Object2List) : base(Object2List)
    {
        Response = response;
    }
}

public class Object2Model
{
    public string Statistic { get; set; }
    public string Amount { get; set; }
}

Code behind:

  public ObservableCollection<Object1Model> Object1Collection { get; set; }
    public Page23()
    {
        InitializeComponent();
        Object1Collection = new ObservableCollection<Object1Model>();
        Object1Collection.Add(new Object1Model("Object1A", new List<Object2Model>
        {
            new Object2Model(){ Statistic="Object2Statistic1A", Amount="Object2Amount1A"},
            new Object2Model(){ Statistic="Object2Statistic1A", Amount="Object2Amount1A"},
        }));
        Object1Collection.Add(new Object1Model("Object1B", new List<Object2Model>
        {
            new Object2Model(){ Statistic="Object2Statistic1B", Amount="Object2Amount1B"},
            new Object2Model(){ Statistic="Object2Statistic1B", Amount="Object2Amount1B"},
        })); 
        Object1Collection.Add(new Object1Model("Object1C", new List<Object2Model>
        {
            new Object2Model(){ Statistic="Object2Statistic1C", Amount="Object2Amount1C"},
            new Object2Model(){ Statistic="Object2Statistic1C", Amount="Object2Amount1C"},
        }));

        this.BindingContext = this;
    }

Answer 2

Add ViewCell under DataTemplate of ListView.

<ListView Grid.Row="1" Grid.Column="1" ItemsSource="{Binding Object2List }">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Orientation="Horizontal">
                    <Label TextColor="Black"  Text="{Binding Statistic}"></Label>
                    <Label TextColor="Black" Text=" : "></Label>
                    <Label TextColor="Black" Text="{Binding Amount}"></Label>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Fix those two exceptions:

1. No viewcell error:
   'Specified cast is not valid.'

2. Comment out the StackLayout error:
   'LoadTemplate should not be null'