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开发，上面功能只是为了达到实现的目的，没有仔细封装，见谅...