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)

[JoeVoo]

Try the TapGestureRecognizer at the collectionView.DataTemplate.

               TapGestureRecognizer tapGestureRecognizerSelection = new TapGestureRecognizer
               {
                   Command = new AsyncCommand<Vehicle>(async (clickedVehicle) =>
                   {
                       await SelectVehicleCommand.ExecuteAsync(clickedVehicle);
                   })
               }.Bind(TapGestureRecognizer.CommandParameterProperty, ".");

in c# markup you don't need to define converters. After changed all xaml pages to c#, i get rid of all that stuff.

[wesleykuhn]

That's awesome! But, what about creating a view/component using the Vehicle object itself? In the example you wrote it works only inside the gesture execution block. In my suggestion it applies to view/component creation.

[JoeVoo]

I don't know if i correctly understand your question. First of all, i propose to keep everything as simple as possible. I made programs, running 25 years now.
Second, i would never replace a BindingContext dynamically outside the constructor, like in your code. If you have changes, bind to the properties inside. If needed, use generic BindingContext or Interfaces. Have a look at compiled bindings and AOT coming.

In XAML, i first used the TemplateSelector to switch the content of a CollectionView when turning the device. But this seems to be useless for changing the complete page content. With c# markup, you have more power to control the ui. I decided to create pages where you can remove child views like boxes from container views like verticalCollection and rearrange them into other containerviews. You can also change the collectionView template on that reassembly.

[JoeVoo]

For contentViews/usercontrol, i prefer to define all properties as bindableProperty:

       public static readonly BindableProperty CommandProperty = BindableProperty.Create(
           nameof(Command),
           typeof(ICommand),
           typeof(ButtonWithTextControlCm),
           null, BindingMode.OneTime);

       public ICommand Command
       {
           get => (ICommand)GetValue(CommandProperty);
           set => SetValue(CommandProperty, value);
       }
        public static readonly BindableProperty CommandParameterProperty = BindableProperty.Create(
          nameof(CommandParameter),
          typeof(object),
          typeof(ButtonWithTextControlCm),
          null,
          BindingMode.OneWay);

       public object CommandParameter
       {
           get => GetValue(CommandParameterProperty);
           set => SetValue(CommandParameterProperty, value);
       }

then bind to the local bindables with source:this:

         public ButtonWithTextControlCm()
        {
            Button button = new Button
            {
                ImageSource = new FontImageSource
                {
                    Glyph = IconFont.Ring,
                    FontFamily = "Fa6",
                    Size = 20,
                }.Bind(FontImageSource.GlyphProperty, getter: static (ButtonWithTextControlCm me) => me.Glyph, source: this)
                .Bind(FontImageSource.ColorProperty, getter: static (ButtonWithTextControlCm me) => me.GlyphColor, source: this)

            }.Bind(Button.TextProperty, getter: static (ButtonWithTextControlCm me) => me.Text, source: this)
             .Bind(Button.TextColorProperty, getter: static (ButtonWithTextControlCm me) => me.TextColor, source: this)
             .Bind(Button.CommandProperty, getter: static (ButtonWithTextControlCm me) => me.Command, source: this)
             .Bind(Button.ContentLayoutProperty, getter: static (ButtonWithTextControlCm me) => me.ContentLayout, source: this)
             .Bind(Button.CommandParameterProperty, getter: static (ButtonWithTextControlCm me) => me.CommandParameter, source: this)
             .Invoke(button => button.Clicked += ButtonClicked);

            Content = button;
        }

use the control outside a collectionView

                  new Controls.Buttons.ButtonWithTextControlCm
               {
                   Text = Translation.assembly,
                   Glyph = IconFont.Plus,
                   CommandParameter="Whateveryouwant"
               }.Bind(Controls.Buttons.ButtonWithTextControlCm.CommandProperty,
                   getter: static (AssemblyDetailViewModel vm) => vm.AddSubCommand,
                   mode: BindingMode.OneTime,
                   source: BindingContext)
               .Bind(Controls.Buttons.ButtonWithTextControlCm.IsVisibleProperty,
                   getter: static (ViewModels.IBaseDetailViewModel vm) => vm.ItemId,
                   convert: (Guid? id) => id.IsNotEmpty(),
                   source: BindingContext)

or inside a collectionview with item as commandparameter

                              new Controls.Buttons.ButtonWithTextControlCm
                              {
                                  Text= Translation.link,
                                  Glyph = SymbolIcon.DefaultIconGlyph(typeof(Link)),
                              }
                              .Bind(Controls.Buttons.ButtonWithTextControlCm.CommandProperty,
                                  getter: static (LinksViewModel vm) => vm.LinkSelectCommand,
                                  source: BindingContext,
                                  mode: BindingMode.OneTime)
                              .Bind(Controls.Buttons.ButtonWithTextControlCm.CommandParameterProperty, 
                                  source: ".")   

[JoeVoo]

I don't know if this is the best way, but it works and is flexible.
Also, i read, the use of "source:" prevent compiling the binding because it is relative binding.
Information about that is rare. I really don't know if it is right and how to check.

Bindings of commands can be difficult, because using different types at the Controls command parameter and in the Command implementations parameter, does not fire any exception, but simply does not call the command method. There is also no binding failure shown like in XAML.