UWP: ListView 中与滚动有关的两个需求的实现

在 App 的开发过程中,ListView 控件是比较常用的控件之一。掌握它的用法,能帮助我们在一定程度上提高开发效率。本文将会介绍 ListView 的一种用法——获取并设置 ListView 的滚动位置,以及获取滚动位置处的项目。这里多说一句,由于这个描述有点,所以本文的标题实在不好起。

举个例子,如果你正在开发的应用有这样一个需求,当用户从一个列表页(包括 ListView 控件)返回到前一页面时,你需要得到用户在浏览 ListView 中的内容到哪个位置以及哪一项了,以便告诉用户最近浏览项,并且可以让用户再次打开列表时,直接从上次浏览的位置处继续浏览。如下图:

本文介绍了实现上述需求的方法。具体来说,这个需求可细分为两个小需求,即:

  1. 获取、设置 ListView 的滚动位置;
  2. 获取 ListView 滚动位置处的项目。

以下我会通过上面配图中的 Demo 应用逐一说明(本文末尾有源码下载链接),这个 Demo 包括两个页面,一个主页 (MainPage),一个列表页 (ItemsPage)。主页中包括:

  • 按钮:可以导航到 ItemsPage;
  • 最近浏览信息区域:可以查看上次浏览的项目,并提供一个按钮可以导航到列表页中上次浏览的项目处;

而列表页,则包括一个 ListView 控件,展示若干个项目。

一、获取、设置 ListView 的滚动位置

关于获取、设置 ListView 的滚动位置,微软已经提供了相关的例子,我在这个 Demo 中是直接套用的。这个功能主要是通过 ListViewPersistenceHelper 来实现的,它提供以下两个方法:

       // 获取 ListView 的滚动位置
       public static string GetRelativeScrollPosition(ListViewBase listViewBase, ListViewItemToKeyHandler itemToKeyHandler)
       // 设置 ListView 的滚动位置
       public static IAsyncAction SetRelativeScrollPositionAsync(ListViewBase listViewBase, String relativeScrollPosition, ListViewKeyToItemHandler keyToItemHandler)

这两个方法中各有一个参考是委托类型,分别是 ListViewItemToKeyHandlerListViewKeyToItemHandler,它们的作用是告诉这个类如何处理列表项与 Key 的对应关系,好使得该类可以正确地获取或设置滚动位置。这里的 Key 是 ListViewItem 所代表的项目的一个属性(比如 Demo 中 Item 类的 Id 属性),这个属性的值在整个列表中是唯一的;而 Item 是在 Item 对象本身。在 Demo 中它们的实现分别如下:

        private string ItemToKeyHandler(object item)
        {
            Item dataItem = item as Item;
            if (dataItem == null) return null;

            return dataItem.Id.ToString();
        }

        private IAsyncOperation<object> KeyToItemHandler(string key)
        {
            Func<System.Threading.CancellationToken, Task<object>> taskProvider = token =>
            {
                var items = listView.ItemsSource as List<Item>;
                if (items != null)
                {
                    var targetItem = items.FirstOrDefault(m => m.Id == int.Parse(key));
                    return Task.FromResult((object)targetItem);
                }
                else
                {
                    return Task.FromResult((object)null);
                }
            };
            return AsyncInfo.Run(taskProvider);
        }

实现这两个方法后,重载列表页的  OnNavigatingFrom 方法,在其中加入以下代码,来实现获取滚动位置并保存:

           string position = ListViewPersistenceHelper.GetRelativeScrollPosition(this.listView, ItemToKeyHandler);
           NavigationInfoHelper.SetInfo(targetItem, position);

继续为页面注册 Loaded 事件,在 Loaded 事件中加入以下代码来实现设置滚动位置:

            if (navigationParameter != null)
            {
                if (NavigationInfoHelper.IsHasInfo)
                {
                    await ListViewPersistenceHelper.SetRelativeScrollPositionAsync(listView, NavigationInfoHelper.LastPosition, KeyToItemHandler);
                }
            }

这里需要注意的是,设置滚动位置的方法是异步的,所以 Loaded 方法需要加上 async 修饰符。而上述代码中对 navigationParameter 参数的判断则是为了区别:在导航时是否定位到最近浏览的位置,具体可参考 Demo 的代码。

二、获取 ListView 滚动位置处的项目

关于第二个需求的实现,我们首先需要明白以下三点:

  1. ListView 的模板 (Template) 中包括 ScrollViewer,我们可以通过 VisualTreeHelper 获取到此控件;
  2. ListView 提供 ContainerFromItem 方法,它使们可以通过传递 Item 获取包括此 Item 的 Container,即 ListViewItem;
  3. UIElement 提供 TransformToVisual 方法,可以得到某控件相对指定控件的位置转换信息;

所以我们的思路就是:得到 ListView 控件中的 ScrollViewer,并遍历 ListView 中所有的 Item,在遍历过程中,得到每一项目的 ListViewItem,并判断它的位置是否位于 ScrollViewer 的位置中。以下是获取 ListView 中当前所有可见项的代码:

        public static List<T> GetAllVisibleItems<T>(this ListViewBase listView)
        {
            var scrollViewer = listView.GetScrollViewer();
            if (scrollViewer == null)
            {
                return null;
            }

            List<T> targetItems = new List<T>();
            foreach (T item in listView.Items)
            {
                var itemContainer = listView.ContainerFromItem(item) as FrameworkElement;
                bool isVisible = IsVisibileToUser(itemContainer, scrollViewer, true);
                if (isVisible)
                {
                    targetItems.Add(item);
                }
            }

            return targetItems;
        }

在上述代码的 foreach 循环中的部分,正是我们前述思路的体现。而其中所调用的 IsVisibleToUser 方法,则是如何判断某一 ListViewItem 是否在 ScrollViewer 中为当前可见。其代码如下:

        /// <summary>
        /// Code from here:
        ///  https://social.msdn.microsoft.com/Forums/en-US/86ccf7a1-5481-4a59-9db2-34ebc760058a/uwphow-to-get-the-first-visible-group-key-in-the-grouped-listview?forum=wpdevelop
        /// </summary>
        /// <param name="element">ListViewItem or element in ListViewItem</param>
        /// <param name="container">ScrollViewer</param>
        /// <param name="isTotallyVisible">If the element is partially visible, then include it. The default value is false</param>
        /// <returns>Get the visibility of the target element</returns>
        private static bool IsVisibileToUser(FrameworkElement element, FrameworkElement container, bool isTotallyVisible = false)
        {
            if (element == null || container == null)
                return false;

            if (element.Visibility != Visibility.Visible)
                return false;

            Rect elementBounds = element.TransformToVisual(container).TransformBounds(new Rect(0.0, 0.0, element.ActualWidth, element.ActualHeight));
            Rect containerBounds = new Rect(0.0, 0.0, container.ActualWidth, container.ActualHeight);

            if (!isTotallyVisible)
            {
                return (elementBounds.Top < containerBounds.Bottom && elementBounds.Bottom > containerBounds.Top);
            }
            else
            {
                return (elementBounds.Bottom < containerBounds.Bottom && elementBounds.Top > containerBounds.Top);
            }
        }

可以看出,我们是能过得到两个 Rect 值。Rect 类型的值代表一个矩形区域的位置和大小,我们对这两个值进行比较后,返回最终的结果。
获取 ListViewItem 的 Rect 值: element.TransformToVisual(container) 返回的结果是 GeneralTransform 类型,这个值表明了 ListViewItem 相对于 Container(即 ScrollViewer)的位置转换信息。GeneralTransform 类型可能我们并不太熟悉,不过,从它派生出来的这些类: ScaleTransform、TranslateTransform ,我们就熟悉了,GeneralTransform 正是它们的基类。GeneralTransform 包括以下两个重要的方法:

  1. TransformPoint, 可以将得到的转换信息计算成 Point 值,表示某控件相对于另一控件的坐标位置
  2. TransformBounds,可以将得到的转换信息计算成 Rect 值,表示某控件相对于另一控件的坐标位置及所占的区域。

所以,我们通过 TransformBounds 方法就得到了 ListViewItem 相对于 ScrollViewer 的位置和所占区域的信息。
获取 ScrollViewer 的 Rect 值: 直接实例化一个 Rect,以 0,0 作为你左上角的坐标位置点, ScrollViewer 的 ActualWidth 和 ActualHeight 作为其大小。

接下来,就是比较的过程:这里,我们做了一个判断,判断是否要求元素 (ListViewItem) 完全在 ScrollViewer 中(而非仅部分在其中)。如果要求部分显示即可,则只要元素的 Top 小于 Container 的 Bottom 值,并且元素的 Bottom 大于 Container 的 Top;如果要求全部显示,那么算法是:元素的 Top 大于 Container 的 Top 并且元素的 Bottom 小于 Container 的 Bottom。如果您对语言描述或者代码都还不明白,也可以去画一下进行比较。

接下来,我们照着 GetAllVisbleItems 方法的思路可以实现 GetFirstVisibleItem 方法,即获取列表中第一个可见项,代码可参考 Demo 的源码,在此不再赘述。

我们在之前重载的方法 OnNavigatingFrom 中加上这句代码,即可以获取到用户浏览位置处的那一项。

          var targetItem = this.listView.GetFirstVisibleItem<Item>();

至此,所有主要功能已经基本完成。

结语

本文介绍了如何获取和设置 ListView 的滚动位置,以及获取滚动位置处的那一项,前者主要是借助于 ListViewPersistenceHelper 来实现,后者则是通过获取 ListViewItem 和 ScrollViewer 的 Rect 值并进行比较而最终实现的。如果您有更好的方法、不同的看见,请留言,共同交流。

源码下载

参考资料:

ListView Sample
How to get the first visible group key in the grouped listview

时间: 2024-11-03 01:38:31

UWP: ListView 中与滚动有关的两个需求的实现的相关文章

android 的ListView中,如何判断其内容已滚动到最顶部或者最底部?

根据这个方法检测: 1 getListView().setOnScrollListener(new OnScrollListener() { 2 @Override 3 public void onScrollStateChanged(AbsListView view, int scrollState) { 4 } 5 6 @Override 7 public void onScroll(AbsListView view, int firstVisibleItem, int visibleIte

PullScrollView详解(六)——延伸拓展(listview中getScrollY()一直等于0、ScrollView中的overScrollBy)

前言:经常说follow your heart.但等到真到这么一天的时候,却很艰难 相关文章: 1.<PullScrollView详解(一)--自定义控件属性>2.<PullScrollView详解(二)--Animation.Layout与下拉回弹>3.<PullScrollView详解(三)--PullScrollView实现>4.<PullScrollView详解(四)--完全使用listview实现下拉回弹(方法一)>5.<PullScroll

Windows10(uwp)开发中的侧滑

还是在持续的开发一款Windows10的应用中,除了上篇博客讲讲我在Windows10(uwp)开发中遇到的一些坑,其实还有很多不完善的地方,比如(UIElement.Foreground).(GradientBrush.GradientStops)[1].(GradientStop.Offset)这种设置无法生效,还有RelativePanel内的元素不能自动的适应大小,要去手动控制宽高度,以及窗口在靠边的时候一些尺寸上的错误等等.虽然是WPF技术之后的延续,但是很多地方还是要小心仔细的处理,

ListView中镶嵌GridView实现时间线功能问题总汇

看了网上的时间线,基本都非常的差劲,不如自己写一个,实现的效果如下,在实现的过程中遇到了2个大的问题:1.gridView显示不全2.listview的item不可点击,那么下面写出我解决这两个问题的办法 一.GridView显示不全的问题 GridView 显示不全是因为ListView和GridView都是可以滚动的,在android中不可以在一个可以滚动的控件中镶嵌另一个可以滚动的控件,那么我们可以通过自定义GridView设置为不滚动. MyGridView import android

listview中的item重复问题

Android ListView最佳处理方式,ListView拖动防重复数据显示,单击响应子控件. 1.为了防止拖动ListView时,在列表末尾重复数据显示.需要加入 HashMap<Integer,View> lmap = new HashMap<Integer,View>();其中Integer为列表位置,View为子项视图,加入数据前首先if (lmap.get(position)==null) ,满足条件时,加入lmap.put(position, convertView

ListView或者RecycleView滚动时隐藏Toolbar( Part 2 )

ListView或者RecycleView滚动时隐藏Toolbar( Part 2 ) > * 原文链接 : How to hide/show Toolbar when list is scrolling (part 2) * 译者 : chaossss * 校对者: 这里校对者的github用户名 * 状态 : 完成 Hello,各位小伙伴,俺胡汉三又来了!!!今天我打算接着上一篇博文继续给大家讲解展现/隐藏Toolbar的效果.我建议没有读过 ListView或者RecycleView滚动时

ListView实现下拉刷新-2-将顶部布局加载到ListView中

上一篇实现了Adapter类的创建,和getView函数的分析: 这一篇主要讲第二部分,即将顶部布局加载到ListView中:重点是ReFlashListView的实现上,这一篇中我会谈一谈在阅读源代码的过程中所遇到的困难和采取的方法: 首先看ReFlashListView类: public class ReFlashListView extends ListView implements OnScrollListener 表明ReFlashListView是继承自ListView的,并且 实现

解决ScrollView中嵌套Listview,Listview中嵌套Listview显示不完整和滑动冲突的问题

在一个滑动控件或者是布局里面,添加另外一个可以滑动的控件,通常会造成一些莫名其妙的问题.今天主要介绍在工作中遇到的,在ScrollView布局中嵌套Listview显示不正常,和在Listview中嵌套Listview的滑动冲突的问题. 1.ScrollView布局中嵌套Listview显示不正常的解决方案 目前来说,解决这个问题有好几种解决方案,这里只介绍其中两种比较简单易行的其中两种. (1)自定义一个Listview,继承自Listview,代码如下: public class ListV

ListView中嵌套ViewPager(ViewPager是item的一部分),并且存在判断位置的小白点。

============问题描述============ 被bug困扰了好久: 1.白点会出现混乱,有的时候是正常的,有的时候会不动(如果界面只有一个item,白点可以正常切换,有两个item就会不动). 2.当有两个item时,如果滑动上一个item图片与下一个item一样时,下面的item的图片就会消失. 本人新手,贴上代码,求各位大神指导. package com.glasses.adapter; import java.util.ArrayList; import java.util.H