한 페이지에 이미지 전환 효과

Question

내 응용 프로그램에서 UI에 이미지가 있고 사용자가 이미지를 스 와이프하면 "image.Source"속성이 업데이트됩니다. 그래서 이미지가 업데이트되지만 Windows phone picture hub와 같은 애니메이션을 보여주고 싶습니다. 인터넷에서 다른 튜토리얼을 보았지만 다른 페이지 간의 전환에 관한 것입니다. 이 페이지를 벗어나지 않고 전환 효과를 표시하고 싶습니다.

Answer 1

응용 프로그램과 같은 사진 갤러리를 말하고 있습니까? tutorial here

본질적으로 Windows Phone Toolkit의 일부로 제공되는 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(); 
    } 
}