windows-phone-7 - 单页图片过渡效果

Question

在我的应用程序中，我在 UI 上有一个图像，当用户在图像上滑动时，我会更新“image.Source”属性。所以图像得到更新，但我想显示一个与 windows phone 图片集线器相同的动画。我在互联网上看到了不同的教程，但它们是关于不同页面之间的转换。我只想在不离开此页面的情况下显示过渡效果。

Answer 1

您是指像应用程序这样的照片库吗？不久前，我尝试根据此处教程的某些部分制作一个

本质上，您可以使用作为 Windows Phone 工具包一部分提供的 GestureListener 服务。还有其他几种方法可以做到这一点，但这是我采用的方法之一（最后，我得到了 Telerik 控件工具包并使用了他们的图像库控件）。

1. 在 XAML 中创建边框元素
2. 将背景图片设置为图库中的第一张图片

3. 添加手势监听器，为拖动开始、拖动增量和拖动完成事件定义事件

   <Border x:Name="imgContainer" VerticalAlignment="Center" Height="500" Width="480">
   <Border.Background>
   <ImageBrush ImageSource="{Binding CurrentPhotoSource}"></ImageBrush>
   </Border.Background>
   <toolkit:GestureService.GestureListener>
   <toolkit:GestureListener
   DragStarted="GestureDragStarted"
   DragDelta="GestureDragDelta"
   DragCompleted="GestureDragCompleted"/>
   </toolkit:GestureService.GestureListener>
   </Border>
   
   
   private void GestureDragStarted(object sender, DragStartedGestureEventArgs e)
   {
       //initialize the drag
      var fe = sender as FrameworkElement;
      fe.SetHorizontalOffset(0);  
   }
   
   
   
   private void GestureDragDelta(object sender, DragDeltaGestureEventArgs e)
   {
       // handle the drag to offset the element
       var fe = sender as FrameworkElement;
       double offset = fe.GetHorizontalOffset().Value + e.HorizontalChange;
       fe.SetHorizontalOffset(offset);
   }
   
   
   
   private void GestureDragCompleted(object sender, DragCompletedGestureEventArgs e)
   {
       var fe = sender as FrameworkElement;
   
       var trans = fe.GetHorizontalOffset().Transform;
   
       trans.Animate(trans.X, 0, TranslateTransform.XProperty, 300, 0, new BounceEase()
       {
           Bounciness = 25,
           Bounces = 10
       });
   
       if (e.HorizontalChange <= 0)
       {
           //This is where you set the next image in the gallery.
           //e.g 
           // imgContainer.ImageSource = new BitmapImage(new Uri("your image url"))
           //this.ViewModel.SetNext();
       }
       else
       {
           //This is where you set the previous image in the gallery
           //this.ViewModel.SetPrevious();
       }   
   }
   

动画的扩展方法，这是为标签分配值，不是最好的方法，尤其是在您使用 mvvm 时，但它是一个让您入门的工作示例。

 public static class Felements
{
    public static void SetHorizontalOffset(this FrameworkElement fe, double offset)
    {
        var trans = new TranslateTransform()
        {
            X = offset
        };
        fe.RenderTransform = trans;

        fe.Tag = new Offset()
        {
            Value = offset,
            Transform = trans
        };
    }

    public static Offset GetHorizontalOffset(this FrameworkElement fe)
    {
        return fe.Tag == null ? new Offset() : (Offset)fe.Tag;
    }

    public struct Offset
    {
        public double Value { get; set; }
        public TranslateTransform Transform { get; set; }
    }

    public static void Animate(this DependencyObject target, double from, double to,
                      object propertyPath, int duration, int startTime,
                      IEasingFunction easing = null, Action completed = null)
    {
        if (easing == null)
        {
            easing = new SineEase();
        }

        var db = new DoubleAnimation();
        db.To = to;
        db.From = from;
        db.EasingFunction = easing;
        db.Duration = TimeSpan.FromMilliseconds(duration);
        Storyboard.SetTarget(db, target);
        Storyboard.SetTargetProperty(db, new PropertyPath(propertyPath));

        var sb = new Storyboard();
        sb.BeginTime = TimeSpan.FromMilliseconds(startTime);

        if (completed != null)
        {
            sb.Completed += (s, e) => completed();
        }

        sb.Children.Add(db);
        sb.Begin();
    }
}