Comment faites-vous des effets de transition en utilisant le contrôle Frame dans WPF?

Question

Je pensais que ce serait facile, mais je suppose que non.

J'ai 2 pages qui se chargent dans mon contrôle de trame. Je veux être en mesure d'avoir un bon effet de diapositive d'une page à l'autre ou juste un simple effet de fondu. Impossible de trouver cela n'importe où sur les internets.

Mise à jour 1 La réponse acceptée est bonne, mais j'en ai trouvé une encore meilleure ici. http://www.japf.fr/2008/07/8/comment-page-1/

Mise à jour 2 Si vous pouvez croire que je trouve une solution encore mieux.
http://fluidkit.codeplex.com/

Answer 1

Il existe un problème similaire discuté ici: Transition Fade Animation When Navigating To Page En utilisant la technique décrite ici, vous pouvez faire glisser votre commande de cadre chaque fois qu'une nouvelle page est parcourue. Smth comme ceci:

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

espérons que cette aide, ce qui est

Answer 2

Ce n'est probablement pas la meilleure réponse, mais cela peut vous être utile ou au moins vous donner quelques idées. Dans Silverlight, j'ai obtenu ce type d'effet de transition glissante entre les pages en utilisant le TransitioningContentControl du Silverlight Toolkit. C'est un contrôle de contenu qui vous permet essentiellement de définir un storyboard personnalisé dans un état visuel pour une transition entre l'ancien et le nouveau contenu chaque fois que le contenu change. Il inclut également certaines transitions par défaut (fondu/haut/bas) si vous ne voulez pas prendre le temps de définir un storyboard personnalisé.

Je me rends compte que vous travaillez avec WPF et que le contrôle TransitioningContentControl n'est pas disponible dans WPF ou dans la boîte à outils WPF. Cependant, il n'est peut-être pas trop difficile de porter ce contrôle sur WPF ou du moins d'en faire un qui fasse quelque chose de similaire. Jetant un coup d'œil sur la source, il semble que ce soit faisable si vous avez le temps et c'est le type de contrôle que vous pouvez réutiliser ailleurs.

Le source code is here pour la version Silverlight et Jesse Liberty a un nice tutorial qui fonctionne en utilisant le contrôle dans Silverlight.

Answer 3

Ma réponse est la version améliorée de la réponse donnée par serge_gebunko.
Il vous donne le coulissant à gauche et à droite effet.

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