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>