wp win8开发:scrollview滑动动画效果

产品需求，暂别ios开发，着手win8开发。

说说这个scrollview滑动的动画效果吧，郁闷的是它不像ios中的uiscrollview提供了很多api，动画都集成的很好

我在做一个内容展示页面的时候，参考zarker在处理，所以不得不让scrollview滑动起来，在网上看了一些人写的，很是郁闷，估计都是抄袭一个人的，我也顺手抄了过来，反复修改调试，今天终于跑起来了，下面提供一下我修改后的代码：



圈起来的detailpage就是要处理的page。。。。

在这个page的cs文件中上代码：

   /// <summary>
        /// ////////////////////////////////////////////////////////////////////////////////////
        /// </summary>
        public static DependencyProperty CurrentVerticalOffsetProperty =
            DependencyProperty.Register("CurrentVerticalOffset",
            typeof(double),
            typeof(DetailPage),
            new PropertyMetadata(0, new PropertyChangedCallback(OnVerticalChanged))
        );
        public static DependencyProperty CurrentHorizontalOffsetProperty =
            DependencyProperty.Register("CurrentHorizontalOffset",
            typeof(double),
            typeof(DetailPage),
            new PropertyMetadata(0, new PropertyChangedCallback(OnHorizontalChanged))
        );
        public static DependencyProperty CurrentZoomFactorProperty =
            DependencyProperty.Register("CurrentZoomFactor",
            typeof(float),
            typeof(DetailPage),
            new PropertyMetadata(0, new PropertyChangedCallback(OnCurrentZoomFactor))
        );

        public double CurrentVerticalOffset
        {
            get
            {
                return Convert.ToDouble(this.GetValue(CurrentVerticalOffsetProperty));
            }
            set
            {
                this.SetValue(CurrentVerticalOffsetProperty, value);
            }
        }

       private static void OnVerticalChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            DetailPage viewer = d as DetailPage;
            double dTop = Convert.ToDouble(e.NewValue);
            viewer.sc.ScrollToVerticalOffset(dTop * viewer.sc.ZoomFactor);
        }

       public double CurrentHorizontalOffset
       {
           get
           {
               return Convert.ToDouble(this.GetValue(CurrentHorizontalOffsetProperty));
           }
           set
           {
               this.SetValue(CurrentHorizontalOffsetProperty, value);
           }
       }

        private static void OnHorizontalChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            DetailPage viewer = d as DetailPage;
            double dLeft = Convert.ToDouble(e.NewValue);
            viewer.sc.ScrollToHorizontalOffset(dLeft * viewer.sc.ZoomFactor);
        }

        public float CurrentZoomFactor
        {
            get
            {
                return Convert.ToSingle(this.GetValue(CurrentZoomFactorProperty));
            }
            set
            {
                this.SetValue(CurrentZoomFactorProperty, value);
            }
        }

        private static void OnCurrentZoomFactor(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            try
            {
                DetailPage viewer = d as DetailPage;
                float zoomFactor = Convert.ToSingle(e.NewValue);
                viewer.sc.ZoomToFactor(zoomFactor);
            }
            catch
            {
                System.Diagnostics.Debug.WriteLine(string.Format(@"exception:zoomFactor"));
            }
        }

        private void ScrollToRect(Rect rect)
        {
            float curZoomFactor = this.sc.ZoomFactor;
            float desZoomFactor = (float)Math.Min(sc.ViewportWidth / rect.Width, sc.ViewportHeight / rect.Height);

            double curHorizontalOffsetInContent = sc.HorizontalOffset / sc.ZoomFactor;
            double curVerticalOffsetInContent = sc.VerticalOffset / sc.ZoomFactor;



            this.CurrentVerticalOffsetAnimation.From = curVerticalOffsetInContent;
            this.CurrentVerticalOffsetAnimation.To = rect.Top - (sc.ViewportHeight / desZoomFactor - rect.Height) / 2;

            this.CurrentHorizontalOffsetAnimation.From = sc.HorizontalOffset;
            this.CurrentHorizontalOffsetAnimation.To = rect.X;

            this.ZoomFactorAnimation.From = curZoomFactor;
            this.ZoomFactorAnimation.To = desZoomFactor;



            ZoomToFaceStoryBoard.Begin();

        } 



       //在初始化方法中添加 监听view滑动事件

         itemListV1.ManipulationMode = ManipulationModes.TranslateX | ManipulationModes.TranslateY;
         //itemListV1.ManipulationStarted += OnManipulationStarted;
         itemListV1.ManipulationCompleted += OnManipulationCompleted;

        public void OnManipulationCompleted(Object sender, ManipulationCompletedRoutedEventArgs e)
        {
            //System.Diagnostics.Debug.WriteLine("123");
            int direction = 0;

            ScrollViewer viewer = sc;
            if (viewer == null)
                return;

            double offset = sc.HorizontalOffset;
           

            ManipulationVelocities velocities = e.Velocities;
            Point point = velocities.Linear;

            if (point.X < 0)
            {
                System.Diagnostics.Debug.WriteLine("Swipe left");
                direction = (int)XhxwWin8.Constants.InfoConstants.SWIPE_DIRECTION_TYPE.SWIPE_DIRECTION_LEFT;

            }
            else
            {
                System.Diagnostics.Debug.WriteLine("Swipe Right");
                direction = (int)XhxwWin8.Constants.InfoConstants.SWIPE_DIRECTION_TYPE.SWIPE_DIRECTION_RIGHT;

           }   

            if (direction == (int)XhxwWin8.Constants.InfoConstants.SWIPE_DIRECTION_TYPE.SWIPE_DIRECTION_LEFT)
            {

                if (offset != viewer.ScrollableWidth )
                {
                    offset = offset + viewer.ViewportWidth;
                    ScrollToRect(new Rect(offset, 0, viewer.ViewportWidth, viewer.ViewportHeight));
                }

               

            }
            else if (direction == (int)XhxwWin8.Constants.InfoConstants.SWIPE_DIRECTION_TYPE.SWIPE_DIRECTION_RIGHT)
            {

                if (offset != 0.0)
                {
                    offset = offset - viewer.ViewportWidth;
                    ScrollToRect(new Rect(offset, 0, viewer.ViewportWidth, viewer.ViewportHeight));
                }
               
            }

          
        }



中的提一下这个方法OnManipulationCompleted，他是处理滑动事件时的方法，里面我顺便判断了一下滑动方向，然后处理一下scrollview的offset，然后调用 ScrollToRect这个方法，ScrollToRect是处理动画属性，并且运行动画效果。



下面我上一下xaml中的代码部分：

<Grid.Resources>

                <Storyboard x:Name="ZoomToFaceStoryBoard" >
                    <DoubleAnimation x:Name="ZoomFactorAnimation" 
                                 EnableDependentAnimation ="True" 
                                 Storyboard.TargetName="pageRoot"  
                                 Storyboard.TargetProperty="CurrentZoomFactor"  
                                 Duration="0:0:0.5"></DoubleAnimation>
                    <DoubleAnimation x:Name="CurrentHorizontalOffsetAnimation" 
                                 EnableDependentAnimation ="True" 
                                 Storyboard.TargetName="pageRoot"  
                                 Storyboard.TargetProperty="CurrentHorizontalOffset"  
                                 Duration="0:0:0.5"></DoubleAnimation>
                    <DoubleAnimation x:Name="CurrentVerticalOffsetAnimation" 
                                 EnableDependentAnimation ="True" 
                                 Storyboard.TargetName="pageRoot"  
                                 Storyboard.TargetProperty="CurrentVerticalOffset"  
                                 Duration="0:0:0.5"></DoubleAnimation>

                </Storyboard>
            </Grid.Resources>

上面是在我的布局grid中定义的动画



<ScrollViewer x:Name="sc"
                          Padding="60,0,60,0"
                          Background="Transparent"
                          Grid.Row="1"
                          IsHitTestVisible="True"
                          HorizontalScrollBarVisibility="Hidden"
                          HorizontalScrollMode="Enabled"      
                          ScrollViewer.IsHorizontalScrollChainingEnabled="True"
                          ScrollViewer.IsDeferredScrollingEnabled="True"
                          ScrollViewer.IsVerticalScrollChainingEnabled="False"
                          ScrollViewer.VerticalScrollMode="Disabled"
                          ScrollViewer.VerticalScrollBarVisibility="Disabled"
                          ManipulationMode="All"
                          ManipulationCompleted="sc_ManipulationCompleted"
                          >

//此处我添加的是<common:RichTextColumns x:Name="richTextColumns"> </common:RichTextColumns>
</ScrollViewer>



我也是初学c#以及win8开发，上面功能只是为了达到实现的目的，没有仔细封装，见谅...