如何在 .NET MAUI 8 中为集合视图项目添加点按手势？

Android

2024-03-20 03:40:43

在 .NET MAUI 8 中为集合视图项目添加点按手势：全面指南

引言

随着越来越多的开发者转向 .NET MAUI 8，为集合视图项目添加点按手势的需求也越来越迫切。然而，该过程比在 Xamarin 中要复杂一些，本文将深入探讨解决这一问题的步骤。

解决方案步骤

要为 .NET MAUI 8 中的集合视图项目添加点按手势，请遵循以下步骤：

分配 x:Name 到集合视图： 给集合视图分配一个唯一的 x:Name，以便在代码中引用它。
添加点按手势： 在数据模板中的 StackLayout 中添加一个 TapGestureRecognizer，并将其 Command 属性绑定到集合视图的 ItemSelectedCommand。
定义命令： 在视图模型中定义一个带 CommandParameter 的命令，用于处理点按事件。
绑定集合视图： 确保集合视图与视图模型绑定，以便命令可以访问视图模型中的方法。

注意事项

点按手势位置： 确保将点按手势添加到 StackLayout 中，而不是添加到 CardView 中。
命令绑定： 使用 x:Reference 语法将点按手势的 Command 属性绑定到集合视图。
CommandParameter： 为命令定义一个 CommandParameter，以传递相关数据。
集合视图绑定： 通过 BindingContext 属性将集合视图绑定到视图模型。

代码示例

XAML（集合视图）：

<CollectionView x:Name="collectionView" ItemsSource="{Binding Items}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <StackLayout>
                <StackLayout.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding Source={x:Reference collectionView}, Path= BindingContext.ItemSelectedCommand}" CommandParameter="{Binding .}"/>
                </StackLayout.GestureRecognizers>
                <CardView Title="{Binding Name}" Description="{Binding Description}" Image="{Binding Image}" Disabled="{Binding Disabled}"/>
            </StackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

C#（视图模型）：

public class CaseDetailsViewModel
{
    public ICommand ItemSelectedCommand { get; }

    public CaseDetailsViewModel()
    {
        ItemSelectedCommand = new RelayCommand(ItemSelected);
    }

    private async void ItemSelected(object item)
    {
        await OnItemSelected((CaseCardItemModel)item);
    }
}