Adicionando uma AppBar com conteúdo personalizado (HTML)

Artigo
03/04/2016

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]

Você pode adicionar uma AppBar com conteúdo personalizado ao aplicativo da Windows Store que usa JavaScript. O controle AppBar e os controles AppBarCommand contidos por ele podem ser personalizados de várias maneiras: você pode adicionar conteúdo HTML, criar submenus, inserir comandos de alternar e muito mais.

Observação Se você deseja criar uma barra de navegação persistente para seu aplicativo, sue o controle NavBar, em vez disso. Para obter mais informações sobre como criar uma barra de navegação, consulte Início rápido: adicionando uma barra de navegação e botões voltar.

Pré-requisitos

Instruções

Crie um novo projeto usando o modelo de Aplicativo em Branco

Inicie o Microsoft Visual Studio.
Na guia Página Inicial, clique em Novo Projeto. A caixa de diálogo Novo Projeto é aberta.
No painel Instalado, expanda Modelos e JavaScript, e clique no tipo de modelo Aplicativo da Windows Store. Os modelos de projeto disponíveis para JavaScript são exibidos no painel central da caixa de diálogo.
No painel central, selecione o modelo de projeto Aplicativo em Branco.
Na caixa de texto Nome, digite Demo Custom AppBar.
Clique em OK para criar o projeto.

2. Adicionar o controle da barra e personalizar os seus comandos

Você pode personalizar a AppBar por meio de comandos de AppBar personalizáveis. Você pode alterar o tipo de um controle AppBarCommand. Basta usar a propriedade type. Somente determinados elementos HTML podem hospedar alguns tipos de comando de AppBar.

A propriedade AppBarCommand.type toma um dos cinco valores:

botão—O valor padrão para o tipo. Ele define o botão padrão e pode ser aplicado somente a um elemento <button>.
submenu—Cria um botão que revela um fragmento HTML adjacente a ele (um submenu). Para criar um submenu AppBarCommand, especifique o tipo como um "submenu" e defina sua propriedade flyout. A propriedade flyout deve referenciar um controle Flyout definido. Somente um elemento <button> pode hospedar um submenu AppBarCommand.
alternar—Cria um botão que pode ser selecionado ou limpo. Quando o botão é selecionado, as cores do ícone do AppBarCommand ficam invertidas (de branco para preto e de preto para branco, por exemplo). Somente um elemento <button> pode hospedar um AppBarCommand de alternar.
separador—Cria uma linha horizontal no AppBar, para criar uma separação visual entre os outros controles AppBarCommand. Somente um elemento <hr/> pode hospedar um separador AppBarCommand.
conteúdo—Cria um AppBarCommand que hospeda outra marcação HTML dentro dela. A marcação hospedada pode incluir texto, marcas <input> e até um subconjunto de controles da Biblioteca do Windows para JavaScript (WinJS). Somente um elemento <div> pode hospedar um conteúdo AppBarCommand.

Você pode criar controles AppBar e AppBarCommand declarativamente no HTML ou no tempo de execução ao usar o JavaScript. Este exemplo cria a AppBar declarativamente na marcação HTML de default.html. O exemplo contém sete controles AppBarCommand.

Hh780658.wedge(pt-br,WIN.10).gif Para adicionar conteúdo personalizado à AppBar

No Gerenciador de Soluções, abra o arquivo default.html da raiz da solução.

Substitua a marcação dentro das marcas <body> pela marcação a seguir.

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

Resumo

Neste guia de início rápido, você adicionou uma AppBar com botões personalizados ao seu aplicativo.

Este artigo não descreve como criar uma barra de navegação. Para obter mais informações sobre como criar uma barra de navegação, consulte Início rápido: adicionando uma barra de navegação e botões voltar.

Tópicos relacionados

WinJS.UI.AppBar

WinJS.UI.AppBarCommand.type

WinJS.UI.AppBarCommand.flyout

Início rápido: adicionando um menu suspenso

Share via