Using collection view with mixed types elements ? (heterogeneous collection)

[bebenlebricolo]

Hi guys !
Lately I've been trying to achieve something that looks like this using heterogeneous data collections :

Here spacing is uneven, it's a bad mockup I drew too fast

This is using different data models (one for the date separator, the other one the actual card content).
The interesting part, I believe, lies around the Date separators which can be used to construct a mixed UI.

I saw that something of this sort might be achievable via DataTemplateSelector, and I would like to do it with a mix of code behind and Xaml (I find data template selector cumbersome, where we could rely on Custom ContentViews to provide a rendering entry point.)

Assuming that we have :

1. PaymentCardView (custom Control derived from ContentView), using a dedicated datamodel
2. A custom data model (PaymentCardModel) bound to PaymentCardView
3. Another custom control to render the date separator

Would it be possible to have on the main page :

<ContentPage.Content>
        <CollectionView SelectionMode="None"
                                     ItemsSource="{Binding CustomCardsList}" > <!-- Where this CustomCardsList would be a list of ContentView -->
            <CollectionView.ItemsLayout>
                <LinearItemsLayout Orientation="Vertical"
                                   ItemSpacing="5" />
            </CollectionView.ItemsLayout>
<!-- And we wouldn't need to write specific DataTemplates here --> 
</CollectionView>

and in the Page's ViewModel :

class MyViewModel : ObservableObject
{
    [ObservableProperty] private List<ContentView> _customCardsList;

    private void UpdateUI()
    {
        var lightModels = new List<SimplifiedModel>
        {
            {
                Name = "test",
                Amount = 35
            },
            {
                Name = "Another one",
                Amount = 32
            },
        }

        // Populate UI based on built models
        var customList = new List<ContentView>();
        foreach (var model in lightModels)
        {
            customList.Add(new PaymentCardView(model)); // We inject the data model via the constructor, which is not allowed by DataTemplateSelectors
            customList.Add(new DateCardView("23 Sept 2024"))
        }
        CustomCardsList = paymentCards;
    }
}

I haven't tested this code, it's there to illustrate the point.

The idea would be that in absence of custom DataTemplate (which is very convenient for development), we'd rely on the ContentViews list only to derive the look of the CollectionView ?

I also tried ListView control, but it seems it works more or less the same way, regarding how data is displayed.