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

Question

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}">

Answer 1

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

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
       }
}

希望对您有所帮助。

Answer 2

将项目滚动到视图中时，可以使用 ScrollTo 方法的位置参数指定滚动完成后项目的确切位置。此参数接受 ScrollToPosition 枚举成员。

CollectionView 定义由可绑定属性支持的属性

Control scroll position - Microsoft Docs

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

How to scroll to an item using MVVM Prism and ReactiveCommand in ViewModel?

c#

xamarin.forms

prism

reactiveui

xamarin-forms-4