Schnellstart: Hinzufügen einer App-Leiste mit benutzerdefiniertem Inhalt (HTML)

Applies to Windows and Windows Phone

Sie können einer Windows Store-App mit JavaScript eine App-Leiste 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"

  1. Starten Sie Microsoft Visual Studio.

  2. Klicken Sie auf der Registerkarte Startseite auf Neues Projekt. Das Dialogfeld Neues Projekt wird geöffnet.

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

  4. Wählen Sie im mittleren Bereich die Projektvorlage Leere App aus.

  5. Geben Sie im Textfeld Name den Text Demo für benutzerdefinierte AppBar ein.
  6. Klicken Sie auf OK, um das Projekt zu erstellen.

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

Ein AppBar-Steuerelement, für das die layout-Eigenschaft auf "commands" festgelegt ist, kann nur AppBarCommand-Steuerelemente als untergeordnete Elemente enthalten. Alle anderen Elemente als ein AppBarCommand-Steuerelement innerhalb von AppBar löst eine Ausnahme aus. Der "commands"-Wert ist die Standardeinstellung für die AppBar.layout-Eigenschaft.

Hinweis  Sie können beliebigen HTML-Code in die App-Leiste einfügen, wenn Sie AppBar.layout auf "custom" festlegen. Für ein AppBar-Steuerelement mit einem Layout vom Typ "custom" sind jedoch nicht alle integrierten App-Leistenfunktionen verfügbar, die für ein AppBar-Steuerelement mit dem Layout "commands" zur Verfügung stehen.

Daher passen Sie die App-Leiste mithilfe von benutzerdefinierbaren App-Leistenbefehlen an. Sie können den Typ eines AppBarCommand-Steuerelements ändern, indem Sie dessen type-Eigenschaft verwenden. Einige Typen von App-Leistenbefehlen 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 Library for 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).gifSo fügen Sie eine benutzerdefinierte App-Leiste hinzu

  1. Öffnen Sie im Projektmappen-Explorer im Stammverzeichnis der Projektmappe die Datei default.html .
  2. Ersetzen Sie das Markup innerhalb der <body>-Tags durch das folgende Markup:
    
    <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>
    
    
    

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.

Verwandte Themen

WinJS.UI.AppBar
WinJS.UI.AppBarCommand.type
WinJS.UI.AppBarCommand.flyout
Schnellstart: Hinzufügen eines Flyouts

 

 

Anzeigen:
© 2014 Microsoft