标签：windows phone 动画 slide
方案1： 利用 Panorama或者 pivotpage
1. 重写panorama page, 使其达到全屏
public class PanoramaFullScreen : Panorama {
protected override System.Windows.Size MeasureOverride(System.Windows.Size availableSize)
{
availableSize.Width += 48;
return base.MeasureOverride(availableSize);
}
}
2. 去掉 title 和 header，调整好margin
<phone:PanoramaItem>
<Grid Canvas.ZIndex="-1" Margin="-66,-40,-55,0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="591">
<Image Stretch="Fill" Source="/Images/screen1.jpg" VerticalAlignment ="Stretch"
HorizontalAlignment="Stretch" Margin="54,0,54,0"/>
</Grid>
</phone:PanoramaItem>3. 在codebehind 中控制页面跳转
private TouchPoint first;
private const int DetectRightGesture = 20;
private int startIndex = 0;
private readonly int endIndex;
public WhatsNewView()
{
InitializeComponent();
endIndex = MyStartScreen.Items.Count - 1;
MyStartScreen.IsHitTestVisible = false;
MyStartScreen.IsEnabled = false;
Touch.FrameReported += Touch_FrameReported;
TouchPanel.EnabledGestures = GestureType.HorizontalDrag;
}
private void Touch_FrameReported(object sender, TouchFrameEventArgs e)
{
try
{
TouchPoint mainTouch = e.GetPrimaryTouchPoint(this);
if (mainTouch.Action == TouchAction.Down)
first = mainTouch;
else if (mainTouch.Action == TouchAction.Up && TouchPanel.IsGestureAvailable)
{
if (mainTouch.Position.X - first.Position.X < -DetectRightGesture)
{
if (startIndex < endIndex)
{
MyStartScreen.SlideToPage(startIndex + 1, SlideTransitionMode.SlideLeftFadeOut);
startIndex++;
}
else
{
NavigateToNextPage();
}
}
else if (mainTouch.Position.X - first.Position.X > DetectRightGesture)
{
if (startIndex > 0)
{
MyStartScreen.SlideToPage(startIndex - 1, SlideTransitionMode.SlideRightFadeOut);
startIndex--;
}
}
}
}
catch
{
}
}
private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
NavigateToNextPage();
}
private void NavigateToNextPage()
{
NavigationService.Navigate(new Uri("/Views/LoginPage.xaml", UriKind.Relative));
}
protected override void OnNavigatedFrom(NavigationEventArgs e)
{
while (NavigationService.BackStack.Any())
{
NavigationService.RemoveBackEntry();
}
}
4. 补充： 拓展panorama 方法，使其跳转附带动画
public static void SlideToPage(this Panorama self, int item, SlideTransitionMode slideMode)
{
var slideTransition = new SlideTransition { };
slideTransition.Mode = slideMode;
ITransition transition = slideTransition.GetTransition(self);
transition.Completed += delegate
{
self.DefaultItem = self.Items[item];
transition.Stop();
};
transition.Begin();
}
不足：
SlideTransitionMode SlideTransitionMode支持动画有限，一般达不到预期效果
方案2：
将所有图片水平排列，根据手势通过左右偏移来控制显示
<Canvas>
<StackPanel x:Name="Slider"
Canvas.Left="0"
Orientation="Horizontal">
<Image Source="/Images/screen1.jpg"
Stretch ="UniformToFill"/>
<Image Source="/Images/screen2.jpg"
Stretch ="UniformToFill" />
<Image Source="/Images/screen3.jpg"
Stretch ="UniformToFill" />
</StackPanel>
</Canvas> public static readonly DependencyProperty SlidePageIndexProperty =
DependencyProperty.Register("SlidePageIndex", typeof(int), typeof(StartScreenView), null);
public int SlidePageIndex
{
get { return (int)GetValue(SlidePageIndexProperty); }
set { SetValue(SlidePageIndexProperty, value); }
}偏移量根据不同设备决定
_uniformImageWidth = (int)Application.Current.Host.Content.ActualWidth;
手势控制
Touch.FrameReported += Touch_FrameReported;
TouchPanel.EnabledGestures = GestureType.HorizontalDrag; private void Touch_FrameReported(object sender, TouchFrameEventArgs e)
{
try
{
TouchPoint mainTouch = e.GetPrimaryTouchPoint(this);
if (mainTouch.Action == TouchAction.Down)
first = mainTouch;
else if (mainTouch.Action == TouchAction.Up && TouchPanel.IsGestureAvailable)
{
if (mainTouch.Position.X - first.Position.X < -DetectRightGesture)
{
if (SlidePageIndex == MaxSlidePageCount - 1)
{
NavigateToLoginPage();
}
SlidePageIndex++;
Slide();
}
else if (mainTouch.Position.X - first.Position.X > DetectRightGesture)
{
if (SlidePageIndex == 0) return;
SlidePageIndex--;
Slide();
}
}
}
catch
{
}
}
滑动逻辑
private void Slide()
{
var storyboard = new Storyboard();
var ani = new DoubleAnimation();
ani.To = SlidePageIndex * -_uniformImageWidth;
ani.Duration = TimeSpan.FromSeconds(1.0f);
ani.EasingFunction = new ElasticEase() { EasingMode = EasingMode.EaseInOut, Oscillations = 0 };
Storyboard.SetTarget(ani, this.Slider);
Storyboard.SetTargetProperty(ani, new PropertyPath("(Canvas.Left)"));
storyboard.Children.Add(ani);
storyboard.Begin();
}此页面不可以通过back键导航
protected override void OnNavigatedFrom(NavigationEventArgs e)
{
while (NavigationService.BackStack.Any())
{
NavigationService.RemoveBackEntry();
}
}标签：windows phone 动画 slide
原文地址：http://blog.csdn.net/louith/article/details/41725887
