Xamarin Forms/.NET MAUI中Button与TouchEffect命令独立触发问题

问题场景 #

我有一个包含多个项的CollectionView，所有项使用相同的DataTemplate，模板由带TouchEffect命令的StackLayout和内部的Button组成。点击Button时，会触发StackLayout的命令而非Button自身的命令，因为父布局的触摸事件优先级更高。需求是：点击Button外部区域触发StackLayout的命令，点击Button时仅触发Button自身的命令。

原代码如下：

<CollectionView ItemSizingStrategy="MeasureFirstItem"
                ItemsSource="{Binding SaveItems}"
                SelectionMode="None">
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="listItems:MyItemVM">
            <StackLayout TouchEffect.Command="{Binding SelectedItemCommand}"
                         TouchEffect.CommandParameter="{Binding .}">
                <Button Command="{Binding OnCreateCommand}" CommandParameter="{Binding .}" />
            </StackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

已尝试的无效方案 #

• 设置InputTransparent、CascadeInputTransparent属性：仅能触发其中一个命令，无法实现区分点击区域的需求
• 设置TouchEffect.ShouldMakeChildrenInputTransparent：未达到预期效果
• 曾考虑通过Skia渲染器检测触摸位置或原生代码拦截事件，但希望用纯XAML方案解决

临时解决方案（性能不佳） #

通过Grid的内容叠加特性实现命令区分，但该方案存在性能问题，仅作为临时 workaround：

<StackLayout>
  <Grid>
    <Grid TouchEffect.Command="{Binding SelectedItemCommand}"
          TouchEffect.CommandParameter="{Binding .}" /> 
    <Grid>
         <Button Command="{Binding OnCreateCommand}" CommandParameter="{Binding .}" />
    </Grid>
  </Grid>
</StackLayout>

最优XAML解决方案 #

利用CommunityToolkit.Maui中TouchEffect的SuppressParentGestures属性，直接给Button设置该属性为True，即可阻止Button的触摸事件向上冒泡到父布局的TouchEffect，从而实现各自命令的独立触发：

<CollectionView ItemSizingStrategy="MeasureFirstItem"
                ItemsSource="{Binding SaveItems}"
                SelectionMode="None">
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="listItems:MyItemVM">
            <StackLayout TouchEffect.Command="{Binding SelectedItemCommand}"
                         TouchEffect.CommandParameter="{Binding .}">
                <Button Command="{Binding OnCreateCommand}" 
                        CommandParameter="{Binding .}"
                        TouchEffect.SuppressParentGestures="True" />
            </StackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

该方案无需额外布局嵌套，性能更优，完全通过XAML属性配置实现需求。

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