Xamarin.CommunityToolkit.MauiCompat TouchEffect 未应用于 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>