.NET MAUI CollectionView中TapGesture Command失效问题排查

布局代码 #

<CollectionView ItemsSource="{Binding Days}" SelectedItem="{Binding SelectedDay}">
    <CollectionView.ItemsLayout>
        <GridItemsLayout 
               Orientation="Vertical"
                VerticalItemSpacing="5"
                Span="7" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="viewModels:CalendarEntries">
            <Grid>
                <Label 
                    Text="{Binding Day}" Padding="0"
                    TextColor="{StaticResource Primary}"
                    HorizontalTextAlignment="Center"
                    VerticalTextAlignment="Center"
                    FontSize="17"
                    FontFamily="MagistralC"/>
                <customControls:CircularProgressBar
                   Progress="{Binding Progress}"
                   ProgressColor="{StaticResource Primary}"
                   ProgressLeftColor="LightGray"
                   Size="40"
                   TextColor="{StaticResource Primary}"
                   Thickness="4">
                    <customControls:CircularProgressBar.Triggers>
                        <DataTrigger
                            TargetType="customControls:CircularProgressBar"
                            Binding="{Binding Progress}"
                            Value="0">
                            <Setter 
                                 Property="IsVisible" Value="false"/>
                        </DataTrigger>
                    </customControls:CircularProgressBar.Triggers>
                </customControls:CircularProgressBar>
                <Grid.GestureRecognizers>
                    <TapGestureRecognizer 
                        Command="{Binding ShowProgressDetailsCommand , Source={RelativeSource AncestorType={x:Type viewModels:StatisticsViewModel}}}"
                        CommandParameter="{Binding .}">
                        
                    </TapGestureRecognizer>
                </Grid.GestureRecognizers>
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

问题描述 #

遵循MVVM模式，ViewModel中的ShowProgressDetailsCommand在其他视图可正常触发，但在CollectionView的Grid上添加的TapGesture仅在点击Label和CircularProgressBar之外的空白像素区域时才会命中ViewModel断点。

原因分析 #

Label和自定义控件CircularProgressBar默认会拦截点击事件——即使没有绑定自身的点击命令，这类可视控件也会消费输入事件。当点击这些控件覆盖的区域时，事件会被子控件直接处理，不会向上传递到父容器Grid的TapGestureRecognizer；只有点击Grid中未被子控件覆盖的空白区域时，手势识别器才能捕获到点击事件。

解决方案 #

方法一：让子控件透传点击事件 #

给Label和CircularProgressBar添加InputTransparent="True"属性，使它们忽略所有输入事件，点击事件会直接透传到父Grid的手势识别器：

<Label 
    Text="{Binding Day}" Padding="0"
    TextColor="{StaticResource Primary}"
    HorizontalTextAlignment="Center"
    VerticalTextAlignment="Center"
    FontSize="17"
    FontFamily="MagistralC"
    InputTransparent="True"/>

<customControls:CircularProgressBar
    Progress="{Binding Progress}"
    ProgressColor="{StaticResource Primary}"
    ProgressLeftColor="LightGray"
    Size="40"
    TextColor="{StaticResource Primary}"
    Thickness="4"
    InputTransparent="True">
    <!-- 触发器代码保持不变 -->
</customControls:CircularProgressBar>

方法二：给每个子控件绑定相同命令 #

如果需要保留子控件的交互性（比如Label需要支持长按操作），可以给Label和CircularProgressBar各自添加TapGestureRecognizer，绑定同一个父ViewModel的命令：

<Label>
    <Label.GestureRecognizers>
        <TapGestureRecognizer 
            Command="{Binding ShowProgressDetailsCommand , Source={RelativeSource AncestorType={x:Type viewModels:StatisticsViewModel}}}"
            CommandParameter="{Binding .}"/>
    </Label.GestureRecognizers>
</Label>

<customControls:CircularProgressBar>
    <customControls:CircularProgressBar.GestureRecognizers>
        <TapGestureRecognizer 
            Command="{Binding ShowProgressDetailsCommand , Source={RelativeSource AncestorType={x:Type viewModels:StatisticsViewModel}}}"
            CommandParameter="{Binding .}"/>
    </customControls:CircularProgressBar.GestureRecognizers>
    <!-- 触发器代码保持不变 -->
</customControls:CircularProgressBar>

方法三：确保Grid占满Item布局空间 #

检查Grid是否设置了填充布局的属性，添加HorizontalOptions="Fill"和VerticalOptions="Fill"让Grid占满CollectionViewItem的整个空间，避免空白区域过小：

<Grid HorizontalOptions="Fill" VerticalOptions="Fill">
    <!-- 子控件代码保持不变 -->
</Grid>

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