Idioma: HTML | XAML

Animación de transiciones de contenido y de entrada (XAML)

Usa animaciones de transición de contenido para cambiar el contenido de un área de la pantalla sin cambiar el contenedor ni el fondo. El contenido nuevo que aparece en pantalla se desliza desde un desplazamiento según va realizando el fundido de entrada. Si hay contenido existente para sustituir, el contenido antiguo realiza un fundido de salida según llega el contenido nuevo. Puedes usar estas animaciones en el caso de navegación de pantalla dividida, donde se muestra al usuario una lista y una vista detallada. Las animaciones de transición de contenido también se usan para mostrar contenido que se carga después que el resto de la página, cuando el usuario realiza la transición de una página a otra.

La clase ContentThemeTransition realiza esta animación.

La biblioteca de animaciones de XAML no tiene un concepto de una animación que se aplica a toda la página al cargarla, pero sí tiene una transición independiente (EntranceThemeTransition) que se puede aplicar al contenido de una página al cargarla por primera vez y al representar esa parte del contenido. En otras palabras, no existe un equivalente directo para enterPage, pero la aplicación de EntranceThemeTransition al contenido de una página sirve para la misma situación y desencadena la misma condición. En el XAML un elemento de contenido puede tener tanto una ContentThemeTransition como una EntranceThemeTransition definidas como parte de la misma TransitionCollection aplicada a una propiedad Transition. De ese modo, el contenido mostrará distintos comentarios visuales cuando se carga por primera vez y cuando se cambia más adelante en la página, pero esta permanecerá igual.

Animaciones de contenido y de entrada en comportamientos de controles de Windows en tiempo de ejecución predeterminados

Cuando el contenido permanece en su lugar, pero puede haber cambios controlados por el usuario o por datos en los elementos, también debes aplicar las animaciones AddDeleteThemeTransition y ReorderThemeTransition si aplicas ContentThemeTransition.

Nota  A partir de Windows 8.1, el sistema deshabilita las transiciones de tema y de estado visual, si el usuario utiliza una configuración de Accesibilidad que desactiva las animaciones innecesarias (cuando sea posible) en las aplicaciones de Windows.

Otros recursos

La muestra de animaciones de personalidad XAML describe cómo usar la ContentThemeTransition aplicada a la propiedad ChildrenTransitions de un Grid. Muestra una vista de maestro y detalles de los datos en la que el detalle aparece en una celda de cuadrícula a la derecha y la animación se aplica cuando se selecciona un nuevo elemento entre los que aparecen del lado izquierdo de la cuadrícula. (Este es el escenario 2 en la muestra).

Para más información sobre experiencia del usuario y para obtener instrucciones de uso, consulta las directrices y lista de comprobación de animaciones de transiciones de página y las directrices y lista de comprobación para animaciones de transiciones de contenido.

Temas relacionados

Animación de la interfaz de usuario
Inicio rápido: animación de la interfaz de usuario con animaciones de la biblioteca
Muestra de animaciones de personalidad XAML
Animación de incorporaciones y eliminaciones de listas
Agregar controles ListView y GridView
ContentThemeTransition
EntranceThemeTransition

 

 

Mostrar:
© 2015 Microsoft