Xamarin.CommunityToolkit.MauiCompat TouchEffect 未应用于 CollectionView 的第一项

Question

我正在尝试将 Xamarin 应用程序移植到 Maui 应用程序。 TouchEffect 还没有从 Xamarin Community Toolkit 移植到 Maui Community Toolkit，所以我添加了Xamarin.CommunityToolkit.MauiCompat 2.0.2-preview1013 。

以下代码是我面临的问题的一个最小示例，而不是完整的应用程序。 您可以在Github上找到代码。 问题发生在 Android 和 Windows 上。

我的问题是CollectionView中的第一项似乎忽略了TouchEffect 。 在下面的屏幕截图中，产品 2和产品 3的行为都符合预期（按下产品 3 ）。 另一方面，产品 1没有蓝色背景，按下时也不会显示红色背景。

Android：

Windows：

请在下面找到相关代码。

<?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

这对我来说就像Xamarin.CommunityToolkit.MauiCompat库中的错误。 我鼓励您向他们提出问题以进一步调查。

我更新代码并发布到github 。 （回购中包含图像）

出于某种原因，将相同的属性添加到CollectionView和单个Label元素会将效果应用于所有项目。

    <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>