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

Artículo
03/04/2016

[ 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 ]

Puedes agregar una AppBar con contenido personalizado a tu aplicación de la Tienda Windows con JavaScript. El control AppBar y los controles AppBarCommand que contiene se pueden personalizar de varias maneras: puedes agregar contenido HTML personalizado, crear controles flotantes, insertar comandos de alternancia y mucho más.

Nota Si quieres crear una barra de navegación persistente para tu aplicación, usa el control NavBar. Para obtener más información sobre cómo crear una barra de navegación, consulta Inicio rápido: agregar una barra de navegación y botones Atrás.

Requisitos previos

Instrucciones

Crear un nuevo proyecto usando la plantilla Aplicación vacía

Inicia Microsoft Visual Studio.
En la pestaña Página de inicio, haz clic en Nuevo proyecto. Se abre el cuadro de diálogo Nuevo proyecto.
En el panel Instalado, expande Plantillas y JavaScript, y haz clic en el tipo de plantilla Aplicación de la Tienda Windows. Las plantillas de proyecto disponibles para JavaScript se muestran en panel central del cuadro de diálogo.
En el panel central, selecciona la plantilla de proyecto Aplicación vacía.
En el cuadro de texto Nombre, escribe Custom AppBar demo.
Haz clic en Aceptar para crear el proyecto.

2. Agregar el control de barra y personalizar sus comandos

Puedes personalizar la AppBar mediante comandos de AppBar personalizables. Puedes cambiar el tipo de un control AppBarCommand mediante su propiedad type. Solo algunos elementos HTML pueden hospedar algunos tipos de AppBar.

La propiedad AppBarCommand.type puede tener uno de cinco valores:

button: el valor predeterminado del tipo. Define un botón estándar que se puede aplicar solo a un elemento <button>.
flyout: crea un botón que revela un fragmento HTML adyacente a él (un control flotante). Para crear una AppBarCommand de control flotante, especifica el tipo como "flyout" y establece su propiedad flyout. La propiedad flyout debe hacer referencia a un control Flyout definido. Solo un elemento <button> puede hospedar una AppBarCommand de control flotante.
toggle: crea un botón que se puede activar o desactivar. Cuando se activa el botón, se invierten los colores del icono de la AppBarCommand (de negro a blanco y de blanco a negro, por ejemplo). Solo un elemento <button> puede hospedar una AppBarCommand de altenancia.
separator: crea un línea horizontal en la AppBar para crear una separación visual entre otros controles de AppBarCommand. Solo un elemento <hr/> puede hospedar una AppBarCommand de separador.
content: crea una AppBarCommand que puede hospedar otro marcado HTML. El marcado hospedado puede incluir texto, etiquetas <input> e incluso un subconjunto de controles de la Biblioteca de Windows para JavaScript (WinJS). Solo un elemento <div> puede hospedar una AppBarCommand de contenido.

Puedes crear controles AppBar y AppBarCommand mediante declaración en HTML o en tiempo de ejecución con JavaScript. Este ejemplo crea la AppBar de manera declarativa en el marcado HTML de default.html. El ejemplo contiene siete controles AppBarCommand.

Hh780658.wedge(es-es,WIN.10).gif Procedimiento para agregar contenido personalizado a la AppBar

En el Explorador de soluciones, abre el archivo default.html desde la raíz de la solución.

Reemplaza el marcado dentro de las etiquetas <body> con el siguiente marcado.

<div data-win-control="WinJS.UI.AppBar"
    data-win-options="{
        placement: 'bottom'
    }">
    <button data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{
            id: 'default'
            icon: 'placeholder',
            label: 'Button',
            type: 'button'
    }">
    </button>
    <button data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{
            id: 'flyout', 
            icon: 'volume', 
            label: 'Volume', 
            type: 'flyout',
            flyout: select('#volumeFlyout')}">
    </button>
    <button data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{
            id: 'toggle', 
            icon: 'filter', 
            label: 'Filter', 
            type: 'toggle'}">
    </button>
    <hr data-win-control="WinJS.UI.AppBarCommand" data-win-options="{ type: 'separator' }"/>
    <div data-win-control="WinJS.UI.AppBarCommand" data-win-options="{ type: 'content' }">
        <p>You can include a wide variety of HTML inside of a 'content' AppBarCommand, <br/>
        including HTML and some WinJS controls.</p>
    </div>
    <div data-win-control="WinJS.UI.AppBarCommand" data-win-options="{ type: 'content' }">
        <div id="itemContainer"
             data-win-control="WinJS.UI.ItemContainer">
            <h3>Item Container</h3>
        </div>
    </div>
</div>
<div id="volumeFlyout"
     data-win-control="WinJS.UI.Flyout">
    <h3>Volume</h3> <input type="range" />
</div>

Resumen

En este inicio rápido has agregado una AppBar con botones personalizados a la aplicación.

Este artículo no describe como crear una barra de navegación. Para obtener más información sobre cómo crear una barra de navegación, consulta Inicio rápido: agregar una barra de navegación y botones Atrás.

Temas relacionados

WinJS.UI.AppBar

WinJS.UI.AppBarCommand.type

WinJS.UI.AppBarCommand.flyout

Inicio rápido: Agregar controles flotantes

Compartir a través de