UWP 下拉刷新控件(PullToRefreshControl)
最近项目里面有下拉刷新的需求,自己做了一个,效果还不错。
<Style TargetType="local:PullToRefreshControl">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<Grid>
<StackPanel VerticalAlignment="Center" Orientation="Horizontal" Visibility="{Binding IsReachThreshold,Converter={StaticResource InversedBooleanToVisibilityConverter}}">
<FontIcon FontSize="" FontFamily="Segoe UI Emoji" Glyph="↓" IsHitTestVisible="False" VerticalAlignment="Bottom"/>
<TextBlock Margin="5,0,5,0" Text="下拉刷新" VerticalAlignment="Bottom"/>
</StackPanel>
<StackPanel VerticalAlignment="Center" Orientation="Horizontal" Visibility="{Binding IsReachThreshold, Converter={StaticResource BooleanToVisibilityConverter}}">
<FontIcon FontSize="" FontFamily="Segoe UI Emoji" Glyph="↑" IsHitTestVisible="False" VerticalAlignment="Bottom"/>
<TextBlock Margin="5,0,5,0" Text="释放立即刷新" VerticalAlignment="Bottom"/>
</StackPanel>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:PullToRefreshControl">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Margin="{TemplateBinding Margin}">
<ScrollViewer x:Name="ScrollViewer"
VerticalScrollBarVisibility="Hidden">
<StackPanel>
<ContentControl x:Name="PanelHeader" ContentTemplate="{TemplateBinding HeaderTemplate}" HorizontalContentAlignment="Center" VerticalContentAlignment="Bottom" />
<ContentPresenter x:Name="PanelContent" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</StackPanel>
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
[TemplatePart(Name = PanelHeader, Type = typeof(ContentControl))]
[TemplatePart(Name = PanelContent, Type = typeof(ContentPresenter))]
[TemplatePart(Name = ScrollViewer, Type = typeof(ScrollViewer))]
public class PullToRefreshControl:ContentControl
{
#region Fields
private const string PanelHeader = "PanelHeader";
private const string PanelContent = "PanelContent";
private const string ScrollViewer = "ScrollViewer";
private ContentControl _panelHeader;
private ContentPresenter _panelContent;
private ScrollViewer _scrollViewer;
#endregion #region Property /// <summary>
/// The threshold for release to refresh,defautl value is 2/5 of PullToRefreshPanel's height.
/// </summary>
public double RefreshThreshold
{
get { return (double)GetValue(RefreshThresholdProperty); }
set { SetValue(RefreshThresholdProperty, value); }
} // Using a DependencyProperty as the backing store for RefreshThreshold. This enables animation, styling, binding, etc...
public static readonly DependencyProperty RefreshThresholdProperty =
DependencyProperty.Register("RefreshThreshold", typeof(double), typeof(PullToRefreshControl), new PropertyMetadata(0.0,new PropertyChangedCallback(OnRefreshThresholdChanged))); private static void OnRefreshThresholdChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var pullToRefreshControl = d as PullToRefreshControl;
pullToRefreshControl.UpdateContentGrid();
} /// <summary>
/// occur when reach threshold.
/// </summary>
public event EventHandler PullToRefresh; public DataTemplate HeaderTemplate
{
get { return (DataTemplate)GetValue(HeaderTemplateProperty); }
set { SetValue(HeaderTemplateProperty, value); }
} // Using a DependencyProperty as the backing store for HeaderTemplate. This enables animation, styling, binding, etc...
public static readonly DependencyProperty HeaderTemplateProperty =
DependencyProperty.Register("HeaderTemplate", typeof(DataTemplate), typeof(PullToRefreshControl), new PropertyMetadata(null)); public bool IsReachThreshold
{
get { return (bool)GetValue(IsReachThresholdProperty); }
set { SetValue(IsReachThresholdProperty, value); }
} // Using a DependencyProperty as the backing store for IsReachThreshold. This enables animation, styling, binding, etc...
public static readonly DependencyProperty IsReachThresholdProperty =
DependencyProperty.Register("IsReachThreshold", typeof(bool), typeof(PullToRefreshControl), new PropertyMetadata(false)); #endregion protected override void OnApplyTemplate()
{
_panelHeader = GetTemplateChild(PanelHeader) as ContentControl;
_panelHeader.DataContext = this;
_panelContent = GetTemplateChild(PanelContent) as ContentPresenter;
_scrollViewer = GetTemplateChild(ScrollViewer) as ScrollViewer;
_scrollViewer.ViewChanged += _scrollViewer_ViewChanged;
base.OnApplyTemplate();
} private void _scrollViewer_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
{
//Sometime we can't make it to 0.0.
IsReachThreshold = _scrollViewer.VerticalOffset <= 5.0;
if (e.IsIntermediate)
{
return;
} if (IsReachThreshold)
{
if (PullToRefresh!=null)
{
PullToRefresh(this, null);
}
}
_panelHeader.Height = RefreshThreshold > _panelHeader.ActualHeight ? RefreshThreshold : _panelHeader.ActualHeight;
this.Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
{
_scrollViewer.ChangeView(null, _panelHeader.Height, null);
}); } public PullToRefreshControl()
{
this.DefaultStyleKey = typeof(PullToRefreshControl);
this.Loaded +=(s,e)=>
{
if (RefreshThreshold == 0.0)
{
RefreshThreshold = this.ActualHeight * / 5.0;
}
UpdateContentGrid();
};
this.SizeChanged += (s, e) =>
{
if (RefreshThreshold==0.0)
{
RefreshThreshold = this.ActualHeight * / 5.0;
}
UpdateContentGrid();
};
} #region Method
private void UpdateContentGrid()
{
if (_scrollViewer != null && _panelContent!=null && _panelHeader !=null)
{
_panelHeader.Height = RefreshThreshold > _panelHeader.ActualHeight? RefreshThreshold: _panelHeader.ActualHeight;
this.Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
{
_scrollViewer.ChangeView(null, _panelHeader.Height, null, true);
});
_panelContent.Width = this.ActualWidth;
_panelContent.Height = this.ActualHeight;
}
}
#endregion
}
UWP 下拉刷新控件(PullToRefreshControl)的更多相关文章
- android官方下拉刷新控件SwipeRefreshLayout的使用
可能开发安卓的人大多数都用过很多下拉刷新的开源组件,但是今天用了官方v4支持包的SwipeRefreshLayout觉得效果也蛮不错的,特拿出来分享. 简介:SwipeRefreshLayout组件只 ...
- [Android]下拉刷新控件RefreshableView的实现
以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/4172483.html 需求:自定义一个ViewGroup,实现 ...
- android SwipeRefreshLayout google官方下拉刷新控件
下拉刷新功能之前一直使用的是XlistView很方便我前面的博客有介绍 SwipeRefreshLayout是google官方推出的下拉刷新控件使用方法也比较简单 今天就来使用下SwipeRefres ...
- Android PullToRefresh下拉刷新控件的简单使用
PullToRefresh这个开源库早就听说了,不过一直没用过.作为一个经典的的开源库,我觉得还是有必要认识一下. 打开github上的网址:https://github.com/chrisbanes ...
- Android SwipeRefreshLayout 官方下拉刷新控件介绍
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24521483 下面App基本都有下拉刷新的功能,以前基本都使用XListView ...
- Google SwipeRefreshLayout(Goolge官方下拉刷新控件)尝鲜
前天Google官方终于出了Android刷新控件——SwipeRefreshLayout. 使用前先需要将android.support.v4.jar升级到19.1.升级后,可能会出现SDK版本与A ...
- 上拉加载下拉刷新控件WaterRefreshLoadMoreView
上拉加载下拉刷新控件WaterRefreshLoadMoreView 效果: 源码: // // SRSlimeView // @author SR // Modified by JunHan on ...
- 官方下拉刷新控件SwipeRefreshLayout的使用
今天看博客,发现有了这个下拉刷新的控件,效果看上去还蛮好的,于是我也想研究的是使用一下,写个demo.其实使用很简单的,但就是为了能使用这个新组建我下了好久的更新,后来还是直接去官网下载最新的ADT得 ...
- Android仿苹果版QQ下拉刷新实现(一) ——打造简单平滑的通用下拉刷新控件
前言: 忙完了结婚乐APP的开发,终于可以花一定的时间放在博客上了.好了,废话不多说,今天我们要带来的效果是苹果版本的QQ下拉刷新.首先看一下目标效果以及demo效果: 因为此效果实现的步骤 ...
随机推荐
- 分布式服务框架dubbo原理解析(转)
libaba有好几个分布式框架,主要有:进行远程调用(类似于RMI的这种远程调用)的(dubbo.hsf),jms消息服务(napoli.notify),KV数据库(tair)等.这个框架/工具/产品 ...
- gulp watch出现Error: watch null EPERM的问题解释
出现这样的问题,一般是第一次运行导致的,而且任务上有删除文件的操作. 我观察发现,只要把输出目录的文件删除,然后重新运行watch就一些ok,后者再运行一次gulp watch就一切正常.
- Android实现透明式状态栏
Android实现透明式状态栏 1. 修改style样式 2. 创建values-v19文件夹 3. 在这个文件夹下创建style.xml 4. 对activity_main.xml进行修改 移 ...
- PHP文件大小格式化函数合集
比如碰到一个很大的文件有49957289167B,大家一看这么一长串的数字后面单位是字节B,还是不知道这个文件的大小是一个什么概念,我们把它转换成GB为单位,就是46.53GB.用下面这些函数就可以完 ...
- 制作wordpress留言板
总结步骤如下: 1.找到模板目录中的single.php文件,复制single.php并重命名为guestbook.php 2.在guestbook最顶部添加如下代码(用于模板调用) <?php ...
- C++ 11 中的右值引用
C++ 11 中的右值引用 右值引用的功能 首先,我并不介绍什么是右值引用,而是以一个例子里来介绍一下右值引用的功能: #include <iostream> #include &l ...
- JavaScript常用技术总结!~~
//如果当前窗口不是最外层窗口,把最外层窗口链接改成当前窗口 if (window != top) top.location.href = location.href; //value值移入消失 $( ...
- [Linux & Mysql] Linux下Mysql的基本操作
1. 连接Mysql 1.1 连接到本机上的Mysql 键入命令mysql -u root -p,回车后提示你输密码.注意用户名前可以有空格也可以没有空格,但是密码前必须没有空格,否则让你重新输入密码 ...
- poj 1239
二次dp,还算好想. 先第一遍dp找出最后一个数字最小是几. dpf[i]=max{j}+1(dpf[j],dpf[j]+1,…,j位组成的数字小于j+1,j+2,…,i位组成的数字. 在第二遍dp, ...
- PHP中计划任务
PHP不支持多线程,有时候处理问题不是那么爽,今天谈论一下PHP定时执行的方法 PHP定时执行的三种方式实现 .windows 的计划任务 .linux的脚本程序 .让web浏览器定时刷新 windo ...