在單個頁面上的圖像轉換效果

Question

在我的應用程序中，我在UI上有一個圖像，當用戶在圖像上滑動時，我更新「image.Source」屬性。所以圖像得到更新，但我想顯示一個動畫相同的Windows手機圖片集線器。我看到互聯網上的不同教程，但他們是關於不同頁面之間的轉換。我只想在不離開此頁面的情況下顯示過渡效果。

Answer 1

您是指像應用程序一樣的照片庫？基於tutorial here

的某些部分，我試圖在不久之前創建一個基本上可以使用作爲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(); 
    } 
}