Access individual item template binding context during composition

[wesleykuhn]

Currently when working with CollectionView, I do something like this for my templates:
new CollectionView().ItemTemplate(new DataTemplate(() => new VerticalStackLayout() ... ))

However, when I need to send the clicked item as argument I need to do it via Command:

new CollectionView()
{
    SelectionChangedCommand = new Command(async () => await OnItemTappedAsync())
}

Another problem is when having to render/compose different according to the bindingContext. E.g.: BackgroundColor, text formatting, which style to use, etc. For that, right now we have the template selector, which in my opnion is kindda uncomfortable to use.
The binding way is perfect, but, when I need something more complex I need to use the converter, and that's another problem: Converters everywhere on the app.

Wouldn't be great if we can access the binding context of the dataTemplate inside a composition method? Something like the below example:

// This class will be used inside the DataTemplate, just to be the intermediate of that logic.
public class ComposableItemTemplate<ContextItemType> : ContentView
{
    private readonly Action<ContentView, ContextItemType> _compositionAction;

    public ComposableItemTemplate(Action<ContentView, ContextItemType> compositionAction)
    {
        this.BindingContextChanged += BaseItemTemplate_BindingContextChanged;

        _compositionAction = compositionAction;
    }

    private void BaseItemTemplate_BindingContextChanged(object? sender, EventArgs e)
    {
        if (sender is not ContentView contentView || contentView.BindingContext is not ContextItemType contextItem) return;

        if (MainThread.IsMainThread)
            _compositionAction(this, contextItem);
        else
            MainThread.BeginInvokeOnMainThread(() => _compositionAction(this, contextItem));
    }
}

And on the page/component file it can be called something like this:

// Setting the ItemTemplate for my CollectionView
new CollectionView()
    .ItemTemplate(new DataTemplate(() => new ComposableItemTemplate<MyListItemModel>(ComposeItemTemplate)));

// And then the method which will compose my list item view/element
void ComposeItemTemplate(ContentView contentView, MyListItemModel item)
{
    contentView.Content = item.Name is null
        ? new VerticalStackLayout().BackgroundColor(Colors.Red)
        : new VerticalStackLayout
            {
                new Label().Text(item.Name)
            }.TapGesture(() => OnItemTapped(item)) // Or OnItemTapped(contentView.BindingContext as MyListItemModel) ... IDK which is better
}

I think there's a lot of thing we can do with the BindingContext on our hands.
My code might be not that great, but the concept is already used on Android's Jetpack Compose and it's great for us devs.

Edit 2024/11/19

I did some refactors on the code that I wrote...
Item template content itself:

public class ContextualItemTemplate<ContextItemType> : ContentView
{
    private readonly Func<ContextItemType, View> _creationFunction;
    public ContextualItemTemplate(Func<ContextItemType, View> creationFunction)
    {
        _creationFunction = creationFunction ?? throw new ArgumentNullException(nameof(creationFunction));
        BindingContextChanged += OnCreate;
    }

    private void OnCreate(object? sender, EventArgs e)
    {
        if (BindingContext is not ContextItemType context) return;
        Content = _creationFunction(context);
    }
}

Data template:

public class ContextualDataTemplate<ContextItemType>(Func<ContextItemType, View> loadTemplateFunction) : DataTemplate(() => LoadContextualTemplate(loadTemplateFunction))
{
    private static ContextualItemTemplate<ContextItemType> LoadContextualTemplate(Func<ContextItemType, View> loadTemplateFunction)
    {
        ArgumentNullException.ThrowIfNull(loadTemplateFunction);

        return new ContextualItemTemplate<ContextItemType>(loadTemplateFunction);
    }
}

Usage:

internal static class UserListItemTemplate
{
    internal static ContextualDataTemplate<UserModel> Get => new(Create);

    private static Grid Create(UserModel user) =>
        new()
        {
                ...
        };
}

And, at the page:

new CollectionView().ItemTemplate(UserListItemTemplate.Get)