Xamarin.Forms iOS中Image控件TapGestureRecognizer部分区域点击无效

问题现象 #

在Xamarin.Forms中将Image添加至StackLayout并绑定TapGestureRecognizer后，仅Image中间区域可正常响应点击，角落区域点击无效果。该问题仅出现在iOS设备上，Android端可正常工作。

相关代码 #

XAML代码 #

<Image x:Name="Image" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Aspect="AspectFit" IsVisible="False" />

C#代码 #

var tapGestureRecognizer = new TapGestureRecognizer
{
    Command = (ICommand)newvalue,
    CommandParameter = CommandParameter
};
Image.GestureRecognizers.Clear();
Image.GestureRecognizers.Add(tapGestureRecognizer);

解决方案 #

该问题源于iOS平台下，AspectFit模式的Image点击热区仅匹配实际图片内容尺寸，而非控件占据的布局区域。可通过以下两种方式解决：

• 方法一：用ContentView包裹Image
  将Image嵌套进ContentView，给ContentView绑定TapGestureRecognizer，让整个布局区域都能响应点击：

  <ContentView VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
      <Image x:Name="Image" Aspect="AspectFit" IsVisible="False" />
  </ContentView>
  

  对应C#代码中，将手势识别器添加到ContentView上即可。

• 方法二：自定义iOS渲染器
  自定义Image的iOS渲染器，重写HitTest方法，强制点击检测覆盖整个控件区域：

  [assembly: ExportRenderer(typeof(Image), typeof(CustomImageRenderer))]
  namespace YourAppNamespace.iOS.Renderers
  {
      public class CustomImageRenderer : ImageRenderer
      {
          protected override void OnElementChanged(ElementChangedEventArgs<Image> e)
          {
              base.OnElementChanged(e);
              if (Control != null)
              {
                  Control.UserInteractionEnabled = true;
              }
          }
  
          public override UIView HitTest(CGPoint point, UIEvent uievent)
          {
              var hitView = base.HitTest(point, uievent);
              return hitView ?? this;
          }
      }
  }
  

  注意将YourAppNamespace替换为你的项目实际命名空间，此方法适配所有Aspect模式的Image点击需求。

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