简介

我们最近实现了一个在UWP中使用的下拉刷新功能，以满足用户的需求，因为这是下拉刷新是一种常见的操作方式，而UWP本身并不提供这一机制。

通过下拉刷新这一机制，可以让移动端的界面设计变得更加简单，更符合广大用户的使用习惯。

NEW github链接：https://github.com/MS-UAP/PullToRefresh.UWP

该组件的nuget链接：https://www.nuget.org/packages/PullToRefresh.UWP

并且，我们实现的这一下拉刷新功能，具有以下优点：

  • 支持自定义下拉头部，包括及时显示下拉进度，分辨率较高。
  • 用于ListView时，支持UI虚拟化和增量加载，不影响诸如ListView.Header等属性。

基本使用

使用效果如图：

只需要简单的：

<pr:PullToRefreshBox x:Name="pr" RefreshInvoked="PullToRefreshBox_RefreshInvoked">
    <ListView x:Name="lv" ItemTemplate="{StaticResource ColorfulRectangle}" />
</pr:PullToRefreshBox>

这是默认的效果。用户只需要订阅 RefreshInvoked 事件即可。

该事件类型为：TypedEventHandler<DependencyObject, object>，第一个参数sender为PullToRefreshBox的Content，第二个参数总是null。

更多设置

我们的下拉刷新控件提供更多设置可供开发者自定义其表现。

  • double RefreshThreshold {get;set;} ：设置触发刷新的阈值，即有效下拉距离。
  • DataTemplate TopIndicatorTemplate {get;set;} ：自定义下拉头部模板。这是一个DataTemplate，其DataContext只是一个double值，表示相对于下拉阈值的百分比（可以超过100%）。而该模板本身会决定可用的下拉大小。

同时，我们还提供了一个PullRefreshProgressControl控件，方便开发者进行简单的头部定制。

该控件提供两个VisualState：Normal和ReleaseToRefresh，表示下拉过程中的两种状态（未到达刷新阈值，和已到达阈值）。

通过定义PullRefreshProgressControl.Template可以使用它（同样也要设定一下PullToRefreshBox.TopIndicatorTemplate，并且对PullRefreshProgressControl.Progress属性进行绑定）。

接下来为大家展示一下简单的定制效果：

相关代码如下：

<Grid><pr:PullToRefreshBox RefreshInvoked="pr_RefreshInvoked"><pr:PullToRefreshBox.TopIndicatorTemplate><DataTemplate><Grid Background="LightBlue"Height="130"Width="200"><pr:PullRefreshProgressControl Progress="{Binding}"HorizontalAlignment="Center"VerticalAlignment="Bottom"><pr:PullRefreshProgressControl.Template><ControlTemplate><Grid><VisualStateManager.VisualStateGroups><VisualStateGroup x:Name="VisualStateGroup"><VisualState x:Name="Normal" /><VisualState x:Name="ReleaseToRefresh"><Storyboard><ObjectAnimationUsingKeyFrames Storyboard.TargetName="txt" Storyboard.TargetProperty="Text"><DiscreteObjectKeyFrame KeyTime="0" Value="释放刷新" /></ObjectAnimationUsingKeyFrames></Storyboard></VisualState></VisualStateGroup></VisualStateManager.VisualStateGroups><Grid.RowDefinitions><RowDefinition Height="auto" /><RowDefinition Height="auto" /></Grid.RowDefinitions><TextBlock x:Name="txt"Text="下拉刷新"Grid.Row="1"FontSize="20"HorizontalAlignment="Center" /><TextBlock Text="{Binding}"FontSize="24"Foreground="Gray"HorizontalAlignment="Center" /></Grid></ControlTemplate></pr:PullRefreshProgressControl.Template></pr:PullRefreshProgressControl></Grid></DataTemplate></pr:PullToRefreshBox.TopIndicatorTemplate><ListView x:Name="ic"><ListView.ItemContainerStyle><Style TargetType="ListViewItem"><Setter Property="HorizontalAlignment" Value="Center" /></Style></ListView.ItemContainerStyle><ListView.ItemTemplate><DataTemplate><Rectangle Width="100" Height="200"><Rectangle.Fill><SolidColorBrush Color="{Binding}" /></Rectangle.Fill></Rectangle></DataTemplate></ListView.ItemTemplate></ListView></pr:PullToRefreshBox>
</Grid>

如果想要更加复杂的效果，则需要完全自定义PullToRefreshBox.TopIndicatorTemplate。

实现原理

采用外部嵌套ScrollViewer的方式实现。同时监控ScrollViewer的大小变化，以调整Content（即PullToRefreshBox.Content）的大小。

同时在下拉发生后，通过DirectManipulationCompleted事件，确定松开手指的时刻，并将下拉头部滚出ScrollViewer的可视区域。

在ScrollViewer.ViewChanged事件中计算下拉距离，以实现分辨率较高的进度绑定。

已知问题

  • 用于StackPanel，Canvas这类有无限大空间的控件 且不指定PullToRefreshBox的具体大小时，其大小会恒定不变，而不会随Content大小变化而变化。

该组件的nuget链接：https://www.nuget.org/packages/PullToRefresh.UWP

如果大家在使用中遇到了什么问题，希望能向我们反馈，以使得我们的实现变得更好。

感谢 h82258652 提出的意见！

UWP的一种下拉刷新实现相关推荐

  1. Android开发笔记（十二）测量尺寸与下拉刷新

    尺寸测量的配置 控件宽和高的设置方式 大家知道,自定义视图的目的就是要在屏幕上显示期望的图案,那在绘制图案之前,我们得先知道这个图案的尺寸(如宽多少高多少). 一般在xml中给控件的宽和高有三种赋值方 ...

  2. 快速仿写京东、天猫下拉刷新

    好久没输出文章了,最近研发任务比较忙,果然计划赶不上变化,之前还希望能一周一输出,好吧,我还是承认自己比较懒好了,=.=## 这次跟大家分享一下下拉刷新,之前我们的公司的项目一直都是使用SwipeRe ...

  3. 慕课网app下拉刷新图标填充效果的实现

    之前看到一种下拉刷新的效果,与以往的下拉效果都不一样,大多数下拉刷新都是一个圆形进度条在旋转,而这个下拉刷新则是一个不断填充的效果.本以为这是个自定义View,后来反编译慕课网的app后提取资源的时候 ...

  4. 仿京东天猫的下拉刷新

    http://www.jianshu.com/p/9daaa87045d0 快速仿写京东.天猫下拉刷新 =.=## 这次跟大家分享一下下拉刷新,之前我们的公司的项目一直都是使用SwipeRefresh ...

  5. android无感刷新下拉分页,GitHub - TakWolf/Android-RefreshAndLoadMore-Demo: 一种简单的并且优雅的方式实现下拉刷新和加载更多的分页效果。...

    Android - RefreshAndLoadMore Demo 一种简单的并且优雅的方式实现下拉刷新和加载更多的分页效果. 包含 ListView 和 RecyclerView 两种组件的对应实现 ...

  6. 一种无痕过渡下拉刷新控件的实现思路

    一种无痕过渡下拉刷新控件的实现思路 相信大家已经对下拉刷新熟悉得不能再熟悉了,市面上的下拉刷新琳琅满目,然而有很多在我看来略有缺陷,接下来我将说明一下存在的缺陷问题,然后提供一种思路来解决这一缺陷,废 ...

  7. 微信小程序下拉刷新和上拉加载

    效果图 微信小程序实现下拉刷新和上拉加载有2中方法 1 用系统自带的 个人感觉特别简单 2 使用scroll-view  实现, scroll-view 里面有2个属性是滑动到顶部以及到底部如下 其实 ...

  8. android google 下拉刷新 csdn,android SwipeRefreshLayout google官方下拉刷新控件

    下拉刷新功能之前一直使用的是XlistView很方便我前面的博客有介绍 SwipeRefreshLayout是google官方推出的下拉刷新控件使用方法也比较简单 今天就来使用下SwipeRefres ...

  9. refreshcontrol 实现下拉刷新的功能

    该组件实现下拉刷新的功能.不过该组件是用在ScrollView的内部的,为ScrollView添加一个下拉刷新的功能.当ScrollView的垂直方向的偏移量scrollY:0的时候,手指往下拖拽Sc ...

  10. 安卓下拉刷新、上拉加载数据显示

    整个是一个scrollView,嵌套一个线性布局,下拉刷新.或者上拉加载后,通过addView()方法,加载消息体,每一个消息体是一个复杂的子view. 做一个类似qq客户端"好友动态&qu ...

最新文章

  1. 深度学习加速器堆栈Deep Learning Accelerator Stack
  2. weblogic集群安装心得-程序包发布
  3. RabbitMQ学习笔记-安装
  4. HTML服务器控件与Web服务器控件的区别[转]
  5. scrapy爬虫框架的分类下载和异步下载到数据库
  6. java异常的总接口_重构：Java特别的接口修改：在throws子句中添加一个异常？
  7. 彩光和灰光模块_5G承载网主要光模块图谱
  8. 学python最重要的是_Python学习，要选哪个版本？
  9. 三维点云网络——PointNet论文解读
  10. kafka 常见问题（ 持续更新... ... ）
  11. 【字符串全排列】LeetCode 567. Permutation in String
  12. 龙芯机器联网时，链接建立速度有点慢
  13. Python安装学习
  14. 【图像融合】基于matlab IHS变换与自适应区域特征遥感图像融合【含Matlab源码 1636期】
  15. 熵 机器学习_理解熵：机器学习的金标准
  16. vscode中打开pdf文件_Visual Studio Code Preview深度体验、使用技巧.pdf
  17. 推荐几款MySQL图形化客户端管理工具
  18. PSP看电视软件测试,实战测试：PSP上运行Windows 95
  19. Mockplus组件样式库一键解决风格复用
  20. Mac 升级ruby版本

热门文章

  1. STM32 自定义串口协议
  2. 遗传算法适应度计算函数——ranking
  3. 航信税控系统 - 安装分析（一）
  4. 支付宝小程序使用阿里图标
  5. 关于Unity 接入VR镜头的设置
  6. 块/文件/对象三种存储的优缺点
  7. 很认真的聊一聊程序员的自我修养
  8. 今天不开心 和话痨机器人聊一会
  9. 龙卷风袭击广东致6死215伤 广州停
  10. 如何用linux系统进行远程控制windows服务器