Formatieren von AppBars und ToolBars (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 ]

Enthält Beispiele zum Formatieren eines AppBar- oder ToolBar-Elements und ihrer Steuerelemente.

Voraussetzungen

Einführung

Im Schnellstart: Formatieren von Steuerelementen wird erläutert, wie Sie Ihrer App mithilfe der von den Stylesheets der Windows-Bibliothek für JavaScript bereitgestellten Stile automatisch das Windows 10-Erscheinungsbild verleihen können. In den folgenden Beispielen wird die Verwendung von Cascading Stylesheets (CSS) zum Anpassen einiger AppBar-Stile veranschaulicht.

Helles und dunkles Design

Wenn Sie für die App das helle oder dunkle Stylesheet auswählen, wirkt sich dies auf das Aussehen des AppBar-Elements und der anderen Steuerelemente der App aus. Beispiel für ein AppBar-Element:

<div id="createAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="{placement:'bottom'}">
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdAdd',disabled:'true',label:'Add',icon:'add',tooltip:'Add item',section:'primary',type:'flyout',
          flyout:select('#addFlyout'),onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove',tooltip:'Remove item',section:'primary',
          onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdEdit',label:'Edit',icon:'edit',tooltip:'Edit item',section:'primary',onclick:Sample.outputCommand}">
          </button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera',tooltip:'Take a picture',section:'primary',
          onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdSettings',label:'Settings',icon:'settings',tooltip:'Settings',section:'primary',
          onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdShare',label:'Share',icon:'reshare',tooltip:'Share',section:'primary',onclick:Sample.outputCommand}">
          </button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdPrint',label:'Print',section:'secondary',onclick:Sample.outputCommand}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" 
          data-win-options="{id:'cmdNetwork',label:'Network',section:'secondary',onclick:Sample.outputCommand}"></button>
    </div>

So wählen Sie das dunkle Stylesheet aus:

<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">

Die resultierende App-Leiste sieht wie folgt aus:

App-Leiste im dunklen Stil

So wählen Sie das helle Stylesheet aus:

<link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet">

Die resultierende App-Leiste sieht wie folgt aus:

App-Leiste im hellen Stil

Die Symbolleiste hat mithilfe der gleichen Stylesheets ein ähnliches Erscheinungsbild.

Nützliche CSS-Eigenschaften

Die folgenden CSS-Eigenschaften werden häufig für die AppBar- und ToolBar-Steuerelemente verwendet:

border-color: Steuert die Rahmenfarbe des AppBar-Elements.

Beispiel: border-color: rgb(255, 224, 100);
background-color: Steuert die Hintergrundfarbe des AppBar-Elements.

Beispiel: background-color: rgb(255, 224, 100);

Hinweis Diese Werte werden in der Regel durch ui-light.css oder ui-dark.css vordefiniert.

Häufig verwendete Selektoren für Teile und Zustände

Einige nützliche CSS-Selektoren zum Formatieren von Teilen und Zuständen des Steuerelements sind:

.win-command formatiert die Befehlsbezeichnung der App-Leiste:
```
.win-appbar .win-command
{
    color: rgb(28, 160, 218);
}
```
Hinweis Der Benutzer muss auf die Ellipse tippen oder klicken, um die App-Leiste zu öffnen und diesen Effekt zu sehen. Befehlsbezeichnungen sind standardmäßig ausgeblendet.

.win-commandimage formatiert das Symbolbild der Schaltfläche:

.win-appbar .win-commandimage
{
    color: rgb(28, 160, 218);
}

Schaltflächen mit farbigen Befehlssymbolen

Pseudoklassen

Sie können die folgenden Pseudoklassen als Selektoren zum Formatieren von AppBar-Schaltflächen verwenden, wenn diese sich in bestimmten Zuständen befinden:

:hover – Wenn der Benutzer mit dem Cursor auf das Symbol der Schaltfläche zeigt und sie nicht durch Klicken aktiviert, ändert sich die Hintergrundfarbe der Schaltfläche, bis der Cursor von der Schaltfläche weg bewegt wird. Während der Benutzer auf die Schaltfläche zeigt, wird außerdem standardmäßig eine QuickInfo angezeigt.
:active – Die Schaltfläche ist aktiv, während der Benutzer auf das Steuerelement klickt und eine Option auswählt oder wenn die Schaltfläche auf type="toggle" festgelegt ist.
:disabled – Die Änderung der Farbe des Symbols zeigt an, dass die Schaltfläche nicht für Benutzerinteraktionen verfügbar ist. Die disabled-Eigenschaft der Schaltfläche muss auf "disabled" festgelegt sein, damit diese Pseudoklasse angewendet wird.

Formatieren eines AppBar-Elements mit benutzerdefinierten Farben

Weiteres Beispiel für die Formatierung eines AppBar-Elements:

.win-appbar .win-appbar-actionarea
{
   background-color: yellow;
}


.win-appbar .win-commandimage
{
    color: red;
}

Resultierende Farben des AppBar-Elements:

Gelbe App-Leiste

Die Hintergrundfarbe des Überlaufbereichs wird wie folgt formatiert:

.win-appbar .win-appbar-overflowarea
{
   background-color: green;
}

Der folgende Code formatiert eine Symbolleiste auf die gleiche Weise:

.win-toolbar win-toolbar-overflowarea{
   background-color: green;
}

.win-toolbar .win-commandimage
{
    color: red;
}

.win-toolbar win-toolbar-overflowarea
{
   background-color: green;
}

Nicht empfehlenswerte Stile

Das Erscheinungsbild von App-Leisten und Symbolleisten kann durch ein CSS auch beeinträchtigt werden. Dies gilt insbesondere für die flüssige Ausführung von App-Leisten- und Symbolleistenanimationen. Folgende Probleme sind bekannt:

padding – Ändern Sie die Standardwerte nicht.
border – Ändern Sie die Standardwerte nicht.
margin – Formatieren Sie Ränder gleichmäßig, aber nur für ToolBar- und AppBar-Elemente:
```
.win-toolbar, .win-appbar {
   margin: 3px;
}
```

background-color – Für Aktions- und Überlaufbereiche ist eine Formatierung problemlos möglich:

.win-toolbar-actionarea, .win-appbar-actionarea {
   background-color: rgb(0,0,127);
}
.win-toolbar-overflowarea, .win-appbar-overflowarea {
   background-color: rgb(0,0,255);

position, float – Formatieren Sie diese CSS-Attribute nicht direkt für das ToolBar-Element. Sie können ein ToolBar-Element jedoch in einem übergeordneten Element mit Formatierung für diese Regeln umschließen. Hinweis Diese Einschränkung gilt nicht für die App-Leiste.

Bekannte Probleme

Ausblenden des ToolBar-Elements – die ToolBar-Komponente sollte nur mithilfe von öffentlichen APIs ausgeblendet werden. Obwohl es üblich ist, mehrere Komponenten mit einer „Dach”-CSS-Klasse auszublenden, ist diese Vorgehensweise für eine Symbolleiste (oder App-Leiste) nicht empfehlenswert. Das Problem ist, dass die Symbolleiste zum Zwischenspeichern des Zustands der Befehle optimiert wurde und nicht auf das DOM zurückgreift, um festzustellen, ob ein Befehl sichtbar ist. Dadurch ist die Symbolleiste adaptiv und kann einen Überlauf für Befehle ausführen, wenn sie nicht in den verfügbaren aktiven Bereich passen. Gleichzeitig werden aufwendige Browserlayouts vermieden, die beim Lesen aus dem DOM erforderlich sind. Wenn Schaltflächen mit einem CSS als ausgeblendet formatiert werden, erkennt die Symbolleiste nicht, dass ein Befehl ausgeblendet wurde. Daher lässt sie Befehle zu früh überlaufen, wenn der verfügbare Platz im aktiven Bereich der Symbolleiste beim Ändern der Fenstergröße abnimmt.

Stattdessen sollten Sie nur die Command.hidden-Eigenschaft verwenden oder die ToolBar.showOnlyCommands()-Methode aufrufen, um Befehle auf der Symbolleiste ein- und auszublenden.
Fehlschlagen des adaptiven Überlaufs – das adaptive Überlaufverhalten der Symbolleiste funktioniert nicht gut, wenn das ToolBar-Element die Größe an den Inhalt anpasst.

Die ToolBar-Komponente ist z. B. dafür ausgelegt, in anderen Komponenten enthalten zu sein (in der Regel geschachtelt in einem anderen Div-Element). In ihrem eigenen Div-Element belegt die Symbolleiste normalerweise 100 % der Breite des übergeordneten Elements. Wenn sie aber durch das CSS-Layout des übergeordneten Elements in einigen flexiblen Feldern geschachtelt wird und die benutzerdefinierte transportcontrols- Klasse des übergeordneten Elements align-items:center; verwendet, um die Symbolleiste so zu komprimieren, dass sie nur so breit ist wie die zugehörigen Befehle, führt dies zu unerwartetem Verhalten. Dies liegt daran, dass die Symbolleiste den width-Wert zwischenspeichert und versucht, einen Überlauf für Befehle auszuführen, wenn der Platz nicht für sie auszureichen scheint. Die Symbolleiste erfordert ein Element mit konstanter Breite, erhält durch die in diesem Szenario verwendeten Stile aber eine flexible Breite.

Die Problemumgehung für dieses Szenario (auch in Verbindung mit der Lösung zum Ausblenden des ToolBar-Elements) besteht darin, die benutzerdefinierte transportcontrols-Klasse des übergeordneten Elements zur Verwendung von align-items:stretch; zu ändern. Tests haben gezeigt, dass dies eine einfache Lösung ist. Falls die Änderung an align-items aus irgendeinem Grund aber nicht möglich ist, können Sie das gleiche Ergebnis erzielen, indem Sie align-self:stretch direkt im ToolBar-Element einfügen.

Zusammenfassung und nächste Schritte

In diesem Artikel wurden einige Beispiele für die Formatierung einer App-Leiste und einer Symbolleiste sowie der zugehörigen Steuerelemente vorgestellt. Außerdem haben Sie erfahren, wie Sie Probleme mit App-Leisten und Symbolleisten in Ihrer App vermeiden können.

Auf der Website WinJS ausprobieren können Sie das Formatieren von App-Leisten und Symbolleisten in der Praxis anwenden. Experimentieren Sie mit dem Code, und sehen Sie sofort die Ergebnisse.

Freigeben über