CollectionView within a CollectionView Grid not rendering

Question

I have a ContentPage that contains a CollectionView inside another CollectionView. Each of my "Standings" objects contains a collection of "StandingDetail" that I want to display in the right-most column of the standings grid.

...
<CollectionView ItemsSource="{Binding Standings}"
                SelectionMode="None">
                         
    <CollectionView.ItemsLayout>
         <GridItemsLayout Orientation="Vertical"
                          Span="1"/>
    </CollectionView.ItemsLayout>
                            
    <CollectionView.ItemTemplate>
         <DataTemplate x:DataType="model:ContestStandingView">
              <Grid Padding="10"
                    ColumnDefinitions="25,*,*,*">
                   <Label Text="{Binding place}"
                          Grid.Column="0"/>
                   <Label Text="{Binding userName}"
                          Grid.Column="1"/>
                   <Label Text="{Binding creditsTotal}"
                          Grid.Column="2"/>

 
                   <CollectionView ItemsSource="{Binding StandingDetail}"
                                   SelectionMode="None"
                                   HeightRequest="100"
                                   Grid.Column="3"
                                   BackgroundColor="Red">
                                            
                         <CollectionView.ItemsLayout>
                              <GridItemsLayout Orientation="Vertical"
                                               Span="1"/>
                         </CollectionView.ItemsLayout>
                                            
                         <CollectionView.ItemTemplate>
                              <DataTemplate x:DataType="model:StandingDetail">
                                   <Grid Padding="10"
                                         ColumnDefinitions="*,*"
                                         BackgroundColor="Blue"
                                         HeightRequest="50">
                                        <Label Text="TestStatic"
                                               Grid.Column="0"/>
                                        <Label Text="{Binding detailName}"
                                               Grid.Column="1"/>

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

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

I added the background colors to help me debug. I would expect the right column of my grid to be a blue rectangle contained within a red rectangle with text in the blue rectangle, but the output is as shown below. Why is the blue grid not rendering?

Answer 1

You should define the model:ContestStandingView like below if you want the CollectionView nested with another CollectionView:

public class ContestStandingView 
{
      public string place { get;set; }
      public string userName { get;set; } 
      public string creditsTotal { get; set; }
      public ObservableCollection<StandingDetail> standingDetails { get; set; } = new();

}

And then assign the ItemSource of CollectionView in code-behind(below sample) or your ViewModel like below:

    public ObservableCollection<ContestStandingView> Standings { get; set; }
    public TestPage()
    {
        InitializeComponent();



        Standings = new()
        {
            new()
            {
                place="1",
                userName="Adam L",
                creditsTotal="17,540",

                standingDetails = new()
               {

                  new(){ detailName="detailName1"
               },
                 new(){ detailName="detailName2"}
               }
        },


                 new()
            {

                place="2",
                userName="delta",
                creditsTotal="15,000",

                standingDetails = new()
              {

               new(){
                 detailName="detailName1",
               },
                 new(){
                 detailName="detailName2"
               },

                }
                }
        };
        BindingContext = this;
}

Output: