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.

[stephenquan]

What's wrong with setting your DataTemplate to a ContentView?

You can defined 3 ControlTemplates in a ResourceDictionary and you use one of the ControlTemplate as the default and you can switch on either of the other two with the use of DataTriggers.

<!-- MainPage.xaml -->
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="MauiCustomView.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiCustomView"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    x:Name="this"
    x:DataType="local:MainPage"
    BindingContext="{Reference this}">
    <ContentPage.Resources>
        <ResourceDictionary x:Name="resourceDictionary">
            <toolkit:MultiMathExpressionConverter x:Key="MultiMathExpressionConverter" />
            <ControlTemplate x:Key="LabelControlTemplate">
                <Label Text="Label" />
            </ControlTemplate>
            <ControlTemplate x:Key="ButtonControlTemplate">
                <Button Text="Button" />
            </ControlTemplate>
            <ControlTemplate x:Key="EntryControlTemplate">
                <Entry Placeholder="Entry" />
            </ControlTemplate>
        </ResourceDictionary>
    </ContentPage.Resources>
    <CollectionView ItemsSource="{Binding Widgets}">
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="{x:Type x:String}">
                <ContentView ControlTemplate="{StaticResource LabelControlTemplate}">
                    <ContentView.Triggers>
                        <DataTrigger
                            Binding="{Binding .}"
                            TargetType="ContentView"
                            Value="Button">
                            <Setter Property="ControlTemplate" Value="{StaticResource ButtonControlTemplate}" />
                        </DataTrigger>
                        <DataTrigger
                            Binding="{Binding .}"
                            TargetType="ContentView"
                            Value="Entry">
                            <Setter Property="ControlTemplate" Value="{StaticResource EntryControlTemplate}" />
                        </DataTrigger>
                    </ContentView.Triggers>
                </ContentView>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

If you don't want to use a DataTrigger, then, you can construct a StringToResourceConverter.

<!-- MainPage.xaml -->
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="MauiCustomView.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiCustomView"
    x:Name="this"
    x:DataType="local:MainPage"
    BindingContext="{Reference this}">
    <ContentPage.Resources>
        <ResourceDictionary x:Name="resourceDictionary">
            <ControlTemplate x:Key="LabelControlTemplate">
                <Label Text="Label" />
            </ControlTemplate>
            <ControlTemplate x:Key="ButtonControlTemplate">
                <Button Text="Button" />
            </ControlTemplate>
            <ControlTemplate x:Key="EntryControlTemplate">
                <Entry Placeholder="Entry" />
            </ControlTemplate>
        </ResourceDictionary>
    </ContentPage.Resources>
    <CollectionView ItemsSource="{Binding Widgets}">
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="{x:Type x:String}">
                <ContentView ControlTemplate="{Binding ., Converter={local:StringToResourceConverter}, ConverterParameter={Reference resourceDictionary}}" />
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

// MainPage.xaml.cs
using System.Collections.ObjectModel;
using System.Globalization;

namespace MauiCustomView;

public class StringToResourceConverter : IValueConverter
{
    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
    {
        if (value is string stringValue && parameter is Microsoft.Maui.Controls.ResourceDictionary resourceDictionary)
        {
            return resourceDictionary?.TryGetValue($"{stringValue}ControlTemplate", out var resource) == true ? resource : null;
        }
        return null;
    }

    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

public partial class MainPage : ContentPage
{
    public ObservableCollection<string> Widgets { get; } = new ObservableCollection<string>()
    {
        "Label", "Button", "Entry"
    };

    public MainPage()
    {
        InitializeComponent();
    }
}

If you don't want to use converters, you can use multiple DataTrigger instead. One for each

[bebenlebricolo]

Thanks for this answer ; I managed to get something to work using DataTemplateSelectors instead (based on types).
I think I couldn't get the DataTemplate to behave as I expected just using the custom controls inside of them ; it was displaying a version of ToString() instead of rendering the actual control.

What's bothering me with all the DataTemplate stuff is that from an Api perspective, I find it much more confusing than populating the collection as I would with StackLayout, for instance.

Like, for those layouts you can add anything that inherits from a ContentView and it'll be rendered as it should.

For CollectionViews however we need to deal with convoluted (to me) DataTemplates, which are really nice for prototyping in XAML, but as soon as you want to make the code more decoupled it soon becomes far less readable (to me, again).

I believe we just have to follow the Framework's design choices anyway, but a more intuitive Api would help.

[stephenquan]

I mocked up the following reusable SimpleDataTemplateSelector which works by requiring your view model having a key which matches a key in a ResourceDictionary:

// SimpleDataTemplateSelector.cs
public class SimpleDataTemplateSelector : DataTemplateSelector
{
    public string Key { get; set; } = string.Empty;
    public ResourceDictionary? ResourceDictionary { get; set; } = null;

    protected override DataTemplate? OnSelectTemplate(object item, BindableObject container)
    {
        Type itemType = item.GetType();
        IList<PropertyInfo> itemProperties = itemType.GetProperties();
        string? itemKey = item.ToString();
        if (!string.IsNullOrEmpty(Key)
            && itemProperties.FirstOrDefault(p => p.Name == Key) is PropertyInfo itemProperty
            && itemProperty.GetValue(item) is string itemPropertyValue)
        {
            itemKey = itemPropertyValue;
        }
        if (itemKey is null)
        {
            return null;
        }
        if (ResourceDictionary is null)
        {
            return null;
        }
        if (ResourceDictionary.TryGetValue(itemKey, out var dataTemplate))
        { 
            return dataTemplate as DataTemplate;
        }
        return null;
    }
}

Here's the XAML usage:

    <ContentPage.Resources>
        <ResourceDictionary x:Name="resourceDictionary">
            <toolkit:MultiMathExpressionConverter x:Key="MultiMathExpressionConverter" />
            <DataTemplate x:Key="LabelDataTemplate">
                <Label Text="Label" />
            </DataTemplate>
            <DataTemplate x:Key="ButtonDataTemplate">
                <Button Text="Button" />
            </DataTemplate>
            <DataTemplate x:Key="EntryDataTemplate">
                <Entry Placeholder="Entry" />
            </DataTemplate>
        </ResourceDictionary>
    </ContentPage.Resources>

    <CollectionView ItemTemplate="{local:SimpleDataTemplateSelector Key=WidgetType, ResourceDictionary={Reference resourceDictionary}}" ItemsSource="{Binding Widgets}">
        <!--    -->
    </CollectionView>

Where, in the above example, Widgets and WidgetType is defined as follows:

public class Widget
{
    public string WidgetType { get; set; } = string.Empty;
}

public ObservableCollection<Widget> Widgets { get; } = new ObservableCollection<Widget>()
{
    new Widget() { WidgetType = "LabelDataTemplate" },
    new Widget() { WidgetType = "ButtonDataTemplate" },
    new Widget() { WidgetType = "EntryDataTemplate" }
};

[bebenlebricolo]

I came up with something fairly similar indeed :

public class PaymentCardsDts : DataTemplateSelector
{
    public PaymentCardsDts ()
    {
        PaymentCardTemplate = new DataTemplate(typeof(LightPaymentModel));
        DateTemplate = new DataTemplate(typeof(DateSeparatorPaymentDisplayModel));
    }

    protected override DataTemplate OnSelectTemplate (object item, BindableObject container)
    {
        if (item is LightPaymentModel)
        {
            return PaymentCardTemplate;
        }
        return DateTemplate;
    }

    public DataTemplate PaymentCardTemplate {get; set;}
    public DataTemplate DateTemplate {get; set;}
}

In the PageViewModel :

 // Populate UI based on built models
var paymentCards = new List<BasePaymentDisplayModel>();
var year = DateTime.Now.Year;
foreach (var model in lightModels)
{
    if (model.PaymentDate.Year < year)
    {
        year = model.PaymentDate.Year;
        paymentCards.Add(new DateSeparatorPaymentDisplayModel{Text = year.ToString()});
    }
    paymentCards.Add(model);
}
PaymentCards = paymentCards;

The LightPaymentModel :

/// <summary>
/// Represents a simplified model (tied to UI) of the Payment items retrieved from server.
/// </summary>
public record LightPaymentModel : BasePaymentDisplayModel
{
    /// <summary>
    /// Source of background image for this card
    /// </summary>
    public required string BackgroundImage { get; set; }

    /// <summary>
    /// Displays the payment's date
    /// </summary>
    public string PaymentDateStr { get; set; } = "Jandredy 23 Fanvrier";

    /// <summary>
    /// Displays the payment amount
    /// </summary>
    public string Amount { get; set; } = "50€";

    // ...
}

and DateSeparatorPaymentDisplayModel

public record DateSeparatorPaymentDisplayModel : BasePaymentDisplayModel
{
    /// <summary>
    /// Basic date display
    /// </summary>
    public string Text { get; set; } = "";
}

And the page's XAML:

<ContentPage.Resources>
    <ResourceDictionary>
        <Color x:Key="VerticalBlue">#ff2e6298</Color>

        <DataTemplate x:Key="PaymentCardTemplate"
            x:DataType="models:LightPaymentModel">
            <Border StrokeShape="RoundRectangle 20"
                Stroke="Transparent"
                BackgroundColor="#88111111">
                <Grid RowDefinitions="auto,auto"
                    ColumnDefinitions="auto,*,250"
                    RowSpacing="5"
                    Padding="5">
                    <Image Grid.ColumnSpan="3"
                        Grid.RowSpan="2"
                        Source="{Binding BackgroundImage}"
                        Aspect="AspectFill"
                        Margin="-10" />
                    
                    <Border Grid.Row="1" Grid.Column="0"
                        BackgroundColor="#88111111"
                        Stroke="Transparent"
                        StrokeShape="RoundRectangle 40"
                        HeightRequest="40"
                        HorizontalOptions="Start">
                        <Label Text="{Binding Amount}"
                            TextColor="White"
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            Padding="10,0" />
                    </Border>
                    <Border Grid.Row="0" Grid.Column="2"
                        BackgroundColor="#88111111"
                        Stroke="Transparent"
                        StrokeShape="RoundRectangle 40"
                        HeightRequest="40"
                        HorizontalOptions="End">
                        <Label Text="{Binding PaymentDateStr}"
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            TextColor="White"
                            Padding="10,0" />
                    </Border>
                    
                </Grid>
            </Border>
        </DataTemplate>

        <DataTemplate x:Key="DateCardTemplate">
            <Grid x:DataType="models:DateSeparatorPaymentDisplayModel"
                ColumnDefinitions="*"
                ColumnSpacing="5"
                Padding="5,20">
                <Border BackgroundColor="{StaticResource VerticalBlue}"
                    HeightRequest="2"
                    Stroke="Transparent">
                </Border>
                <Border Grid.Column="0"
                    Stroke="Transparent"
                    StrokeShape="RoundRectangle 40"
                    BackgroundColor="{StaticResource VerticalBlue}"
                    VerticalOptions="Center"
                    HorizontalOptions="Center"
                    WidthRequest="70"
                    Padding="5,0">
                    <Label Text="{Binding Text}" TextColor="White"
                        HorizontalOptions="Center" />
                </Border>
            </Grid>
        </DataTemplate>

        <dts:PaymentCardsDts x:Key="CustomDataTemplateSelector"
            PaymentCardTemplate="{StaticResource PaymentCardTemplate}"
            DateTemplate="{StaticResource DateCardTemplate}" />

    </ResourceDictionary>
</ContentPage.Resources>

<ContentPage.Content>
    <CollectionView ItemsSource="{Binding PaymentCards}"
        ItemTemplate="{StaticResource CustomDataTemplateSelector}"
        SelectionMode="None">
        <CollectionView.ItemsLayout>
            <LinearItemsLayout Orientation="Vertical"
                ItemSpacing="5" />
        </CollectionView.ItemsLayout>
        <CollectionView.Header>
            <controls:PageHeaderControl Grid.Row="0"
                ItemsBackgroundColor="{StaticResource VerticalBlue}"
                CornerRadius="40"
                BorderColor="Transparent"
                Icon="payments_icon.svg"
                PageTitle="Paiements" />
        </CollectionView.Header>
    </CollectionView>
</ContentPage.Content>

I trimmed down a little bit the example but it now looks like this :

As I said, this feels very verbose and all packed whereas I would have loved to have separated independant controls with custom look that I could have referenced (like any other StackLayout).
Anyway, thanks for your time, it was a nice exercise trying out various things and I'm now feeling more confident using DataTemplateSelectors.

Still feel awkward, but that's how the framework is built.