WindowsPhone下拉刷新控件 - PullRefreshListBox

openkk 13年前

前言

 

前几天做一个类似微博的项目,想用下Android和 Iphone里的下拉刷新控件,但是从网上找了挺长时间,没有,有一个博客园的,但是没有给出代码,所以只能自己去试着写一写了,正好,前几篇文章讲完, 讲的是关于自定义控件的,因此,将WP7下的自定义下拉控件拿出来分析下,如果您觉得不错,请顶一下,要源码的朋友,下面跟上邮箱,作者在第一时间发送给 你。

 

成果图:

说明:Demo中是用了上下两个的下拉刷新控件,上面的数字下拉刷新控件是将ListItem静态绑定上的,下面的控件通过绑定机制绑定到对象上去的。

图一,二是点击不同的项,都可以得到项索引或项内容。

图三,是当用户下拉列表时,上方显示下拉刷新动画效果和提示文字。

图四,是下拉时,下拉事件打印出的字符串,说明可以回调用户事件方法。

WindowsPhone下拉刷新控件 - PullRefreshListBox  

图一 ListItem静态数据绑定,点击效果

WindowsPhone下拉刷新控件 - PullRefreshListBox

图二 动态对象数据绑定,点击效果

WindowsPhone下拉刷新控件 - PullRefreshListBox

图三,下拉时,下拉动画及提示显示效果

 

WindowsPhone下拉刷新控件 - PullRefreshListBox

图四,下拉时,下拉事件回调输出

原创地址:http://blog.csdn.net/mr_raptor/article/details/7259652

本控件主要实现了以下功能:

  1. 支持动画效果的下拉刷新
  2. 支持动态绑定数据源
  3. 支持静态ListItem绑定
  4. 支持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属性进行自定义。

而在下拉列表上部,要有一个用来装动画图片,以及显示的”正在刷新“等文字的下拉刷新效果区域,我用下图来表示我的布局。

WindowsPhone下拉刷新控件 - PullRefreshListBox

下拉显示容器和列表显示容器我放到了一个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