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效果: 因为此效果实现的步骤 ...
随机推荐
- SPOJ LCS2 - Longest Common Substring II
LCS2 - Longest Common Substring II A string is finite sequence of characters over a non-empty finite ...
- gulp错误GulpUglifyError: unable to minify JavaScript解决
这个错误是由于在打包js代码时,js语法错误导致的,修改以下js的语法即可.
- 项目中遇到的关于兄弟controller之间传值的问题解决
层级关系如下 <ons-page ng-controller="tabbarIndexController"> <ons-tabbar position=&quo ...
- Unity Game窗口中还原Scene窗口摄像机操作
最近在弄AI,调试程序的时候总是要调整摄像机的视角.灰常不爽然后自己写了个脚本.比较习惯Scene窗口下的摄像机操作所以就仿造了一个一样的操作脚本. 首相我们要知道Scene下的摄像机的操作方式 1. ...
- K米点歌APP评测
K米APP评测 产品简介 K米点歌是一款免费的社交K歌手机应用,其手机点歌功能主要在KTV.夜总会,酒吧等K歌场所中使用,当前提供iPhone版本及安卓版本下载使用.——百度百科 评测版本 K米点歌4 ...
- <<< Oracle表空间创建、修改、删除基本操作
ORACLE 中,表空间是数据管理的基本方法,所有用户的对象要存放在表空间中,也就是用户有空间的使用权,才能创建用户对象 create tablespace myts //建立表空间,名为mytsd ...
- git gui 学习
目的 自己以前使用过3,4个月的SVN,因为公司使用的是git,git gui.所以打算自学git gui,并记录一下学习心得.^_^ 原因 为什么不是学命令行而是用git gui呢.我觉得首先因为公 ...
- FreeCodeCamp练习笔记
CSS样式表: 嵌套:body是最外层包围其他所有HTML元素(标签),其中的元素样式都可覆盖body的样式. 覆盖:同一元素有多个样式,位置靠后的样式覆盖位置靠前的样式. id:id与位置无关,可任 ...
- SQL中SET和SELECT赋值的区别
最近的项目写的SQL比较多,经常会用到对变量赋值,而我使用SET和SELECT都会达到效果. 那就有些迷惑,这两者有什么区别呢?什么时候哪该哪个呢? 经过网上的查询,及个人练习,总结两者有以下几点主要 ...
- mount img
直接挂载img文件有时会有 mount:您必须指定文件系统类型 的错误,但加 -t ext2 等类型还是没用. 这是因为img文件包含了mbr引导导致的问题.解决方法如下: $sudo fdis ...