如何在 ViewModel 中使用 MVVM Prism 和 ReactiveCommand 滚动到项目？答案

【问题标题】：How to scroll to an item using MVVM Prism and ReactiveCommand in ViewModel?如何在 ViewModel 中使用 MVVM Prism 和 ReactiveCommand 滚动到项目？
【发布时间】：2019-10-02 03:16:55
【问题描述】：

Xamarin Forms 4.0 最近发布了一个 CollectionView，让我们可以滚动到 collectionView 中的特定项目。

我有一个包含 10 个项目的集合视图，它没有填满屏幕。 (Microsoft Sample Picture)。我正在使用 ReactiveUI 和 MVVM Prism 来处理我在 ViewModel 中的所有逻辑。

到目前为止，我能够使用SelectedItem 和SelectionChangedCommand 处理基于点击的导航。我想要处理的下一个功能是滚动到我选择的项目。我搜索了论坛，但没有运气。该示例仅向您展示如何在不通过 MVVM Prism / ReactiveUI 的代码中执行此操作。提前致谢！

<CollectionView x:Name="ScrollButtons"
                ItemsSource="{Binding MenuItems}"
                SelectedItem="{Binding SelectedMenuItem}"
                Grid.Row="2" 
                Grid.Column="0"
                Grid.ColumnSpan="2" 
                HeightRequest="90"
                SelectionMode="Single"
                SelectionChangedCommand="{Binding MenuItemSelectedCommand}"
                BackgroundColor="{DynamicResource BackgroundColorShell}">

【问题讨论】：

抱歉，您想手动滚动到 SelectedItem 还是在 CollectionView 滚动到 SelectedItem 时处理？
@PhatHuynh 手动滚动到选定的项目。我的屏幕底部有一个包含 10 个菜单项的菜单栏，我单击第 7 或第 8 项，它导航到该页面，我希望能够滚动到使用 Prism / Reactive 命令单击的那个项目。
您需要在 ViewModel 上获取 CollectionView 然后使用 ScrollTo 方法。
@PhatHuynh 如何将 CollectionView 连接到 ViewModel？我只是绑定属性。我一直想知道这可能是最好的方法。我知道您可以在 Xamarin 表单中使用 x:Name=myCollectionView 并且可以在后面的代码中引用它。如何在视图模型中引用 collectionView。
您可以通过处理 View 上的 BindingContextChanged 将其传递给 ViewModel。

标签： c# xamarin.forms prism reactiveui xamarin-forms-4

【解决方案1】：

我将向您展示如何将 CollectionView 传递给 ViewModel。
首先，定义2个接口，如

public interface IHasCollectionViewModel{
  IHasCollectionView View {get;set;}
}
public interface IHasCollectionView{
  CollectionView CollectionView {get;}
}

接下来，在您的 View 上实现 IHasCollection

public class YourView: ContentPage, IHasCollectionView {
   CollectionView CollectionView => ScrollButtons; // your CollectionView x:Name
   protected override void OnBindingContextChanged()
   {
            if (this.BindingContext is IHasCollectionViewModel hasCollectionViewModel)
            {
                hasCollectionViewModel.View = this;
            }
            base.OnBindingContextChanged();
   }
}

接下来，在您的 ViewModel 上实现 IHasCollectionViewModel

public class YourViewModel: IHasCollectionViewModel {
       public IHasCollectionView View { get; set; }
       // use CollectionView like
       private void ScrollToItem(int index){
             View.CollectionView.ScrollTo(index); // don't forget check null
       }
}

希望这会有所帮助。

【讨论】：