Hinzufügen eines AppBar-Elements mit benutzerdefiniertem Inhalt (HTML)

Artikel
03/04/2016

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]

Sie können einer Windows Store-App mit JavaScript eine App-Leiste (AppBar) mit benutzerdefiniertem Inhalt hinzufügen. Das AppBar-Steuerelement und die darin enthaltenen AppBarCommand-Steuerelemente können auf unterschiedliche Arten angepasst werden: Sie können benutzerdefinierte HTML-Inhalte hinzufügen, Flyouts erstellen, Umschaltbefehle einfügen und viele andere Schritte ausführen.

Hinweis Wenn Sie für die App eine dauerhafte Navigationsleiste erstellen möchten, ist es ratsam, stattdessen das NavBar-Steuerelement zu verwenden. Weitere Informationen zur Erstellung einer Navigationsleiste finden Sie unter Schnellstart: Hinzufügen einer Navigationsleiste und von Zurück-Schaltflächen.

Voraussetzungen

Anweisungen

Erstellen eines neues Projekts mit der Vorlage "Leere App"

Starten Sie Microsoft Visual Studio.
Klicken Sie auf der Registerkarte Startseite auf Neues Projekt. Das Dialogfeld Neues Projekt wird geöffnet.
Erweitern Sie im Bereich Installiert die Einträge Vorlagen und JavaScript, und klicken Sie auf den Vorlagentyp Windows Store-App. Die verfügbaren Projektvorlagen für JavaScript werden im mittleren Fenster des Dialogfelds angezeigt.
Wählen Sie im mittleren Bereich die Projektvorlage Leere App aus.
Geben Sie im Textfeld Name den Text Demo für benutzerdefinierte AppBar ein.
Klicken Sie auf OK, um das Projekt zu erstellen.

2. Hinzufügen des Leistensteuerelements und Anpassen der zugehörigen Befehle

Sie können die App-Leiste mit benutzerdefinierbaren AppBar-Befehlen anpassen. Sie können den Typ eines AppBarCommand-Steuerelements ändern, indem Sie dessen type-Eigenschaft verwenden. Einige Typen von AppBar-Befehlen können nur von bestimmten HTML-Elementen gehostet werden.

Die AppBarCommand.type-Eigenschaft kann einen von fünf Werten annehmen:

button: Dies ist der Standardwert für den Typ. Damit wird eine Standardschaltfläche definiert, und er kann nur auf ein <button>-Element angewendet werden.
flyout: Dient zum Erstellen einer Schaltfläche, mit der ein daneben angeordnetes HTML-Fragment (Flyout) angezeigt wird. Geben Sie zum Erstellen des AppBarCommand-Elements vom Typ "flyout" den Typ "flyout" an, und legen Sie die dazugehörige flyout-Eigenschaft fest. Die flyout -Eigenschaft muss auf ein definiertes Flyout-Steuerelement verweisen. Nur ein <button>-Element kann den AppBarCommand-Typ "flyout" hosten.
toggle: Dient zum Erstellen einer Schaltfläche, die aktiviert oder deaktiviert werden kann. Wenn die Schaltfläche aktiviert wird, werden die Farben des AppBarCommand-Elements umgekehrt (z. B. von Schwarz in Weiß bzw. Weiß in Schwarz). Nur ein <button>-Element kann den AppBarCommand-Typ "toggle" hosten.
separator: Erstellt eine horizontale Linie im AppBar-Element, um eine sichtbare Trennung zwischen anderen AppBarCommand-Steuerelementen zu erstellen. Nur ein <hr/>-Element kann den AppBarCommand-Typ "separator" hosten.
content: Dient zum Erstellen eines AppBarCommand-Elements, in dem anderer HTML-Markupcode gehostet werden kann. Der gehostete Markupcode kann Text, <input>-Tags und sogar eine Teilmenge mit WinJS-Steuerelementen (Windows-Bibliothek für JavaScript) enthalten. Nur ein <div>-Element kann den AppBarCommand-Typ "content" hosten.

Sie können AppBar- und AppBarCommand-Steuerelemente deklarativ im HTML-Code oder zur Laufzeit mithilfe von JavaScript erstellen. In diesem Beispiel wird die App-Leiste deklarativ im HTML-Markup von default.html erstellt. Das Beispiel enthält sieben AppBarCommand-Steuerelemente.

Hh780658.wedge(de-de,WIN.10).gif So fügen Sie der App-Leiste benutzerdefinierte Inhalte hinzu

Öffnen Sie im Projektmappen-Explorer im Stammverzeichnis der Projektmappe die Datei default.html .

Ersetzen Sie das Markup innerhalb der <body>-Tags durch das folgende Markup:

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

Zusammenfassung

In dieser Schnellstartanleitung haben Sie Ihrer App eine App-Leiste mit benutzerdefinierten Schaltflächen hinzugefügt.

In diesem Artikel wird nicht beschrieben, wie Sie eine Navigationsleiste erstellen. Eine Anleitung zur Erstellung einer Navigationsleiste finden Sie unter Schnellstart: Hinzufügen einer Navigationsleiste und von Zurück-Schaltflächen.

Hinzufügen eines AppBar-Elements mit benutzerdefiniertem Inhalt (HTML)

Voraussetzungen

Anweisungen

2. Hinzufügen des Leistensteuerelements und Anpassen der zugehörigen Befehle

Zusammenfassung

Verwandte Themen

Zusätzliche Ressourcen