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效果: 因为此效果实现的步骤 ...
随机推荐
- couldn't open file: data/coco.names
在ubuntu下配置yolo(v2)的时候,编译了源码后,尝试运行demo: ./darknet detect cfg/yolo.cfg yolo.weights data/dog.jpg 结果报错提 ...
- jcaptcha sample 制作验证码
Skip to end of metadata Created by marc antoine garrigue, last modified by Jeremy Waters on Feb 23, ...
- Android开发笔记之《Window下安装Ubuntu双系统,Grub无法显示Window选项》
解决方法是: 在terminal里面输入: sudo update-grub 会找到windows的grub 重启电脑就可以了.
- python2-gst0.10制作静态包的补丁 v1.1
gst制作成了静态库,而python2的gst有多个动态库引用gst的库 因此,想了一个办法将python2所需要的gst打包成一个单独的共享库 办法就是,将python2_gst所有的.so先制作成 ...
- HTTP Content-type 对照表
Application Type 文件扩展名 Content-Type(Mime-Type) 描述 . application/x- .* application/octet-stream 二进制 ...
- No module named migrate.versioning
在学习mega-tutorial的数据库章节时创建数据库遇到了问题,在stackoverflow上找到了结果 pip install sqlalchemy==0.7.9 pip install sql ...
- ecshop后台 计划任务
计划任务定时清理掉设置后的内容 主要针对单表删除(日志,):对于多表删除,不太好用(订单+订单商品+订单日志) 结构: 1.计划任务语言包:languages\zh_cn\cron\ 2.php文件: ...
- Bash 为何要发明 shopt 命令
在 Bash 中,有两个内置命令用来控制 Bash 的各种可配置行为的开关(打开或关闭),这些开关称之为选项(option).其中一个命令是 set,set 命令有三种功能:显示所有的变量和函数:修改 ...
- 简单的方向传感器SimpleOrientationSensor
SimpleOrientationSensor是一个简单的方向传感器.能够识别手机如下表的6种方向信息: SimpleOrientation枚举变量 方向 NotRotated 设备未旋转 Rotat ...
- [Data Structure & Algorithm] 八大排序算法
排序有内部排序和外部排序之分,内部排序是数据记录在内存中进行排序,而外部排序是因排序的数据很大,一次不能容纳全部的排序记录,在排序过程中需要访问外存.我们这里说的八大排序算法均为内部排序. 下图为排序 ...