Xamarin.CommunityToolkit.MauiCompat TouchEffect is not applied to the first item of the CollectionView

Question

I am trying to port a Xamarin app to a Maui app. TouchEffect has not yet been ported from Xamarin Community Toolkit to Maui Community Toolkit, so I added Xamarin.CommunityToolkit.MauiCompat 2.0.2-preview1013.

The following code is a minimal example of the problem I am facing, not the full app. You can find the code on Github. The issue happened on both Android and Windows.

My issue is that the first item in the CollectionView seems to ignore the TouchEffect. In the screenshot below, both Product 2 and Product 3 behave as expected (Product 3 is being pressed). On the other hand, Product 1 does not have a blue background and does not show a red background when pressed.

Android:

Windows:

Please find the relevant code below.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             xmlns:viewmodels="clr-namespace:MauiAppTouchEffect.ViewModels;assembly=MauiAppTouchEffect"
             xmlns:models="clr-namespace:MauiAppTouchEffect.Models;assembly=MauiAppTouchEffect"
             x:Class="MauiAppTouchEffect.Views.ProductsPage"
             x:DataType="viewmodels:ProductsViewModel">
    <CollectionView ItemsSource="{Binding Products}">
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="models:Product">
                <Label Text="{Binding Description}"
                       FontSize="Large"
                       xct:TouchEffect.NormalBackgroundColor="Blue"
                       xct:TouchEffect.PressedBackgroundColor="Red" />
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

public class ProductsViewModel
{
    public ObservableCollection<Product> Products { get; } = new();

    public ProductsViewModel()
    {
        Products = Enumerable
            .Range(1, 3)
            .Select(x => new Product
            {
                Id = x,
                Description = $"Product {x}"
            })
            .ToObservableCollection();
    }
}

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();

        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            })
            .ConfigureMauiHandlers(options => options.AddCompatibilityRenderers(typeof(TouchEffect).Assembly))
            .ConfigureEffects(options =>
            {
                options.AddCompatibilityEffects(typeof(TouchEffect).Assembly);
                
#if ANDROID
                // https://github.com/xamarin/XamarinCommunityToolkit/issues/1905#issuecomment-1254311606
                options.Add(typeof(TouchEffect), typeof(Xamarin.CommunityToolkit.Android.Effects.PlatformTouchEffect));
#endif
            })
            .UseMauiCommunityToolkit()
            .UseMauiCompatibility();

        builder.Services.AddTransient(typeof(ProductsPage));
        builder.Services.AddTransient(typeof(ProductsViewModel));

#if DEBUG
        builder.Logging.AddDebug();
#endif

        return builder.Build();
    }
}

Answer 1

This reads to me like a bug in the Xamarin.CommunityToolkit.MauiCompat library. I encourage you to open an issue with them to investigate further.

I update the code and posted to github. (Included image in repo)

For some reason, adding the same attributes to the CollectionView and to the individual Label element applied the effects to all of the items.

    <CollectionView ItemsSource="{Binding Products}"
                       xct:TouchEffect.NormalBackgroundColor="Green"
                       xct:TouchEffect.PressedBackgroundColor="Red"
    >
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="models:Product">
                <Label Text="{Binding Description}"
                       FontSize="Large"
                       TextDecorations="Underline" 
                       xct:TouchEffect.NormalBackgroundColor="Green"
                       xct:TouchEffect.PressedBackgroundColor="Red"
                       />
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>