如何为MAUI CollectionView的整个DataTemplate添加点击事件？

步骤1：给条目容器添加TapGestureRecognizer #

直接在你的HorizontalStackLayout上添加点击手势识别器，绑定命令并传递当前条目作为参数，修改后的XAML代码如下：

<CollectionView ItemsSource="{Binding Items}">
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="{x:Type dtos:ItemDto}">
            <HorizontalStackLayout>
                <!-- 添加点击手势识别器 -->
                <HorizontalStackLayout.GestureRecognizers>
                    <TapGestureRecognizer 
                        Command="{Binding Source={RelativeSource AncestorType={x:Type vm:YourViewModel}}, Path=NavigateToDetailCommand}"
                        CommandParameter="{Binding .}" />
                </HorizontalStackLayout.GestureRecognizers>
                
                <Image WidthRequest="75" HeightRequest="75" Source="item_default.png"></Image>
                <StackLayout Orientation="Vertical">
                    <Label Text="{Binding Name}" FontSize="Title" />
                    <Label Text="{Binding Description}" FontSize="Subtitle"/>
                </StackLayout>
            </HorizontalStackLayout>                
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

注意：将vm:YourViewModel替换为你实际的ViewModel命名空间和类名。

步骤2：在ViewModel中实现导航命令 #

利用CommunityToolkit MVVM的RelayCommand创建点击命令，处理跳转到详情页的逻辑：

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using Microsoft.Maui.Controls;
using System.Collections.ObjectModel;

namespace YourAppNamespace.ViewModels;

public partial class YourViewModel : ObservableObject
{
    // 假设你的Items集合已定义
    public ObservableCollection<ItemDto> Items { get; set; } = new();

    // 用RelayCommand声明导航命令
    [RelayCommand]
    private async Task NavigateToDetail(ItemDto item)
    {
        // 示例：Shell路由跳转，根据你的实际路由调整
        await Shell.Current.GoToAsync($"//DetailPage?ItemId={item.Id}");
        
        // 若使用CommunityToolkit.Maui的INavigationService（已注册），可替换为：
        // await _navigationService.NavigateToAsync<DetailViewModel>(new Dictionary<string, object>
        // {
        //     { nameof(DetailViewModel.SelectedItem), item }
        // });
    }
}

关键说明 #

• CommandParameter="{Binding .}"：将当前绑定的ItemDto对象作为参数传递给命令。
• RelativeSource：由于条目内部的DataContext是单个ItemDto，通过此方式绑定到父级ViewModel的命令。
• 详情页接收参数：若用Shell导航，可在详情页ViewModel通过[QueryProperty]属性接收；若用INavigationService，可通过构造函数或属性注入获取参数。

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