¿Cómo se hacen los efectos de transición usando el control Frame en WPF?

Pensé que esto sería fácil, pero supongo que no.¿Cómo se hacen los efectos de transición usando el control Frame en WPF?

Tengo 2 páginas que se cargan en mi control de marco. Quiero poder tener un bonito efecto de diapositiva de una página a otra o simplemente un simple efecto de fundido de entrada.

Parece que no puede encontrar esto en ningún lugar de los internets.

Actualización 1 La respuesta aceptada es buena, pero encontré una aún mejor aquí. http://www.japf.fr/2008/07/8/comment-page-1/

Actualización 2 Si usted no lo crea He encontrado una solución aún mejor.
http://fluidkit.codeplex.com/

Fuente

2010-01-25 Donny V.

Gracias por publicar las actualizaciones! – Gishu

Si está buscando una diapositiva horizontal en la que cada cuadro esté al lado del otro y se mueva hacia la izquierda y hacia la derecha, tendrá problemas con la fuente de navegación. Querrá hacer la transición de la página 1 hacia la izquierda y luego, cuando esté lista, hará la transición de la página 2 de derecha a izquierda. –

Hay un problema similar al que se discute aquí: Transition Fade Animation When Navigating To Page Usando la técnica descrita allí, puede deslizar \ mover el control de marco cada vez que se navega una página nueva. Smth así:

xaml:

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

código:

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

esperanza que esta ayuda, que se refiere a

Fuente

2010-01-26 04:58:02

+1 ¡Impresionante! Gracias! –

Cuando se usa un estilo "pesado" para elementos dentro de la página, la animación se llena. ¿Existen algunas mejores prácticas para que funcione más rápido? (Como renderizarlo en la GPU o tomar una captura de pantalla en tiempo de ejecución y animar la imagen en lugar de todos los elementos, etc.) –

Trabajando pero necesita cambiar la condición if. en lugar de solo contenido, tiene que ser frame.Content –

Probablemente esta no sea la mejor respuesta, pero puede ser útil para usted o al menos darle algunas ideas. En Silverlight, he logrado ese tipo de efecto de transición deslizante entre las páginas usando TransitioningContentControl del Silverlight Toolkit. Es un control de contenido que básicamente le permite definir un guión gráfico personalizado en un estado visual para una transición entre el contenido nuevo y el anterior siempre que el contenido cambie. También incluye algunas transiciones predeterminadas (fade/up/down) si no desea tomarse el tiempo para definir un guión gráfico personalizado.

Me doy cuenta de que está trabajando con WPF y que TransitioningContentControl no está disponible en WPF ni en WPF Toolkit. Sin embargo, puede que no sea demasiado difícil transferir este control a WPF o al menos hacer uno que haga algo similar. Al echar un vistazo a la fuente, parece que puede ser factible si tiene tiempo y es el tipo de control que puede reutilizar en otros lugares.

El source code is here para la versión Silverlight y Jesse Liberty tiene un nice tutorial que se desplaza utilizando el control en Silverlight.

Fuente

2010-01-26 04:53:19

Me encontré con ese método, pero desafortunadamente no tengo tiempo para portar el código. –

Debe eliminar el tutorial de jesse liberty. No sé lo que sucede, pero ahora es inútil. –

Así 'TransitioningContentControl' proporciona el efecto deseado que yo quería. Mi compañía ya compró los controles Telerik WPF y su biblioteca tiene ese control disponible. ¡Gracias por la sugerencia de ese control! –

Mi respuesta es la versión mejorada de la respuesta dada por serge_gebunko.
Le da el efecto deslizante a la izquierda y a la derecha.

XAML

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

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

Fuente

2017-04-10 08:42:49

¿Cómo se hacen los efectos de transición usando el control Frame en WPF?

Respuesta

Cuestiones relacionadas