.NET MAUI中Collection View点击事件失效问题（含Frame场景）

问题原因 #

Frame控件默认会拦截输入事件，导致其所在的CollectionView单元格无法接收到点击信号，移除Frame后事件恢复正常。

解决方法 #

方法一：让Frame透传输入事件 #

给Frame添加InputTransparent="True"属性，这样Frame不会拦截点击事件，底层的CollectionView单元格可以正常响应点击：

<Border Padding="10,0,10,0" Margin="3,3,3,3" StrokeShape="RoundRectangle 5,5,5,5" BackgroundColor="White">
    <Grid RowSpacing="5">
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
      </Grid.RowDefinitions>
      <!-- 添加InputTransparent="True" -->
      <Frame Grid.Row="0" HeightRequest="200" WidthRequest="250" CornerRadius="0" Padding="0" IsClippedToBounds="True" InputTransparent="True">
        <Image Source="{Binding FullImageUrl}" Aspect="Fill"/>
      </Frame>
      <Label Grid.Row="1" FontSize="Subtitle" Text="{Binding Name}" Padding="15,0"/>
      <Label Grid.Row="2" FontSize="Small" Text="{Binding Address}" WidthRequest="250" Padding="15,0" LineBreakMode="TailTruncation"/>
      <Label Grid.Row="3" FontSize="Subtitle" TextColor="#1d94ab" Padding="15, 0" Text="{Binding Price}"/>
    </Grid>
  </Border>

方法二：给Frame绑定点击事件转发逻辑 #

如果需要Frame保留交互能力（比如自身需要处理手势），可以给Frame添加TapGestureRecognizer，将点击事件转发到CollectionView的选中命令：

<Border Padding="10,0,10,0" Margin="3,3,3,3" StrokeShape="RoundRectangle 5,5,5,5" BackgroundColor="White">
    <Grid RowSpacing="5">
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
      </Grid.RowDefinitions>
      <Frame Grid.Row="0" HeightRequest="200" WidthRequest="250" CornerRadius="0" Padding="0" IsClippedToBounds="True">
          <!-- 添加手势识别器转发点击 -->
          <Frame.GestureRecognizers>
              <TapGestureRecognizer 
                  Command="{Binding Source={RelativeSource AncestorType={x:Type CollectionView}}, Path=SelectedItemCommand}"
                  CommandParameter="{Binding}"/>
          </Frame.GestureRecognizers>
          <Image Source="{Binding FullImageUrl}" Aspect="Fill"/>
      </Frame>
      <Label Grid.Row="1" FontSize="Subtitle" Text="{Binding Name}" Padding="15,0"/>
      <Label Grid.Row="2" FontSize="Small" Text="{Binding Address}" WidthRequest="250" Padding="15,0" LineBreakMode="TailTruncation"/>
      <Label Grid.Row="3" FontSize="Subtitle" TextColor="#1d94ab" Padding="15, 0" Text="{Binding Price}"/>
    </Grid>
  </Border>

额外说明 #

如果你的需求只是实现图片区域的圆角，也可以直接给Image设置CornerRadius（.NET MAUI 5+支持），无需嵌套Frame，这样也能避免事件拦截问题：

<Image Source="{Binding FullImageUrl}" Aspect="Fill" CornerRadius="0" HeightRequest="200" WidthRequest="250"/>

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