Idioma: HTML | XAML

Animación de interfaz de usuario emergente (XAML)

Usa las animaciones de elementos emergentes para mostrar y ocultar la interfaz de usuario emergente, que incluye los menús contextuales y los controles flotantes. Los elementos emergentes son contenedores que aparecen sobre el contenido de la aplicación y desaparecen si el usuario pulsa o hace clic fuera del elemento emergente. Estas animaciones se usan principalmente en controles personalizados. Si usas los elementos Popup, Flyout y MenuFlyout en el XAML, estos ya tienen animaciones de la biblioteca integradas y no es necesario agregarles ningún comportamiento.

Las animaciones relevantes para el comportamiento emergente son: PopInThemeAnimation, PopOutThemeAnimation, PopupThemeTransition.

Las animaciones de elementos emergentes incluyen una traslación, que es un movimiento vertical de una posición inicial a la posición final a medida que el elemento emergente realiza un fundido de entrada o de salida. La aplicación especifica la distancia de la traslación y su dirección. En la mayoría de los casos, la traslación debe ser de 50 píxeles, y moverse hacia arriba. Sin embargo, si el elemento emergente se muestra debajo del elemento de la interfaz de usuario que desencadenó el elemento emergente, la traslación debe ser de 50 píxeles desplazándose hacia abajo. Por ejemplo, esta traslación hacia abajo se usaría con un control flotante que se desencadenó en una barra de navegación o en un encabezado de la aplicación. Esto se hace para que el usuario tenga un vínculo visual entre el elemento emergente y su elemento desencadenante.

Animaciones de elementos emergentes en comportamientos de controles de Windows en tiempo de ejecución predeterminados

El código predeterminado para Popup, Flyout y MenuFlyout no usa las animaciones. Estos tipos tienen sus propias animaciones integradas que existen fuera de las plantillas y los estilos. Popup tiene una propiedad ChildTransitions que comienza como null y, si quieres, puedes agregar PopupThemeTransition. Esto serviría para ajustar FromHorizontalOffset o FromVerticalOffset.

Otros recursos

La muestra de animaciones de personalidad XAML describe cómo usar la PopInThemeAnimation y la PopOutThemeAnimation definidas en una Storyboard e invocadas de manera explícita. (Este es el escenario 1 en la muestra).

Consulta Directrices y lista de comprobación para animaciones de interfaz de usuario emergentes para conocer los procedimientos recomendados de diseño para el uso de estas animaciones.

Temas relacionados

Animación de la interfaz de usuario
Animación de interfaz de usuario en el borde
Inicio rápido: Animación de la interfaz de usuario con animaciones de la biblioteca
Muestra de animaciones de personalidad XAML
PopInThemeAnimation
PopOutThemeAnimation
PopupThemeTransition

 

 

Mostrar:
© 2015 Microsoft