Xamarin 4.4中如何让CollectionView支持鼠标点击/滚轮滚动（MVVM模式）

好的，针对你在UWP平台上想要让Xamarin.Forms 4.4的CollectionView支持鼠标滚轮横向滚动和MVVM模式下的点击选择需求，我整理了具体的实现步骤：

1. 解决鼠标滚轮横向滚动问题 #

你的CollectionView是横向布局（GridItemsLayout(ItemsLayoutOrientation.Horizontal)），但UWP默认鼠标滚轮只会控制纵向滚动，所以需要通过自定义渲染器来将滚轮事件转换为横向滚动操作：

第一步：创建自定义CollectionView子类 #

在共享项目中定义一个继承自CollectionView的子类，方便后续绑定渲染器：

public class HorizontalScrollCollectionView : CollectionView
{
    // 无需额外代码，仅作为标记类使用
}

第二步：在UWP项目中实现自定义渲染器 #

在UWP项目里添加一个渲染器类，拦截滚轮事件并转换为横向滚动：

[assembly: ExportRenderer(typeof(HorizontalScrollCollectionView), typeof(HorizontalScrollCollectionViewRenderer))]
namespace YourAppNamespace.UWP.Renderers
{
    public class HorizontalScrollCollectionViewRenderer : CollectionViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<GroupableItemsView> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                // 找到UWP原生的ScrollViewer控件
                var scrollViewer = Control.FindDescendant<ScrollViewer>();
                if (scrollViewer != null)
                {
                    scrollViewer.PointerWheelChanged += ScrollViewer_PointerWheelChanged;
                }
            }
        }

        private void ScrollViewer_PointerWheelChanged(object sender, PointerRoutedEventArgs e)
        {
            var scrollViewer = sender as ScrollViewer;
            if (scrollViewer == null) return;

            // 将滚轮的纵向偏移量转换为横向滚动距离
            var pointerPoint = e.GetCurrentPoint(scrollViewer);
            scrollViewer.ChangeView(scrollViewer.HorizontalOffset - pointerPoint.Properties.MouseWheelDelta, null, null);
            e.Handled = true; // 标记事件已处理，避免默认纵向滚动
        }

        protected override void Dispose(bool disposing)
        {
            // 记得解绑事件，防止内存泄漏
            if (Control != null)
            {
                var scrollViewer = Control.FindDescendant<ScrollViewer>();
                if (scrollViewer != null)
                {
                    scrollViewer.PointerWheelChanged -= ScrollViewer_PointerWheelChanged;
                }
            }
            base.Dispose(disposing);
        }
    }
}

第三步：替换原有CollectionView实例 #

把你原来创建的CollectionView换成自定义的HorizontalScrollCollectionView：

HorizontalScrollCollectionView v = new HorizontalScrollCollectionView() 
{ 
    SelectionMode = SelectionMode.Single, 
    ItemsLayout = new GridItemsLayout(ItemsLayoutOrientation.Horizontal), 
    HeightRequest = 60, 
    HorizontalScrollBarVisibility = ScrollBarVisibility.Always, 
    VerticalScrollBarVisibility = ScrollBarVisibility.Never, 
    FlowDirection = FlowDirection.LeftToRight, 
};

2. MVVM模式下实现点击/选择功能 #

Xamarin.Forms的CollectionView支持直接绑定SelectedItem到ViewModel属性，完美适配MVVM模式，具体步骤如下：

第一步：在ViewModel中定义选中项属性与命令 #

假设你的ViewModel继承自INotifyPropertyChanged（这是MVVM模式的基础）：

public class YourViewModel : INotifyPropertyChanged
{
    private YourItemModel _selectedItem;
    // 绑定到CollectionView的SelectedItem属性
    public YourItemModel SelectedItem
    {
        get => _selectedItem;
        set
        {
            if (_selectedItem != value)
            {
                _selectedItem = value;
                OnPropertyChanged();
                // 选中后自动触发命令
                ItemSelectedCommand?.Execute(value);
            }
        }
    }

    // 处理选中逻辑的命令
    public ICommand ItemSelectedCommand { get; }

    public YourViewModel()
    {
        ItemSelectedCommand = new Command<YourItemModel>(HandleItemSelected);
    }

    private void HandleItemSelected(YourItemModel selectedItem)
    {
        if (selectedItem == null) return;
        // 在这里编写选中Item后的业务逻辑，比如显示详情、导航等
    }

    // INotifyPropertyChanged实现
    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

第二步：绑定CollectionView的SelectedItem到ViewModel #

在代码中设置CollectionView的BindingContext，并绑定SelectedItem属性：

// 假设你已经实例化了ViewModel
var viewModel = new YourViewModel();
v.BindingContext = viewModel;
// 绑定SelectedItem到ViewModel的对应属性
v.SetBinding(SelectableItemsView.SelectedItemProperty, nameof(YourViewModel.SelectedItem));

可选：通过TapGesture实现Item点击命令 #

如果你不想依赖SelectedItem，而是想直接响应Item的点击事件，可以给ItemTemplate中的控件添加TapGestureRecognizer并绑定命令：

// 示例：创建ItemTemplate并添加点击手势
v.ItemTemplate = new DataTemplate(() =>
{
    var itemLabel = new Label();
    itemLabel.SetBinding(Label.TextProperty, "YourItemTextProperty");

    var tapGesture = new TapGestureRecognizer();
    // 绑定到ViewModel的ItemTappedCommand
    tapGesture.SetBinding(TapGestureRecognizer.CommandProperty, new Binding("BindingContext.ItemTappedCommand", source: v));
    // 将当前Item作为命令参数传递
    tapGesture.CommandParameter = new Binding(".");
    itemLabel.GestureRecognizers.Add(tapGesture);

    return itemLabel;
});

然后在ViewModel中添加对应的命令：

public ICommand ItemTappedCommand { get; }

public YourViewModel()
{
    // ... 原有代码 ...
    ItemTappedCommand = new Command<YourItemModel>(HandleItemTapped);
}

private void HandleItemTapped(YourItemModel tappedItem)
{
    if (tappedItem == null) return;
    // 处理Item点击逻辑
}

注意事项 #

• 确保你的UWP项目已正确引用Xamarin.Forms 4.4的UWP包
• 自定义渲染器的命名空间要与共享项目中的HorizontalScrollCollectionView匹配
• MVVM模式下，务必保证BindingContext正确设置，且属性实现了INotifyPropertyChanged

内容的提问来源于stack exchange，提问作者Alexandre S.