如何检测Xamarin Forms ListView空白区域的点击事件

我之前也踩过这个坑！直接给ListView或者页面加TapGestureRecognizer确实不会生效，因为ListView内部的滚动容器会优先拦截触摸事件，空白区域的点击根本传不到你加的手势识别器上。这里有两个实用的解决方案，你可以根据需求选：

方案一：给ListView添加透明Footer（简单无原生代码） #

这是最快捷的方法，我们给ListView加一个占满剩余空白区域的透明ContentView作为Footer，然后给这个Footer加点击手势：

修改你的XAML代码，在ListView标签内添加Footer部分：

<ListView x:Name="ItemsListView" 
          ItemsSource="{Binding Items}" 
          VerticalOptions="FillAndExpand" 
          HasUnevenRows="true" 
          RefreshCommand="{Binding LoadItemsCommand}" 
          IsPullToRefreshEnabled="true" 
          IsRefreshing="{Binding IsBusy, Mode=OneWay}" 
          CachingStrategy="RecycleElement" 
          ItemSelected="OnItemSelected">
    <!-- 原有的d:ListView.ItemsSource和ItemTemplate保持不变 -->
    
    <!-- 添加下面的Footer部分 -->
    <ListView.Footer>
        <ContentView VerticalOptions="FillAndExpand" BackgroundColor="Transparent">
            <ContentView.GestureRecognizers>
                <TapGestureRecognizer Tapped="OnEmptyAreaTapped" NumberOfTapsRequired="1" />
            </ContentView.GestureRecognizers>
        </ContentView>
    </ListView.Footer>
    
    <!-- 原有的ListView.GestureRecognizers可以去掉了，因为不会生效 -->
</ListView>

然后在后台代码里实现点击事件：

private void OnEmptyAreaTapped(object sender, EventArgs e)
{
    // 这里调用你需要执行的方法
    Console.WriteLine("ListView空白区域被点击啦！");
}

这个方案的原理是：Footer会自动填充ListView中Item未覆盖的空白区域，点击空白区域其实是点击了这个透明的Footer，从而触发我们的事件。

方案二：自定义ListView渲染器（原生层处理，更灵活） #

如果你需要更精确的控制（比如区分点击是在空白区域还是滚动时的误触），可以通过自定义渲染器在原生层面监听点击事件：

第一步：创建自定义ListView类 #

在共享项目里新建一个类：

public class CustomListView : ListView
{
    // 定义空白区域点击的事件
    public event EventHandler EmptyAreaTapped;

    // 供渲染器调用的触发方法
    public void RaiseEmptyAreaTapped()
    {
        EmptyAreaTapped?.Invoke(this, EventArgs.Empty);
    }
}

第二步：实现Android渲染器 #

在Android项目里添加渲染器：

[assembly: ExportRenderer(typeof(CustomListView), typeof(CustomListViewRenderer))]
namespace YourAppName.Droid.Renderers
{
    public class CustomListViewRenderer : ListViewRenderer
    {
        public CustomListViewRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.ListView> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                // 设置触摸监听器
                Control.SetOnTouchListener(new ListViewTouchListener((CustomListView)Element));
            }
        }

        private class ListViewTouchListener : Java.Lang.Object, Android.Views.View.IOnTouchListener
        {
            private readonly CustomListView _customListView;

            public ListViewTouchListener(CustomListView customListView)
            {
                _customListView = customListView;
            }

            public bool OnTouch(Android.Views.View v, MotionEvent e)
            {
                if (e.Action == MotionEventActions.Down)
                {
                    var androidListView = (Android.Widget.ListView)v;
                    // 获取点击位置对应的Item索引
                    int position = androidListView.PointToPosition((int)e.GetX(), (int)e.GetY());
                    // 如果索引无效，说明点击的是空白区域
                    if (position == Android.Widget.AdapterView.InvalidPosition)
                    {
                        _customListView.RaiseEmptyAreaTapped();
                    }
                }
                // 返回false，让ListView继续处理滚动等其他触摸事件
                return false;
            }
        }
    }
}

第三步：实现iOS渲染器 #

在iOS项目里添加渲染器：

[assembly: ExportRenderer(typeof(CustomListView), typeof(CustomListViewRenderer))]
namespace YourAppName.iOS.Renderers
{
    public class CustomListViewRenderer : ListViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.ListView> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                Control.UserInteractionEnabled = true;
            }
        }

        public override void TouchesBegan(NSSet touches, UIEvent evt)
        {
            base.TouchesBegan(touches, evt);

            var touch = touches.AnyObject as UITouch;
            if (touch != null)
            {
                var touchPoint = touch.LocationInView(Control);
                // 获取点击位置对应的Item索引路径
                var indexPath = Control.IndexPathForRowAtPoint(touchPoint);
                // 如果索引路径为空，说明点击的是空白区域
                if (indexPath == null)
                {
                    ((CustomListView)Element).RaiseEmptyAreaTapped();
                }
            }
        }
    }
}

第四步：使用自定义ListView #

在XAML里替换原来的ListView为自定义的CustomListView，并绑定事件：

<local:CustomListView x:Name="ItemsListView" 
                      ItemsSource="{Binding Items}" 
                      VerticalOptions="FillAndExpand" 
                      HasUnevenRows="true" 
                      RefreshCommand="{Binding LoadItemsCommand}" 
                      IsPullToRefreshEnabled="true" 
                      IsRefreshing="{Binding IsBusy, Mode=OneWay}" 
                      CachingStrategy="RecycleElement" 
                      ItemSelected="OnItemSelected"
                      EmptyAreaTapped="OnEmptyAreaTapped">
    <!-- 原有的内容保持不变 -->
</local:CustomListView>

后台的OnEmptyAreaTapped方法和方案一一样，按需实现即可。

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