Transiciones de página
Las transiciones de página navegan por los usuarios entre las páginas de una aplicación y proporcionan comentarios como relación entre 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 | |
|---|---|
 |
Si tiene instalada la aplicación WinUI 2 Gallery , 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 un fundido 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 comenzado.
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 frame 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.
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 entre sí. El control NavigationView usa automáticamente esta animación para la navegación superior, pero si va a crear 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 de la otra.
// 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 } );
Suppress
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 presentación u ocultación.
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 o detalle dinámicos.
