Transiciones de página

  • Artículo

Las transiciones de página navegan por los usuarios entre las páginas de una aplicación y proporcionan comentarios como relación entre las páginas. Las transiciones de página ayudan a los usuarios a comprender si están en la parte superior de una jerarquía de navegación, mover entre páginas del mismo nivel o navegar más profundamente a la jerarquía de páginas.

Se proporcionan dos animaciones diferentes para la navegación entre páginas de una aplicación, actualización de página y Obtención de detalles, y se representan mediante subclases de NavigationTransitionInfo.

Ejemplos

WinUI 2 Gallery
Galería de WinUI

Si tiene instalada la aplicación Galería de WinUI 2 , haga clic aquí para abrir la aplicación y ver Transiciones de página en acción.

Actualización de página

La actualización de página es una combinación de una animación de deslizar hacia arriba y una atenuación en animación para el contenido entrante. Use la actualización de página cuando el usuario se lleva a la parte superior de una pila de navegación, como navegar entre pestañas o elementos de navegación izquierdo.

La sensación deseada es que el usuario ha empezado.

animación de actualización de página

La animación de actualización de página se representa mediante entranceNavigationTransitionInfoClass.

// Explicitly play the page refresh animation
myFrame.Navigate(typeof(Page2), null, new EntranceNavigationTransitionInfo());

Nota: Un marco usa automáticamente NavigationThemeTransition para animar la navegación entre dos páginas. De forma predeterminada, la animación es la actualización de página.

Detalles

Use la obtención de detalles cuando los usuarios naveguen más a una aplicación, como mostrar más información después de seleccionar un elemento.

La sensación deseada es que el usuario ha profundizado en la aplicación.

animación de obtención de detalles

La animación de obtención de detalles se representa mediante la clase DrillInNavigationTransitionInfo .

// Play the drill in animation
myFrame.Navigate(typeof(Page2), null, new DrillInNavigationTransitionInfo());

Diapositiva horizontal

Use la diapositiva horizontal para mostrar que las páginas del mismo nivel aparecen junto entre sí. El control NavigationView usa automáticamente esta animación para la navegación superior, pero si está creando su propia experiencia de navegación horizontal, puede implementar la diapositiva horizontal con SlideNavigationTransitionInfo.

La sensación deseada es que el usuario navega entre las páginas que están al lado entre sí.

// Navigate to the right, ie. from LeftPage to RightPage
myFrame.Navigate(typeof(RightPage), null, new SlideNavigationTransitionInfo() { Effect = SlideNavigationTransitionEffect.FromRight } );

// Navigate to the left, ie. from RightPage to LeftPage
myFrame.Navigate(typeof(LeftPage), null, new SlideNavigationTransitionInfo() { Effect = SlideNavigationTransitionEffect.FromLeft } );

Suprimir

Para evitar reproducir cualquier animación durante la navegación, use SuppressNavigationTransitionInfo en lugar de otros subtipos NavigationTransitionInfo .

// Suppress the default animation
myFrame.Navigate(typeof(Page2), null, new SuppressNavigationTransitionInfo());

Suprimir la animación es útil si va a crear su propia transición mediante animaciones conectadas o animaciones implícitas de mostrar u ocultar.

Navegación hacia atrás

Puede usar Frame.GoBack(NavigationTransitionInfo) para reproducir una transición específica al navegar hacia atrás.

Esto puede ser útil al modificar el comportamiento de navegación dinámicamente en función del tamaño de la pantalla; por ejemplo, en un escenario de lista/detalle con capacidad de respuesta.