Agregar barras de la aplicación y barras de herramientas (HTML)

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

Usa barras de la aplicación para mostrar comandos relevantes para el contexto del usuario, normalmente la página o la selección actuales. La AppBar representa una superficie de comandos que pasa al estado abierto cuando el usuario toque los puntos suspensivos en la AppBar, mostrando las etiquetas de los botones de icono y los elementos de menú (si están habilitados). Un AppBarCommand puede ser "principal" o "secundario". Los comandos principales son visibles como comandos del botón en el área de acción de la AppBar y los comandos secundarios siempre están ocultos como comandos de menú en el área de desbordamiento. Las AppBar están limitadas a la parte superior o inferior de la visualización de la aplicación y siempre se superponen al lienzo.

Ejemplo de barra de la aplicación

La ToolBar es una forma especializada de la AppBar, que es un control simple que aborda la escalabilidad de comandos. Este control tiene un área de acción en la que los comandos están disponibles de inmediato y un área de desbordamiento en la que los comandos están ocultos, pero que pueden mostrarse cuando lo solicite el usuario final. El control admite comportamiento adaptativo al permitir que los comandos se muevan dinámicamente desde el área principal al área secundaria cuando el espacio es limitado. La barra de herramientas no está limitada a una única ubicación en una aplicación, sino que puede encontrarse en varios lugares, como en la barra de la aplicación, en el control flotante y en el lienzo.

Puedes intentar trabajar con barras de la aplicación, barras de herramientas y otras funciones clave de la Biblioteca de Windows para JavaScript (WinJS) en el sitio web Probar WinJS.

Un punto importante que hay que recordar es que las AppBar y las ToolBar son diferentes en solo algunos aspectos:

  • La AppBar es una superposición descartable por cambio de foco, lo que significa que siempre tapará alguna parte de la pantalla.
  • La AppBar, al igual que todas las superposiciones descartables por cambio de foco, siempre debe ser un elemento secundario directo del elemento <body>.
  • La ToolBar, cuando se cierra, no es una superposición, lo que significa que debe tener su propio espacio de diseño como cualquier otro componente.
  • La ToolBar, cuando se abre, actúa como una superposición, ya que cubre el contenido cercano al expandirse verticalmente.

En esta sección

Tema Descripción

Agregar una ToolBar con comandos (HTML)

ToolBar es un control simple que aborda la escalabilidad de comandos. Tiene una action area donde los comandos están disponibles de inmediato y una overflow area donde se encuentran ocultos los comandos, pero que pueden mostrarse cuando lo solicite el usuario final. El control admite comportamiento adaptativo al permitir que los comandos se muevan dinámicamente desde el área principal al área secundaria cuando el espacio es limitado. ToolBar no está limitado a una única ubicación en una aplicación, sino que puede encontrarse en varios lugares, como Splitview, Flyout y en canvas.

Agregar una barra de la aplicación con comandos (HTML)

En este artículo se explica cómo agregar una AppBar a la aplicación de Windows en tiempo de ejecución con JavaScript.

Agregar una barra de la aplicación con contenido personalizado (HTML)

Puedes agregar una AppBar con contenido personalizado a tu aplicación de la Tienda Windows con JavaScript.

Cómo hacer que las barras de la aplicación funcionen con ListView

En este procedimiento se explica la interacción entre el ListView y la AppBar para dar soporte a estos escenarios mientras se siguen los procedimientos recomendados para la AppBar.

Aplicar estilos a barras de la aplicación y barras de herramientas (HTML)

Proporciona ejemplos de cómo aplicar estilos a una barra de aplicaciones o a la barra de herramientas y sus controles.