Wie machen Sie Übergangseffekte mit dem Frame-Steuerelement in WPF?

Question

Ich dachte, das wäre einfach, aber ich denke nicht.

Ich habe 2 Seiten, die in meiner Rahmensteuerung laden. Ich möchte in der Lage sein, entweder einen schönen Folieffekt von einer Seite zur nächsten oder nur einen einfachen Einblendeffekt zu haben.

Ich kann nicht scheinen, das irgendwo im Internet zu finden.

Update 1 Die akzeptierte Antwort ist gut, aber ich fand eine noch bessere hier. http://www.japf.fr/2008/07/8/comment-page-1/

Update 2 Wenn Sie es glauben kann, fand ich eine noch bessere Lösung.

Answer 1

Es gibt ein ähnliches Problem, das hier diskutiert wird: Transition Fade Animation When Navigating To Page Mit der dort beschriebenen Technik können Sie \ jedes Bild verschieben, wenn eine neue Seite navigiert wird. Smth wie folgt aus:

XAML:

... 
<Frame Name = "frame" Navigating="frame_Navigating"> 
... 

Code:

... 
private bool      _allowDirectNavigation = false; 
private NavigatingCancelEventArgs _navArgs = null; 
private Duration     _duration = new Duration(TimeSpan.FromSeconds(1)); 
private double      _oldHeight = 0; 

private void frame_Navigating(object sender, NavigatingCancelEventArgs e) 
{ 
    if (Content!=null && !_allowDirectNavigation) 
    { 
     e.Cancel = true; 

     _navArgs = e; 
     _oldHeight = frame.ActualHeight; 

     DoubleAnimation animation0 = new DoubleAnimation(); 
     animation0.From = frame.ActualHeight; 
     animation0.To = 0; 
     animation0.Duration = _duration; 
     animation0.Completed += SlideCompleted; 
     frame.BeginAnimation(HeightProperty, animation0); 
    } 
    _allowDirectNavigation = false; 
} 

private void SlideCompleted(object sender, EventArgs e) 
{ 
    _allowDirectNavigation = true; 
    switch (_navArgs.NavigationMode) 
    { 
     case NavigationMode.New: 
      if (_navArgs.Uri == null) 
       frame.Navigate(_navArgs.Content); 
      else 
       frame.Navigate(_navArgs.Uri); 
      break; 
     case NavigationMode.Back: 
      frame.GoBack(); 
      break; 
     case NavigationMode.Forward: 
      frame.GoForward(); 
      break; 
     case NavigationMode.Refresh: 
      frame.Refresh(); 
      break; 
    } 

    Dispatcher.BeginInvoke(DispatcherPriority.Loaded, 
     (ThreadStart)delegate() 
     { 
      DoubleAnimation animation0 = new DoubleAnimation(); 
      animation0.From = 0; 
      animation0.To = _oldHeight; 
      animation0.Duration = _duration; 
      frame.BeginAnimation(HeightProperty, animation0); 
     }); 
} 
... 

hoffe, das hilft, sieht

Answer 2

Dies ist wahrscheinlich nicht die beste Antwort, aber es ist vielleicht hilfreich für Sie oder gibt Ihnen zumindest ein paar Ideen. In Silverlight habe ich diese Art des gleitenden Übergangseffekts zwischen den Seiten erreicht, indem ich das TransitioningContentControl aus dem Silverlight Toolkit verwende. Es ist ein Inhaltssteuerelement, mit dem Sie im Grunde genommen ein benutzerdefiniertes Storyboard in einem visuellen Zustand für einen Übergang zwischen dem alten und dem neuen Inhalt definieren können, wenn sich der Inhalt ändert. Es enthält auch einige Standardüberblendungen (Fade/Up/Down), wenn Sie sich nicht die Zeit nehmen möchten, ein benutzerdefiniertes Storyboard zu definieren.

Ich weiß, dass Sie mit WPF arbeiten und dass das TransitioningContentControl nicht in WPF oder WPF Toolkit verfügbar ist. Es ist jedoch nicht allzu schwierig, diese Kontrolle auf WPF zu portieren oder zumindest eine solche zu machen. Wenn Sie über die Quelle blicken, sieht es so aus, als ob sie machbar ist, wenn Sie Zeit haben und es sich um die Art von Kontrolle handelt, die Sie an anderen Stellen wiederverwenden können. Die source code is here für die Silverlight-Version und Jesse Liberty hat eine nice tutorial, die durch die Steuerung in Silverlight geht

Answer 3

Meine Antwort die verbesserte Version der Antwort von serge_gebunko gegeben ist.
Es gibt Ihnen die Schiebe links und rechts Effekt.

XAML

... 
<Frame Name = "MainFrame" Navigating="MainFrame_Navigating"> 
... 

C#

private void MainFrame_OnNavigating(object sender, NavigatingCancelEventArgs e) { 
       var ta = new ThicknessAnimation(); 
       ta.Duration = TimeSpan.FromSeconds(0.3); 
       ta.DecelerationRatio = 0.7; 
       ta.To = new Thickness(0 , 0 , 0 , 0); 
       if (e.NavigationMode == NavigationMode.New) {   
        ta.From = new Thickness(500, 0, 0, 0);             
       } 
       else if (e.NavigationMode == NavigationMode.Back) {     
        ta.From = new Thickness(0 , 0 , 500 , 0);            
       } 
       (e.Content as Page).BeginAnimation(MarginProperty , ta); 
      }