Question

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

Answer 1

您指的是像应用程序一样的照片库吗？根据{{3}}

的某些部分，我试图在不久前制作一个

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

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

添加一个手势监听器，定义拖动开始，拖动增量和拖动已完成事件的事件

<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();
    }   
}

动画的扩展方法，这是为Tags分配值，而不是最好的方法，特别是如果你使用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();
    }
}

单页图像过渡效果

1 个答案: