Idioma: HTML | XAML

Animación de interfaz de usuario en el borde (XAML)

Applies to Windows only

Usa las animaciones de interfaz de usuario en el borde para mostrar u ocultar una interfaz de usuario que se origina en el borde de la pantalla. Tanto el usuario como la aplicación pueden hacer que aparezca la interfaz de usuario. Usa EdgeUIThemeTransition para interfaces de usuario de borde más pequeñas, como barras de la aplicación o barras de comandos. Usa PaneThemeTransition para interfaces de usuario más grandes, como paneles que se deslizan y aparecen desde el borde. Estas animaciones se usan principalmente en controles personalizados. Los controles existentes, como AppBar y CommandBar, tienen animaciones de la biblioteca integradas para las interfaces de usuario de borde y para obtener el comportamiento animado tan solo es necesario incluir los controles en la interfaz de usuario.

La interfaz de usuario puede superponerse a la aplicación o formar parte de la superficie de la aplicación principal. Si la interfaz de usuario forma parte de la superficie de la aplicación principal, puede que tengas que cambiar el tamaño del resto de la aplicación para hacer espacio para cuando aparezca la nueva interfaz de usuario.

Diagrama básico de un elemento en el borde

Existen dos tipos de elementos en el borde, cada uno con su propio grupo de API de animación: UI de borde y UI de panel.

  • Usa animaciones de interfaz de usuario de borde con interfaces de usuario de borde más pequeñas para animar un control personalizado cuyo comportamiento se asemeje al de una AppBar, una CommandBar o algo similar. También te resultará útil definir una superficie o área de interfaz de usuario para errores y advertencias resultantes de las acciones en la aplicación. Si decides hacerlo, asegúrate de leer las directrices de controles flotantes; puede que la interfaz de usuario de borde no sea adecuada para tu escenario.
  • Usa animaciones de interfaz de usuario de panel con interfaces de usuario de borde más grandes que cubren una parte más amplia de la ventana de la aplicación. Por ejemplo, para elementos del tamaño de un teclado en pantalla.

Ilustración que muestra la diferencia en tamaño entre una interfaz de usuario de borde y una interfaz de usuario de panel

Animaciones de borde en comportamientos de controles de Windows en tiempo de ejecución predeterminados

Los controles XAML no usan las animaciones de borde de forma explícita en sus plantillas de control. Pero tienen comportamiento animado integrado. El método que se recomienda para incluir interfaces de usuario de borde es agregar una AppBar (o una CommandBar) mediante las propiedades Page.BottomAppBar y Page.TopAppBar, que aplicarán automáticamente todo el comportamiento interactivo y las transiciones que correspondan. Para más información, consulta el tema sobre cómo agregar barras de la aplicación.

Si usas controles flotantes (Flyout, MenuFlyout, SettingsFlyout), estos también tienen animaciones integradas. Pero en realidad no son interfaces de usuario de borde, porque se deben asociar con el contexto que ocasionó su visualización y no con el borde de la ventana de la aplicación. Puede suceder que veas controles flotantes para interfaces de usuario invocadas desde una AppBar, pero esta situación sigue siendo diferente de las interfaces de usuario de borde puras. Para más información, consulta los temas sobre cómo agregar controles flotantes y menús, y sobre la animación de la interfaz de usuario emergente.

Otros recursos

La muestra de elementos emergentes describe un uso de PaneThemeTransition para Popup.ChildTransitions.

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

Temas relacionados

Animación de la interfaz de usuario
Inicio rápido: animación de la interfaz de usuario con animaciones de la biblioteca
Agregar barras de la aplicación
EdgeUIThemeTransition
PaneThemeTransition
Popup

 

 

Mostrar:
© 2014 Microsoft