Windows Dev Center

Adicionando uma AppBar com conteúdo personalizado (HTML)

Você pode adicionar uma barra de aplicativos com conteúdo personalizado para sua Windows Store usando 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

  1. Inicie o Microsoft Visual Studio.

  2. Na guia Página Inicial, clique em Novo Projeto. A caixa de diálogo Novo Projeto é aberta.

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

  4. No painel central, selecione o modelo de projeto Aplicativo em Branco.

  5. Na caixa de texto Nome, digite Demo Custom AppBar.
  6. Clique em OK para criar o projeto.

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

Um controle AppBar com seu layoutconjunto de propriedades definidos para "comandos" podem conter somente controles AppBarCommand como seus elementos filho—, qualquer outro controle AppBarCommand dentro de AppBar criará uma exceção. O valor de "comandos" é uma configuração padrão para a propriedade AppBar.layout.

Observação  Você pode colocar qualquer HTML na barra de aplicativos se você definir AppBar.layout para "personalizado". No entanto, um controle AppBar usando um layout "personalizado" não tem a funcionalidade de barra de aplicativos totalmente embutida disponível para um AppBar usando os layout "comandos".

Assim, você pode personalizar a barra de aplicativos através dos comandos de barra de aplicativo personalizáveis. Você pode alterar o tipo de um controle AppBarCommand usando sua propriedade type. Somente determinados elementos HTML podem hospedar alguns tipos de comando de barra de aplicativo.

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 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 em um tempo de execução ao usar o JavaScript. Este exemplo cria a barra de aplicativos declarativamente na marcação HTML de default.html. O exemplo contém sete controles AppBarCommand.

Hh780658.wedge(pt-br,WIN.10).gifPara adicionar uma barra de aplicativos personalizada.

  1. No Gerenciador de Soluções, abra o arquivo default.html da raiz da solução.
  2. Substitua a marcação dentro das marcas <body> pela marcação seguinte.
    
    <div data-win-control="WinJS.UI.AppBar"
        data-win-options="{
            placement: 'bottom',
            layout: 'commands'
        }">
        <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 Início rápido, você adicionou uma barra de aplicativos 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

 

 

Mostrar:
© 2015 Microsoft