UWP开发入门(七)——下拉刷新
本篇意在给这几天Win10 Mobile负面新闻不断的某软洗地,想要证明实现一个简单的下拉刷新并不困难。UWP开发更大的困难在于懒惰,缺乏学习的意愿。而不是“某软连下拉刷新控件都没有”这样的想法。
之前我也没有进行过下拉刷新的研究。于是先去google了几篇blog学习了一下,然后再看了某软官方的Sample。(同学们啊官方有下拉刷新的Sample啊!就在Git上啊!不要钱无门槛啊!)学习之后发现实现的方式大体分为两类。
一类是以某软Sample和博客园MS-UAP封装的PullToRefreshBox为代表,将一片“释放刷新”区域和一个ListView上下排列放置到一个ScrollView中。初始通过向下滚动ScrollView将“释放刷新”区域上移至不可见,在每次向上滚动显示“释放刷新”区域时,触发ScrollView的ViewChanged事件来进行加载新数据。完成新数据加载后,再次将“释放刷新”区域上移隐藏。
另一类是通过附加属性来获取ListView内部的ScrollView,并检测内部ScrollView的相关Manpulation事件来实现数据刷新。
考虑到附加属性稍稍超出入门范围,且第一类代码可以写得较为简单。故采用ScrollView嵌套的方法,给出一个极简的下拉刷新实现,虽并不能应对所有的需求,但考虑到30行不到的代码量,绝对你值得拥有!
首先是XAML的代码,平淡无奇没有任何高深的技巧:
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ScrollViewer x:Name="scrollViewer"
                     Loaded="scrollViewer_Loaded"
                      ViewChanged="scrollViewer_ViewChanged">
            <StackPanel Orientation="Vertical">
                <ProgressRing IsActive="{x:Bind IsPullRefresh,Mode=OneWay}" Height="30"></ProgressRing>
                <ListView x:Name="list" ItemsSource="{x:Bind Items}" ></ListView>
            </StackPanel>
        </ScrollViewer>
    </Grid>
再来看cs文件。首先是Items和IsPullRefresh属性的定义,前者是ListView中的数据集,后者Binding到ProgressRing的IsActive属性,这里略过不表。
值得注意的仅有scrollViewer_Loaded和scrollViewer_ViewChanged两个方法。scrollViewer的Load方法里,我们在初始状态下将ScrollViewer向上滚动了30个px,正好将ProgressRing隐藏了起来。然后是scrollViewer_ViewChanged方法,IsIntermediate属性指出滑动是否还在进行中,如果不是并且到达顶部了,就去加载新的数据,同时控制ProgressRing的菊花转圈圈。最后,再将ScrollViewer向上滚动30px藏起ProgressRing。
public sealed partial class MainPage : Page, INotifyPropertyChanged
{
public ObservableCollection<object> Items { get; set; } public bool IsPullRefresh
{
get
{
return _isPullRefresh;
} set
{
_isPullRefresh = value;
OnPropertyChanged(nameof(IsPullRefresh));
}
} bool _isPullRefresh = false; public MainPage()
{
this.InitializeComponent(); Items = new ObservableCollection<object>();
for (int i = ; i < ; i++)
{
Items.Add(i);
}
} public event PropertyChangedEventHandler PropertyChanged; public void OnPropertyChanged(string name)
{
this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
} private void scrollViewer_Loaded(object sender, RoutedEventArgs e)
{
scrollViewer.ChangeView(null, , null);
} private async void scrollViewer_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
{
var sv = sender as ScrollViewer; if (!e.IsIntermediate)
{
if (sv.VerticalOffset == 0.0)
{
IsPullRefresh = true;
await Task.Delay();
for (int i = ; i < ; i++)
{
Items.Insert(, i);
}
sv.ChangeView(null, , null);
}
IsPullRefresh = false;
}
}
}
打完收工,是不是觉得挺简单的?UWP开发即是如此,困难确实有,经验的确没有。跟相对成熟的iOS和Android开发相比,是需要更多的汗水和努力。但是微软是否要倒了?微软技术又是否没前途?Windows 10是否废品?有空在网上搜这种没有卵用的东西,不如多多学习。
继续打广告,这种ScrollViewer嵌套ListView的方式呢,确实可以解决问题。但偶尔也会发现和ListView控件自身的ScrollViewer滑动冲突,以及不能精确定位ListViewItem等问题。那么如果想要更加精进的话?记得看俺下一篇哦,随手点个赞吧……嘿嘿嘿……
Microsoft/Windows-universal-samples
UWP开发入门(七)——下拉刷新的更多相关文章
- UWP的一种下拉刷新实现
		
简介 我们最近实现了一个在UWP中使用的下拉刷新功能,以满足用户的需求,因为这是下拉刷新是一种常见的操作方式,而UWP本身并不提供这一机制. 通过下拉刷新这一机制,可以让移动端的界面设计变得更加简单, ...
 - android开发(49) Android 下拉刷新的实现。使用 SwipeRefreshLayout 代替 pull-to-refesh
		
概述 谷歌官方推出了SwipeRefreshLayout 来实现下拉刷新的效果.对比以前我们常用的 pull-to-refesh ,这个方案显得更加的简单方便. 关联项目引用(管理依赖) 在你的 应用 ...
 - 使用SVPullToRefresh实现下拉刷新和下拉加载
		
移动端开发中,“下拉刷新”和“上拉加载更多”早已在各大App中随处可见.也非常容易就能找到直接可供使用的第三方资源.譬如EGOTableViewPullRefresh(下拉刷新)和LoadMoreTa ...
 - (UWP开发)更为合理的一种ListView下拉刷新(PullToRefresh)实现方法
		
最近在做的一个项目需要用到下拉刷新,但是参考了现在网络上比较普遍的方法,觉得都不太好,因为要在外部套上一个SrollViewer,容易出现滚动错误.于是刚开始的时候就把思路定到了ListView内部的 ...
 - Android SwipeRefreshLayout 下拉刷新——Hi_博客 Android App 开发笔记
		
以前写下拉刷新 感觉好费劲,要判断ListView是否滚到顶部,还要加载头布局,还要控制 头布局的状态,等等一大堆.感觉麻烦死了.今天学习了SwipeRefreshLayout 的用法,来分享一下,有 ...
 - Android开发学习之路-下拉刷新怎么做?
		
因为最近的开发涉及到了网络读取数据,那么自然少不了的就是下拉刷新的功能,搜索的方法一般是自己去自定义ListView或者RecyclerView来重写OnTouch或者OnScroll方法来实现手势的 ...
 - Windows phone应用开发[22]-再谈下拉刷新
		
几周之前在博客更新一篇Windows phone应用开发[18]-下拉刷新 博文,有很多人在微博和博客评论中提到了很多问题.其实在实际项目中我基于这篇博文提出解决问题思路优化了这个解决方案.为了能够详 ...
 - IOS 开发下拉刷新和上拉加载更多
		
IOS 开发下拉刷新和上拉加载更多 简介 1.常用的下拉刷新的实现方式 (1)UIRefreshControl (2)EGOTTableViewrefresh (3)AH3DPullRefresh ( ...
 - iOS开发 XML解析和下拉刷新,上拉加载更多
		
iOS开发 XML解析和下拉刷新,上拉加载更多 1.XML格式 <?xml version="1.0" encoding="utf-8" ?> 表示 ...
 
随机推荐
- Go语言环境安装详细介绍
			
工具链介绍 go有两套编译工具链,分别是从plant9移植过来的gc和依赖gcc的gccgo. 官方为gc工具链提供了二进制安装包和源码, 可以根据需要选择一种安装方式.gc工具链对操作系统和CPU类 ...
 - linux下创建具有root权限的账户
			
http://blog.chinaunix.net/uid-24631445-id-2981034.html
 - OpenCL 图像卷积 2
			
▶ 上一篇图像卷积 http://www.cnblogs.com/cuancuancuanhao/p/8535569.html.这篇使用了 OpenCV 从文件读取彩色的 jpeg 图像,进行边缘检测 ...
 - 图像特征与描述子(直方图, 聚类, 边缘检测, 兴趣点/关键点, Harris角点, 斑点(Blob), SIFI, 纹理特征)
			
1.直方图 用于计算图片特征,表达, 使得数据具有总结性, 颜色直方图对数据空间进行量化,好比10个bin 2. 聚类 类内对象的相关性高 类间对象的相关性差 常用算法:kmeans, EM算法, m ...
 - Git----远程仓库之添加远程库02
			
现在的情景是,你已经在本地创建了一个Git仓库后,又想在GitHub上创建一个Git库,并且让这两个仓库进行远程同步,这样,GitHub上的仓库既可以作为备份,又可以让其他人通过该仓库来协作,真是一举 ...
 - localStorage,sessionStorage
			
h5的本地存储. 现代浏览器普遍开始支持H5本地存储,localStorage.sessionStorage.可以用来代替cookie的一部分存储功能,他比cookie存储量更大.比较实用. 两者用法 ...
 - js 倒计时功能,获取当前时间的年月日,时分秒
			
一.实现当前时间到指定截止时间的倒计时功能 <html> <head> <title>TEST</title> </head> <bo ...
 - python简单爬虫(一)
			
学习python前纠结了下,到底是应该一个个知识点吃透,然后写些小程序.还是应该快速掌握基础语法,快速实践.思考后认为前者这么学习速度真心不高,于是花2天时间看了下python3的语法,虽然很多都不明 ...
 - 转载:字符串hash总结(hash是一门优雅的暴力!)
			
转载自:远航休息栈 字符串Hash总结 Hash是什么意思呢?某度翻译告诉我们: hash 英[hæʃ] 美[hæʃ]n. 剁碎的食物; #号; 蔬菜肉丁;vt. 把…弄乱; 切碎; 反复推敲; 搞糟 ...
 - entity_class实体类
			
对应数据库中表,并继承基础模型类~