WindowsPhone下拉刷新控件 - PullRefreshListBox
前言
前几天做一个类似微博的项目,想用下Android和 Iphone里的下拉刷新控件,但是从网上找了挺长时间,没有,有一个博客园的,但是没有给出代码,所以只能自己去试着写一写了,正好,前几篇文章讲完, 讲的是关于自定义控件的,因此,将WP7下的自定义下拉控件拿出来分析下,如果您觉得不错,请顶一下,要源码的朋友,下面跟上邮箱,作者在第一时间发送给 你。
成果图:
说明:Demo中是用了上下两个的下拉刷新控件,上面的数字下拉刷新控件是将ListItem静态绑定上的,下面的控件通过绑定机制绑定到对象上去的。
图一,二是点击不同的项,都可以得到项索引或项内容。
图三,是当用户下拉列表时,上方显示下拉刷新动画效果和提示文字。
图四,是下拉时,下拉事件打印出的字符串,说明可以回调用户事件方法。
图一 ListItem静态数据绑定,点击效果
图二 动态对象数据绑定,点击效果
图三,下拉时,下拉动画及提示显示效果
图四,下拉时,下拉事件回调输出
原创地址:http://blog.csdn.net/mr_raptor/article/details/7259652
本控件主要实现了以下功能:
- 支持动画效果的下拉刷新
- 支持动态绑定数据源
- 支持静态ListItem绑定
- 支持ListBox自定义ItemTemplate模板
思路分析:
基本功能:
如果想让该控件支持下拉刷新列表,那么就意味在列表的最上部要添加一个Control,在用户没有下拉列表时,该Control不显示,当用户下拉列表到一定的距离时,该Control显示出来,并且有动画效果。
- 解决Control选择问题
- 解决用户操作及距离计算问题
- 动画效果添加
复杂功能:
我们还要让我们的下拉刷新控件支持ListItem的自定义,否则只能显示单一的方式,因此,还要考虑和使用自定义模板的问题,除此之后,还有最重要的一个,当用户下瓣列表时,必需要有一个事件处理,用来回调用户定义方法来刷新数据。
- 解决ListItem模板自定义问题
- 解决刷新事件处理问题
为解决上述两部分,本博文分为两节分别介绍,内容不可能太详细,适合有一定基础的朋友,让我们开始吧。
原创地址:http://blog.csdn.net/mr_raptor/article/details/7259652
控件类型选择
要实现下拉列表刷新功能,那么控件里必然要有显示数据的列表,根据 WindowsPhone自定义控件详解(一)里分析可知,ListBox列表控件是继承自ItemsControl,那么,我们就的控件肯定也是继承自 ItemsControl或ListBox了,但是继承ListBox,通过自定义其Template,不太合适,因为那样无法保证刷新显示区效果,所以 我选择继承ItemsControl。
结构如下:
PullRefreshListBox.cs:
public class PullRefreshListBox:ItemsControl{ public PullRefreshListBox() { this.DefaultStyleKey = typeof(PullRefreshListBox); } DependencyProperty SelectedItem{}; DependencyProperty SelectedIndex{}; DependencyProperty RefreshText{}; public override void OnApplyTemplate() { ... } }其中,加了三个依赖属性:SelectedItem, SelectedIndex, RefreshText,分别表示,当前列表中选择的Item项, 索引值,下拉刷新显示文字。
在OnApplyTemplate里,得到对应的样式文件里的元素引用。
原创地址:http://blog.csdn.net/mr_raptor/article/details/7259652
模式模板:
模式模板里主要用来定义下拉刷新控件里的布局,根据 WindowsPhone自定义控件详解(二)中基础可知,修改控件的布局应该是对其Template属性进行自定义。
而在下拉列表上部,要有一个用来装动画图片,以及显示的”正在刷新“等文字的下拉刷新效果区域,我用下图来表示我的布局。
下拉显示容器和列表显示容器我放到了一个Grid里,上面的下拉容器中又分为左和右 两部分,我用横向布局StackPanel来放置,另外,由于下拉显示容器在默认下是不显示的,设置其隐藏属性,当其显示 时应该在列表容器上面,所以注意它们的顺序。
PullDownPanel:下拉容器StackPanel
RefreshImage:动画图片Image
RefreshTextBlock:提示文字TextBlock
列表容器:ScrollViewer
列表项:ItemsPresenter
对应的样式文件里,结构如下:
Generic.xaml
<Style TargetType="local:PullRefreshListBox"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="local:PullRefreshListBox"> <Grid> <ScrollViewer x:Name="ScrollViewer" <ItemsPresenter x:Name="ItemsPresenter"/> </ScrollViewer> <StackPanel x:Name="PullDownPanel" Visibility="Collapsed" <Image x:Name="RefreshImage" Width="32" Height="32" Source="/PullRefreshListBox;component/Images/sync.png"> </Image> <TextBlock x:Name="RefreshTextBlock" Text="{TemplateBinding RefreshText}"></TextBlock> </StackPanel> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>样式文件里定义了元素,所以在代码文件PullRefreshListBox.cs中的OnApplyTemplate方法里添加如下代码,用来得到这些元素的引用:
// PullDown Panel Container PullDownPanel = this.GetTemplateChild("PullDownPanel") as StackPanel; RefreshTextBlock = this.GetTemplateChild("RefreshTextBlock") as TextBlock; // The List ScrollViewer ScrollViewer = this.GetTemplateChild("ScrollViewer") as ScrollViewer; // The List Data items display Presenter _ItemsContainer = this.GetTemplateChild(ItemsPresenterName) as ItemsPresenter;出处:http://blog.csdn.net/mr_raptor/article/details/7259652