WindowsPhone下拉刷新控件 - PullRefreshListBox（二）

 

++++++++++++++++++++++++++++++++++++++++++

本文系本站原创,欢迎转载! 转载请注明出处:

http://blog.csdn.net/mr_raptor/article/details/7358226

++++++++++++++++++++++++++++++++++++++++++

前言

  最近一些时间有一些杂事，没有及时更新Blog，Sorry，现在将下拉刷新更新完。

 上一节讲了，下拉刷新的基本框架结构，现在我们在上节的基础上添加内容。

WindowsPhone下拉刷新控件 - PullRefreshListBox（一）       

在第一节中，解决了：Control选择问题和样式模板，本节主要内容包含：

  • 用户操作及距离计算问题
  • 刷新事件处理问题
  • 动画效果

思路：

获得点击Y坐标startY，在手指移动时将新的移动坐标currentY与startY对比，如果currentY - startY的值大于了一定的坐标值就设置刷新显示区，同时设置控件的依赖项属性，同时还开始动画效果。

1.  用户操作及距离计算问题

用户操作主要是重写了基类里的三个方法：OnManipulationCompleted，OnManipulationStarted，OnMouseMove。

  • OnManipulationCompleted：用于用户的手势行为结束时调用。
  • OnManipulationStarted：用于用户的手势行为开始时调用。
  • OnMouseMove：用于用户的手势行为持续变化时调用 。

通过OnManipulationStarted(ManipulationStartedEventArgs e)参数ManipulationStartedEventArgs 可以获得Y坐标点

[csharp] view plaincopy
  1.        protected override void OnManipulationStarted(ManipulationStartedEventArgs e)  
  2.        {  
  3.            base.OnManipulationStarted(e);  
  4.            startY = e.ManipulationOrigin.Y;  
  5. ...  

 

通过OnMouseMove(MouseEventArgs e)参数MouseEventArgs 可以获得当前相对参照控件的坐标点Y

[csharp] view plaincopy
  1.        protected override void OnMouseMove(MouseEventArgs e)  
  2.        {  
  3.            base.OnMouseMove(e);  
  4.            double currentY = e.GetPosition(this.ScrollViewer).Y;  
  5. ...  

在OnManipulationCompleted方法里将下拉显示关闭掉，同时关闭动画效果，修改依赖项属性 PullDownPanel.Visibility = Visibility.Collapsed;

具体代码如下：

[csharp] view plaincopy
  1. private double startY, endY;  
  2. private double scrolledOffset;  
  3. private bool isShowing = false;  
  4.   
  5. protected override void OnManipulationStarted(ManipulationStartedEventArgs e)  
  6.        {  
  7.            base.OnManipulationStarted(e);  
  8.            startY = e.ManipulationOrigin.Y;  
  9.            scrolledOffset = this.ScrollViewer.VerticalOffset;  
  10.            //Debug.WriteLine("OnManipulationStarted startY = " + startY + " scrolledY = " + scrolledOffset);  
  11.        }  
  12.   
  13.        protected override void OnMouseMove(MouseEventArgs e)  
  14.        {  
  15.            base.OnMouseMove(e);  
  16.            double currentY = e.GetPosition(this.ScrollViewer).Y;  
  17.            double offset = currentY - startY;  
  18.            if (scrolledOffset - offset < -30.0)  
  19.            {  
  20.                setVisible();  
  21.            }  
  22.            else  
  23.            {  
  24.                setInvisible();  
  25.            }  
  26.        }  
  27.   
  28.        private void setInvisible()  
  29.        {  
  30.            if (!isShowing)  
  31.                return;  
  32.            isShowing = false;  
  33.            //Debug.WriteLine("stop show");  
  34.            ShowAnimation.Stop();  
  35.            TransformAnimation.Stop();  
  36.            PullDownPanel.Visibility = Visibility.Collapsed;  
  37.        }  
  38.   
  39.        private void setVisible()  
  40.        {  
  41.            if (isShowing)  
  42.                return;  
  43.            isShowing = true;  
  44.            Debug.WriteLine("show");  
  45.            PullDownPanel.Visibility = Visibility.Visible;  
  46.            ShowAnimation.Begin();  
  47.            TransformAnimation.Begin();  
  48.   
  49.            DataRefreshedEventHandler handler = DataRefreshed;  
  50.            if (handler != null)  
  51.            {  
  52.                handler(this, null);  
  53.            }  
  54.        }  
[csharp] view plaincopy
  1. <p>        protected override void OnManipulationCompleted(ManipulationCompletedEventArgs e)  
  2.         {  
  3.             base.OnManipulationCompleted(e);  
  4.             endY = e.ManipulationOrigin.Y;  
  5.             //Debug.WriteLine("OnManipulationCompleted endY" + endY);</p><p>            setInvisible();  
  6.         }</p>  


这个时候编译一个工程会发现，我们的下拉能够被正常识别到，当Y方向拉动超过30像素，就会有显示下拉显示区内容。

但是，这时还没有动画效果，我们为它添加上动画效果，其中下拉显示区有淡进淡出的效果，然后，有一个转动的就箭头，表示正在刷新。

 

2.  添加动画效果

动画效果是发生在下拉时，所以我们要回去Generic.xaml样式模板里，在Grid.Resources中添加如下代码：

[html] view plaincopy
  1. <Setter Property="Template">  
  2.         <Setter.Value>  
  3.                 <ControlTemplate TargetType="local:PullRefreshListBox">  
  4.                     <Grid>  
  5.                         <Grid.Resources>  
  6.                             <Storyboard x:Name="showAnimation">  
  7.                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PullDownPanel">  
  8.                                     <EasingDoubleKeyFrame KeyTime="0" Value="0"/>  
  9.                                     <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1"/>  
  10.                                 </DoubleAnimationUsingKeyFrames>  
  11.                             </Storyboard>  
  12.                             <Storyboard x:Name="transformAnimation" RepeatBehavior="10x">  
  13.                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)"   
  14.                                            Storyboard.TargetName="RefreshImage" RepeatBehavior="Forever">  
  15.                                     <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="90"/>  
  16.                                     <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="180"/>  
  17.                                     <EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="270"/>  
  18.                                     <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="360"/>  
  19.                                 </DoubleAnimationUsingKeyFrames>  
  20.                             </Storyboard>  
  21.                         </Grid.Resources>  


其中，showAnimation动画为在0.8秒内其透明度由0到1从全透明到不透明，从而实现淡进淡出的效果，transformAnimation动画为小转轮在0.4秒里顺时针重复转动90度，实现转动效果。

由于我们要在下拉条件成立时，开启动画，因此要在OnApplyTemplate方法中得到两个动画的引用：

[csharp] view plaincopy
  1. public override void OnApplyTemplate()  
  2. {  
  3.    // the Animation of the Image and RefreshText  
  4.     TransformAnimation = this.GetTemplateChild(TransformAnimationName) as Storyboard;  
  5.     ShowAnimation = this.GetTemplateChild(ShowAnimationName) as Storyboard;  

这样，在setInvisible和setVisible方法里分别开启和关闭动画效果就可以了。

编译当前代码，再执行，会发现，下拉时，动画效果已经实现，但是下拉列表基本的点击事件不能使用了。

这是因为我们的下拉控件继承自ItemsControl控件，对于ItemsControl控件里的列表内容，要自己添加其列表项的点击行为。

 

3.  添加Item点击事件

当用户在列表中选择一个item时，我们希望将所有的Item都放到一个栈里，然后从Tap事件里找到被Tap的对象，然后从栈里遍历该对象，如果找到，就将SelectedItem与SelectedIndex设置为其对应的值，在其属性改变事件里响应点击行为。

在OnApplyTemplate方法里注册Tap 事件：

[csharp] view plaincopy
  1.    public override void OnApplyTemplate()  
  2.    {  
  3. // add the Event handler for the Tap action on ScrollViewer  
  4.        this.ScrollViewer.Tap += new EventHandler<GestureEventArgs>(ScrollViewer_Tap);  

Tap事件处理：

[csharp] view plaincopy
  1. void ScrollViewer_Tap(object sender, GestureEventArgs e)  
  2. {  
  3.     DependencyObject dpendObj = e.OriginalSource as DependencyObject;  
  4.     object obj;  
  5.   
  6.     // get StackPanel of the listbox  
  7.     StackPanel itemsStack = VisualTreeHelper.GetChild(_ItemsContainer, 0) as StackPanel;  
  8.     if ((obj = RetriveElementOfTree<ItemsPresenter>(dpendObj)) != null)  
  9.     {  
  10.         //ItemsPresenter itemsGroup = obj as ItemsPresenter;  
  11.   
  12.         if (childObjStack != null)  
  13.         {  
  14.             // pop StackPanel  
  15.             childObjStack.Pop();  
  16.             // the event Element  
  17.             obj = childObjStack.Pop();  
  18.         }  
  19.   
  20.         for(int i = 0; i < itemsStack.Children.Count; i++)  
  21.         {  
  22.             if (object.Equals(obj, itemsStack.Children[i]))  
  23.             {  
  24.                 // found the Taped obj  
  25.                 saveSelectedItem = itemsStack.Children[i];  
  26.                 SelectedIndex = i;  
  27.                 SelectedItem = saveSelectedItem;  
  28.                 OnSelectedItem(SelectedItem);  
  29.                 break;  
  30.             }  
  31.         }  
  32.         Debug.WriteLine("ScrollViewer_Tap::"+VisualTreeHelper.GetChildrenCount(itemsStack));  
  33.     }  
  34. }  

VisualTreeHelper.GetChild是个很牛B的东西，它可以从指定的控件里获得对应的子控件引用。
VisualTreeHelper.GetChildVisualTreeHelper.GetChild这里我们从装有所有Items的控件父控件_ItemsContainer里得到依次得到每一个子控件放到childObjStack栈里，如下图所示。

具体的入栈如下代码所示：

[csharp] view plaincopy
  1. private Stack<DependencyObject> childObjStack;  
  2. private object RetriveElementOfTree<T>(DependencyObject tree)  
  3. {  
  4.     if (childObjStack == null)  
  5.         childObjStack = new Stack<DependencyObject>();  
  6.     else  
  7.         childObjStack.Clear();  
  8.   
  9.     while (tree != null)  
  10.     {  
  11.         if (tree is T)  
  12.         {  
  13.             return tree;  
  14.         }  
  15.         childObjStack.Push(tree);  
  16.         tree = VisualTreeHelper.GetParent(tree);  
  17.     }  
  18.     return null;  
  19. }  

在获得了被点击的Item之后，主动回调SelectionChangedEvent事件，响应用户点击Item操作。

[csharp] view plaincopy
  1. private void OnSelectedItem(object obj)  
  2. {  
  3.     SelectionChangedEventHandler handler = SelectionChanged;  
  4.     if (handler != null)  
  5.     {  
  6.         _selectionList[0] = obj;  
  7.         // Call back user define Event  
  8.         handler(this, new SelectionChangedEventArgs(EmptyList, _selectionList));  
  9.     }  
  10. }  

现在来看我们的控件看似没有问题了，但是不要忘记了本控件的最初目的，即，用户下拉列表时，要去刷新其数据源，所以在用户下拉条件成立时，调用用户的回调方法。


 3.  添加下拉刷新处理事件


 首先添加一个代理和事件

[csharp] view plaincopy
  1. // user pull down the list delegate event  
  2. public delegate void DataRefreshedEventHandler(object sender, RoutedEventArgs e);  
  3. // pull down refresh the ItemSource Event  
  4. public event DataRefreshedEventHandler DataRefreshed;  

然后在setVisible()里回调用户注册的事件方法：

[csharp] view plaincopy
  1. private void setVisible()  
  2. {  
  3.     ...  
  4.     DataRefreshedEventHandler handler = DataRefreshed;  
  5.     if (handler != null)  
  6.     {  
  7.         handler(this, null);  
  8.     }  
  9. }  


至此，自定义下拉控件完篇，有问题请跟评论，作者第一时间看到回复。

++++++++++++++++++++++++++++++++++++++++++

本文系本站原创,欢迎转载! 转载请注明出处:

http://blog.csdn.net/mr_raptor/article/details/7358226

++++++++++++++++++++++++++++++++++++++++++

posted on 2012-03-16 08:49  little_raptor  阅读(1835)  评论(7)  编辑  收藏  举报
Copyright © 2024 little_raptor
Powered by .NET 8.0 on Kubernetes Powered by: 博客园