最近项目里面有下拉刷新的需求,自己做了一个,效果还不错。

  1. <Style TargetType="local:PullToRefreshControl">
  2. <Setter Property="HeaderTemplate">
  3. <Setter.Value>
  4. <DataTemplate>
  5. <Grid>
  6. <StackPanel VerticalAlignment="Center" Orientation="Horizontal" Visibility="{Binding IsReachThreshold,Converter={StaticResource InversedBooleanToVisibilityConverter}}">
  7. <FontIcon FontSize="" FontFamily="Segoe UI Emoji" Glyph="↓" IsHitTestVisible="False" VerticalAlignment="Bottom"/>
  8. <TextBlock Margin="5,0,5,0" Text="下拉刷新" VerticalAlignment="Bottom"/>
  9. </StackPanel>
  10. <StackPanel VerticalAlignment="Center" Orientation="Horizontal" Visibility="{Binding IsReachThreshold, Converter={StaticResource BooleanToVisibilityConverter}}">
  11. <FontIcon FontSize="" FontFamily="Segoe UI Emoji" Glyph="↑" IsHitTestVisible="False" VerticalAlignment="Bottom"/>
  12. <TextBlock Margin="5,0,5,0" Text="释放立即刷新" VerticalAlignment="Bottom"/>
  13. </StackPanel>
  14. </Grid>
  15. </DataTemplate>
  16. </Setter.Value>
  17. </Setter>
  18. <Setter Property="Template">
  19. <Setter.Value>
  20. <ControlTemplate TargetType="local:PullToRefreshControl">
  21. <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Margin="{TemplateBinding Margin}">
  22. <ScrollViewer x:Name="ScrollViewer"
  23. VerticalScrollBarVisibility="Hidden">
  24. <StackPanel>
  25. <ContentControl x:Name="PanelHeader" ContentTemplate="{TemplateBinding HeaderTemplate}" HorizontalContentAlignment="Center" VerticalContentAlignment="Bottom" />
  26. <ContentPresenter x:Name="PanelContent" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
  27. </StackPanel>
  28. </ScrollViewer>
  29. </Border>
  30. </ControlTemplate>
  31. </Setter.Value>
  32. </Setter>
  33. </Style>
  1. [TemplatePart(Name = PanelHeader, Type = typeof(ContentControl))]
  2. [TemplatePart(Name = PanelContent, Type = typeof(ContentPresenter))]
  3. [TemplatePart(Name = ScrollViewer, Type = typeof(ScrollViewer))]
  4. public class PullToRefreshControl:ContentControl
  5. {
  6. #region Fields
  7. private const string PanelHeader = "PanelHeader";
  8. private const string PanelContent = "PanelContent";
  9. private const string ScrollViewer = "ScrollViewer";
  10. private ContentControl _panelHeader;
  11. private ContentPresenter _panelContent;
  12. private ScrollViewer _scrollViewer;
  13. #endregion
  14.  
  15. #region Property
  16.  
  17. /// <summary>
  18. /// The threshold for release to refresh,defautl value is 2/5 of PullToRefreshPanel's height.
  19. /// </summary>
  20. public double RefreshThreshold
  21. {
  22. get { return (double)GetValue(RefreshThresholdProperty); }
  23. set { SetValue(RefreshThresholdProperty, value); }
  24. }
  25.  
  26. // Using a DependencyProperty as the backing store for RefreshThreshold. This enables animation, styling, binding, etc...
  27. public static readonly DependencyProperty RefreshThresholdProperty =
  28. DependencyProperty.Register("RefreshThreshold", typeof(double), typeof(PullToRefreshControl), new PropertyMetadata(0.0,new PropertyChangedCallback(OnRefreshThresholdChanged)));
  29.  
  30. private static void OnRefreshThresholdChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
  31. {
  32. var pullToRefreshControl = d as PullToRefreshControl;
  33. pullToRefreshControl.UpdateContentGrid();
  34. }
  35.  
  36. /// <summary>
  37. /// occur when reach threshold.
  38. /// </summary>
  39. public event EventHandler PullToRefresh;
  40.  
  41. public DataTemplate HeaderTemplate
  42. {
  43. get { return (DataTemplate)GetValue(HeaderTemplateProperty); }
  44. set { SetValue(HeaderTemplateProperty, value); }
  45. }
  46.  
  47. // Using a DependencyProperty as the backing store for HeaderTemplate. This enables animation, styling, binding, etc...
  48. public static readonly DependencyProperty HeaderTemplateProperty =
  49. DependencyProperty.Register("HeaderTemplate", typeof(DataTemplate), typeof(PullToRefreshControl), new PropertyMetadata(null));
  50.  
  51. public bool IsReachThreshold
  52. {
  53. get { return (bool)GetValue(IsReachThresholdProperty); }
  54. set { SetValue(IsReachThresholdProperty, value); }
  55. }
  56.  
  57. // Using a DependencyProperty as the backing store for IsReachThreshold. This enables animation, styling, binding, etc...
  58. public static readonly DependencyProperty IsReachThresholdProperty =
  59. DependencyProperty.Register("IsReachThreshold", typeof(bool), typeof(PullToRefreshControl), new PropertyMetadata(false));
  60.  
  61. #endregion
  62.  
  63. protected override void OnApplyTemplate()
  64. {
  65. _panelHeader = GetTemplateChild(PanelHeader) as ContentControl;
  66. _panelHeader.DataContext = this;
  67. _panelContent = GetTemplateChild(PanelContent) as ContentPresenter;
  68. _scrollViewer = GetTemplateChild(ScrollViewer) as ScrollViewer;
  69. _scrollViewer.ViewChanged += _scrollViewer_ViewChanged;
  70. base.OnApplyTemplate();
  71. }
  72.  
  73. private void _scrollViewer_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
  74. {
  75. //Sometime we can't make it to 0.0.
  76. IsReachThreshold = _scrollViewer.VerticalOffset <= 5.0;
  77. if (e.IsIntermediate)
  78. {
  79. return;
  80. }
  81.  
  82. if (IsReachThreshold)
  83. {
  84. if (PullToRefresh!=null)
  85. {
  86. PullToRefresh(this, null);
  87. }
  88. }
  89. _panelHeader.Height = RefreshThreshold > _panelHeader.ActualHeight ? RefreshThreshold : _panelHeader.ActualHeight;
  90. this.Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
  91. {
  92. _scrollViewer.ChangeView(null, _panelHeader.Height, null);
  93. });
  94.  
  95. }
  96.  
  97. public PullToRefreshControl()
  98. {
  99. this.DefaultStyleKey = typeof(PullToRefreshControl);
  100. this.Loaded +=(s,e)=>
  101. {
  102. if (RefreshThreshold == 0.0)
  103. {
  104. RefreshThreshold = this.ActualHeight * / 5.0;
  105. }
  106. UpdateContentGrid();
  107. };
  108. this.SizeChanged += (s, e) =>
  109. {
  110. if (RefreshThreshold==0.0)
  111. {
  112. RefreshThreshold = this.ActualHeight * / 5.0;
  113. }
  114. UpdateContentGrid();
  115. };
  116. }
  117.  
  118. #region Method
  119. private void UpdateContentGrid()
  120. {
  121. if (_scrollViewer != null && _panelContent!=null && _panelHeader !=null)
  122. {
  123. _panelHeader.Height = RefreshThreshold > _panelHeader.ActualHeight? RefreshThreshold: _panelHeader.ActualHeight;
  124. this.Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
  125. {
  126. _scrollViewer.ChangeView(null, _panelHeader.Height, null, true);
  127. });
  128. _panelContent.Width = this.ActualWidth;
  129. _panelContent.Height = this.ActualHeight;
  130. }
  131. }
  132. #endregion
  133. }

UWP 下拉刷新控件(PullToRefreshControl)的更多相关文章

  1. android官方下拉刷新控件SwipeRefreshLayout的使用

    可能开发安卓的人大多数都用过很多下拉刷新的开源组件,但是今天用了官方v4支持包的SwipeRefreshLayout觉得效果也蛮不错的,特拿出来分享. 简介:SwipeRefreshLayout组件只 ...

  2. [Android]下拉刷新控件RefreshableView的实现

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/4172483.html 需求:自定义一个ViewGroup,实现 ...

  3. android SwipeRefreshLayout google官方下拉刷新控件

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

  4. Android PullToRefresh下拉刷新控件的简单使用

    PullToRefresh这个开源库早就听说了,不过一直没用过.作为一个经典的的开源库,我觉得还是有必要认识一下. 打开github上的网址:https://github.com/chrisbanes ...

  5. Android SwipeRefreshLayout 官方下拉刷新控件介绍

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24521483 下面App基本都有下拉刷新的功能,以前基本都使用XListView ...

  6. Google SwipeRefreshLayout(Goolge官方下拉刷新控件)尝鲜

    前天Google官方终于出了Android刷新控件——SwipeRefreshLayout. 使用前先需要将android.support.v4.jar升级到19.1.升级后,可能会出现SDK版本与A ...

  7. 上拉加载下拉刷新控件WaterRefreshLoadMoreView

    上拉加载下拉刷新控件WaterRefreshLoadMoreView 效果: 源码: // // SRSlimeView // @author SR // Modified by JunHan on ...

  8. 官方下拉刷新控件SwipeRefreshLayout的使用

    今天看博客,发现有了这个下拉刷新的控件,效果看上去还蛮好的,于是我也想研究的是使用一下,写个demo.其实使用很简单的,但就是为了能使用这个新组建我下了好久的更新,后来还是直接去官网下载最新的ADT得 ...

  9. Android仿苹果版QQ下拉刷新实现(一) ——打造简单平滑的通用下拉刷新控件

    前言: 忙完了结婚乐APP的开发,终于可以花一定的时间放在博客上了.好了,废话不多说,今天我们要带来的效果是苹果版本的QQ下拉刷新.首先看一下目标效果以及demo效果:      因为此效果实现的步骤 ...

随机推荐

  1. Jquery 关于span标签的取值赋值用法

    span是最简单的容器,可以当作一个形式标签,其取值赋值方法有别于一般的页面元素. //赋值 $("#spanid").html(value) //取值 $("#span ...

  2. Python【第一章】:简介和入门

    ython简介 Python的创始人为Guido van Rossum.1989年圣诞节期间,在阿姆斯特丹,Guido为了打发圣诞节的无趣,决心开发一个新的脚本解释程序,做为ABC 语言的一种继承.之 ...

  3. 今天遇到sqlyog连接不上阿里云的数据库,最后百度解决了...

  4. Table

    Table tb = new Table();TableRow r = new TableRow(); TableCell c = new TableCell();c.Text = "Sta ...

  5. 三、Shell变量类型和运算符

    一.Shell变量的应用 1.Shell变量的种类     ·用户自定义变量:由用户自己定义.修改和使用     ·预定义变量:Bash预定义的特殊变量,不能直接修改     ·位置变量:通过命令行给 ...

  6. Python SMTP邮件模块

    SMTP是发送邮件的协议,Python内置对SMTP的支持,可以发送纯文本邮件.HTML邮件以及带附件的邮件. Python对SMTP支持有smtplib和email两个模块,email负责构造邮件, ...

  7. 2012-2013 ACM-ICPC Northeastern European Regional Contest (NEERC 12)

    Problems     # Name     A Addictive Bubbles1 addictive.in / addictive.out 2 s, 256 MB    x438 B Blin ...

  8. javascript数据结构与算法--链表

    链表与数组的区别?  1. 定义: 数组又叫做顺序表,顺序表是在内存中开辟一段连续的空间来存储数据,数组可以处理一组数据类型相同的数据,但不允许动态定义数组的大小,即在使用数组之前必须确定数组的大小. ...

  9. PHP正则表达式详解(二)

    前言: 在本文中讲述了正则表达式中的组与向后引用,先前向后查看,条件测试,单词边界,选择符等表达式及例子,并分析了正则引擎在执行匹配时的内部机理. 本文是Jan Goyvaerts为RegexBudd ...

  10. Linux 新建用户、用户组,给用户分配权限(chown、useradd、groupadd、userdel、usermod、passwd、groupdel)

    Linux 系统是一个多用户多任务的分时操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员申请一个账号,然后以这个账号的身份进入系统.用户的账号一方面可以帮助系统管理员对使用系统的用户进行 ...