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();
    }
}

This one is a bit tough to debug without the complete project. If you'd like to post the complete *building* project to (github)[https://github.com/] I could take a precise look. I hypothesize it has something to do with you calling `Enumerable.Range(1, 3)` — dalekman1234, Dec 29 '22 at 22:51
@dalekman1234 I've replaced it with `ProductSummaries = new[] { new ProductSummary { }, ... }.ToObservableCollection()` and I ran into the same issue. I've also tried to use a *ListView* instead of a *CollectionView*, same issue. I've edited my post to include the [Github](https://github.com/Artyfice/MauiAppTouchEffect.git) link. — Arthur Rey, Dec 30 '22 at 12:49

dalekman1234 · Accepted Answer · 2022-12-30T15:59:25.417

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>

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

1 Answers1