让ViewModel知道用户在使用MVVM的XAML中滚动到ListView的末尾

时间:2015-11-24 08:49:22

标签: xaml listview windows-phone-8.1 mvvm-light fetch

有一种简单的方法吗?互联网有一些示例,但不适用于MVVM Windows Phone 8.1运行时应用程序。

我的ListView最初有20个项目,当用户滚动到最后时,需要加载另外20个项目。但是如何让我的ViewModel知道ListView的结束?

2 个答案:

答案 0 :(得分:4)

如果您的案例在到达列表末尾时加载了更多项目以创建“延迟加载”,那么请查看ISupportIncrementalLoading界面。它是您在集合中实现的界面,ListView会在结束时自动使用它来加载更多项目。以下是一个示例:https://marcominerva.wordpress.com/2013/05/22/implementing-the-isupportincrementalloading-interface-in-a-window-store-app/

我个人不喜欢这种方法,拥有一个知道如何加载数据的集合。 Tareq Ateik创建的ExtendedListViewControlhttp://www.tareqateik.com/extendedlistview-control-for-universal-apps-pull-to-refresh-load-more-data-on-demand)在列表结束时触发了一个事件。因此,当事件被触发时,在ViewModel中处理它(如果您使用Caliburn.Micro,您可以直接“订阅”该事件),或使用消息传递向ViewModel发送消息。

或者只是在后面的代码中处理事件,并从代码隐藏中调用ViewModel上的所需方法。

答案 1 :(得分:1)

根据WinRT Xaml工具包中实现的帮助程序类,您可以获得对scrollBar控件内的垂直ListView的引用,然后附加一个事件处理程序它,为了帮助您检测何时到达ListView的底部,util知道将在您页面后面的代码中实现的所有内容,(它不会违反任何m​​vvm规则因为这是一个与视图相关的逻辑),一旦达到底部,我将使用Mvvm-light NotificationMessage类向页面的ViewModel发送Messenger,这里该怎么做在步骤中:

第1步

将以下助手类(来自Xaml工具包)添加到您的项目中,它有一些扩展方法,可以让您访问滚动条:

public static class VisualTreeHelperExtensions
{
    public static T GetFirstDescendantOfType<T>(this DependencyObject start) where T : DependencyObject
    {
        return start.GetDescendantsOfType<T>().FirstOrDefault();
    }

    public static IEnumerable<T> GetDescendantsOfType<T>(this DependencyObject start) where T : DependencyObject
    {
        return start.GetDescendants().OfType<T>();
    }

    public static IEnumerable<DependencyObject> GetDescendants(this DependencyObject start)
    {
        var queue = new Queue<DependencyObject>();
        var count = VisualTreeHelper.GetChildrenCount(start);

        for (int i = 0; i < count; i++)
        {
            var child = VisualTreeHelper.GetChild(start, i);
            yield return child;
            queue.Enqueue(child);
        }

        while (queue.Count > 0)
        {
            var parent = queue.Dequeue();
            var count2 = VisualTreeHelper.GetChildrenCount(parent);

            for (int i = 0; i < count2; i++)
            {
                var child = VisualTreeHelper.GetChild(parent, i);
                yield return child;
                queue.Enqueue(child);
            }
        }
    }

    public static T GetFirstAncestorOfType<T>(this DependencyObject start) where T : DependencyObject
    {
        return start.GetAncestorsOfType<T>().FirstOrDefault();
    }

    public static IEnumerable<T> GetAncestorsOfType<T>(this DependencyObject start) where T : DependencyObject
    {
        return start.GetAncestors().OfType<T>();
    }

    public static IEnumerable<DependencyObject> GetAncestors(this DependencyObject start)
    {
        var parent = VisualTreeHelper.GetParent(start);

        while (parent != null)
        {
            yield return parent;
            parent = VisualTreeHelper.GetParent(parent);
        }
    }

    public static bool IsInVisualTree(this DependencyObject dob)
    {
        return Window.Current.Content != null && dob.GetAncestors().Contains(Window.Current.Content);
    }

    public static Rect GetBoundingRect(this FrameworkElement dob, FrameworkElement relativeTo = null)
    {
        if (relativeTo == null)
        {
            relativeTo = Window.Current.Content as FrameworkElement;
        }

        if (relativeTo == null)
        {
            throw new InvalidOperationException("Element not in visual tree.");
        }

        if (dob == relativeTo)
            return new Rect(0, 0, relativeTo.ActualWidth, relativeTo.ActualHeight);

        var ancestors = dob.GetAncestors().ToArray();

        if (!ancestors.Contains(relativeTo))
        {
            throw new InvalidOperationException("Element not in visual tree.");
        }

        var pos =
            dob
                .TransformToVisual(relativeTo)
                .TransformPoint(new Point());
        var pos2 =
            dob
                .TransformToVisual(relativeTo)
                .TransformPoint(
                    new Point(
                        dob.ActualWidth,
                        dob.ActualHeight));

        return new Rect(pos, pos2);
    }
}

第2步

listView添加到您的xaml和Loaded事件处理程序

    DataContext="{Binding Main, Source={StaticResource Locator}}" Loaded="MainPage_OnLoaded">  
    <Grid>
        <ListView  ItemsSource="{Binding ItemsCollection}" x:Name="ListV"  VerticalAlignment="Center" Height="200" HorizontalAlignment="Center" >

        </ListView>
    </Grid>
</common:PageBase>

第3步

在您的页面代码后面添加所需的处理程序

    public MainPage()
    {
        InitializeComponent();
    }


    private void MainPage_OnLoaded(object sender, RoutedEventArgs e)
    {
        var scrollViewer = ListV.GetFirstDescendantOfType<ScrollViewer>();
        var scrollbars = scrollViewer.GetDescendantsOfType<ScrollBar>().ToList();
        var verticalBar = scrollbars.FirstOrDefault(x => x.Orientation == Orientation.Vertical);
        if (verticalBar != null)
            verticalBar.Scroll += BarScroll;
    }
    async void BarScroll(object sender, ScrollEventArgs e)
    {
        if (e.ScrollEventType != ScrollEventType.EndScroll) return;

        var bar = sender as ScrollBar;
        if (bar == null)
            return;

        System.Diagnostics.Debug.WriteLine("Scrolling ended");

        if (e.NewValue >= bar.Maximum)
        {
            System.Diagnostics.Debug.WriteLine("We are at the bottom");
            Messenger.Default.Send<NotificationMessage>(new NotificationMessage("LoadMore"));                
        }
        else
        {
            System.Diagnostics.Debug.WriteLine("We are away from the bottom");
        }
    }
}

在上面的代码通知中,一旦检测到底部,我将使用NotificationMessage类发送Messenger

 Messenger.Default.Send<NotificationMessage>(new NotificationMessage("LoadMore")); 

第4步

在页面的View模型中添加一旦收到通知消息就将新项目加载到ListView的代码

public class MainViewModel : ViewModelBase
{
    private ObservableCollection<String> _itemsCollection = new ObservableCollection<string>()
    {
        "Item 1",
        "Item 2",
        "Item 3",
        "Item 4"        
    };

    public ObservableCollection<String> ItemsCollection
    {
        get
        {
            return _itemsCollection;
        }

        set
        {
            if (_itemsCollection == value)
            {
                return;
            }

            _itemsCollection = value;
            RaisePropertyChanged();
        }
    }
    public async Task LoadMoreItems()
    {
        ItemsCollection.Add("Item " + ItemsCollection.Count);
        ItemsCollection.Add("Item " + ItemsCollection.Count);
        ItemsCollection.Add("Item " + ItemsCollection.Count);
        ItemsCollection.Add("Item " + ItemsCollection.Count);
        ItemsCollection.Add("Item " + ItemsCollection.Count);

    }
    public MainViewModel()
    {   
        Messenger.Default.Register<NotificationMessage>(this, async m =>
        {
            switch (m.Notification)
            {
                case "LoadMore":
                    await LoadMoreItems();
                    break;

            }
        });
    }  
}

如何检测底部的功劳归于以下article

<强>更新

确实正如评论中所提到的,上面的代码在WinRt商店应用程序上完美运行但由于某种原因它不能在Windows Phone(winrt 8.1)项目上工作,它看起来像scroll垂直ScrollBar中的事件由于某种原因而无法解雇,我有一个解决方法,而是处理ViewChangedScrollViewer的{​​{1}}事件,将页面背后的代码更改为以下内容:

ListView

并保持原样。