Xamarin.CommunityToolkit.MauiCompat的TouchEffect未作用于CollectionView首项

问题场景 #

在将Xamarin应用迁移至MAUI时，由于MAUI Community Toolkit尚未移植TouchEffect能力，引入了Xamarin.CommunityToolkit.MauiCompat 2.0.2-preview1013包适配。但在Android和Windows平台上出现异常：CollectionView的第一个Item完全忽略TouchEffect配置——既不显示正常状态的蓝色背景，按压时也无红色反馈，而后续的Item（如Product 2、Product 3）表现完全正常。

解决方案 #

1. 调整MAUI兼容性初始化顺序 #

MauiProgram中，需将UseMauiCompatibility()的调用移至兼容Effect注册逻辑之前，确保MAUI兼容性环境先完成初始化，才能正确加载Xamarin的兼容Effect。修改后的代码如下：

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");
            })
            .UseMauiCompatibility() // 前置兼容性初始化
            .ConfigureMauiHandlers(options => options.AddCompatibilityRenderers(typeof(TouchEffect).Assembly))
            .ConfigureEffects(options =>
            {
                options.AddCompatibilityEffects(typeof(TouchEffect).Assembly);
                
#if ANDROID
                options.Add(typeof(TouchEffect), typeof(Xamarin.CommunityToolkit.Android.Effects.PlatformTouchEffect));
#endif
            })
            .UseMauiCommunityToolkit();

        builder.Services.AddTransient<ProductsPage>();
        builder.Services.AddTransient<ProductsViewModel>();

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

        return builder.Build();
    }
}

2. 为ItemTemplate添加外层布局容器 #

CollectionView的虚拟化机制可能导致首个Item的Effect绑定优先级异常，给Label包裹一层Grid/Frame等布局容器，将TouchEffect应用到外层容器上，确保Effect稳定附着：

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

3. 升级兼容包版本 #

Xamarin.CommunityToolkit.MauiCompat的早期预览版本存在CollectionView相关的Effect绑定bug，尝试升级至最新预览版，部分已知问题已在后续版本中修复。

原理说明 #

• MAUI兼容性初始化顺序错误会导致Xamarin Effect无法正确附着到首个可视化元素；
• Label作为CollectionView的直接Item时，可能因虚拟化复用逻辑，首个Item的Effect未被正确初始化，外层布局容器能提供更稳定的Effect绑定载体。

内容的提问来源于stack exchange，提问作者Arthur Rey