Schnellstart: Formatieren von Steuerelementen (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 ]

Die Darstellung von Steuerelementen in Ihrer Windows-Runtime-App mit JavaScript wird genau wie bei Websites mithilfe von CSS (Cascading Stylesheets) angepasst. Windows Store-Apps mit JavaScript unterstützen auch einige erweiterte Formatierungsfeatures für Steuerelemente. Die Windows-Bibliothek für JavaScript enthält einen umfassenden Satz von Stilen, mit denen Sie Ihre App sehr einfach an das Erscheinungsbild von Windows 8 anpassen können.

Wir zeigen hier, wie Sie das WinJS-Stylesheet einfügen, wie Sie HTML-Steuerelemente (auch als systeminterne Steuerelemente bezeichnet) formatieren, wie Sie WinJS-Steuerelemente formatieren und wie Sie die typografischen Klassen von WinJS verwenden.

Sehen Sie dieses Feature in unserer Reihe App-Features von A bis Z in Aktion.: Windows Store-App-Benutzeroberfläche von A bis Z

Voraussetzungen

Es wird vorausgesetzt, dass Sie mit dem Behandeln von Ereignissen in einer Windows-Runtime-App mit JavaScript vertraut sind. Informationen zur empfohlenen Methode für die Behandlung von Ereignissen finden Sie unter Schnellstart: Hinzufügen von HTML-Steuerelementen und Behandeln von Ereignissen.
Es wird vorausgesetzt, dass Sie WinJS-Steuerelemente erstellen und verwenden können. Weitere Informationen finden Sie unter Schnellstart: Hinzufügen von WinJS-Steuerelementen und -Stilen.
Sie sollten auch mit CSS vertraut sein. (Weitere Informationen zu CSS finden Sie unter Grundlagen von HTML/CSS/JavaScript.)

Vorteile der Verwendung von Stylesheets aus der Windows-Bibliothek für JavaScript

Die WinJS-Stylesheets bieten Folgendes:

Eine Reihe von Stilen, mit denen Sie Ihre Steuerelemente ansprechend gestalten können und die einwandfrei mit fingereingabebasierten Displays funktionieren.
Automatische Unterstützung von Modi mit hohem Kontrast. Bei der Entwicklung unserer Stile wurden hohe Kontraste berücksichtigt, sodass Ihre App auch auf einem Gerät im Modus mit hohem Kontrast gut dargestellt wird.
Automatische Unterstützung anderer Sprachen. Die WinJS-Stylesheets wählen automatisch die richtige Schriftart für jede Sprache aus, die Windows 8 unterstützt. Sie können sogar mehrere Sprachen in derselben App verwenden, die dann ebenfalls richtig dargestellt werden.
Automatische Unterstützung anderer Leserichtungen. HTML- und WinJS-Steuerelemente, Layouts und Stile werden automatisch an Sprachen mit Leserichtung von rechts nach links angepasst.

Verwenden der aktuellen Stylesheets aus der Windows-Bibliothek für JavaScript

So aktivieren Sie die aktuellen WinJS-Stylesheets:

Laden Sie die aktuelle Version unter WinJS herunterladen herunter, und kopieren Sie sie in das Verzeichnis für Ihre App oder Website.
Fügen Sie WinJS-CSS- und Skriptverweise zu allen Seiten Ihrer App oder Website hinzu, die WinJS-Features verwendet.

Dieses Beispiel zeigt, wie diese Verweise für eine App aussehen, die die WinJS-Dateien im Stammverzeichnis enthält.

    <!-- WinJS style sheets (include one) -->
    <link href="/WinJS/css/ui-dark.css" rel="stylesheet">
    <link href="/WinJS/css/ui-light.css" rel="stylesheet">

    <!-- WinJS code -->
    <script src="/WinJS/js/WinJS.js"></script>

WinJS bietet zwei Standard-Stylesheets, mit denen Sie das Erscheinungsbild Ihrer App an Windows anpassen können: „ui-dark.css“ und „ui-light.css“.

Für Apps, die hauptsächlich Bilder oder Videos anzeigen, empfehlen wir die Verwendung des dunklen Stylesheets.
Für Apps, die viel Text enthalten, wird die Verwendung des hellen Stylesheets empfohlen.

(Wenn Sie ein benutzerdefiniertes Farbschema verwenden, verwenden Sie das Stylesheet, das am besten zum Erscheinungsbild Ihrer App passt.)

Diese Stylesheets definieren folgende Stile:

Basisstile

Stile für die Elemente html, body und iframe.
Stile für systemeigene HTML-Steuerelemente

Stile für systemeigene HTML-Steuerelemente wie button.
Zusätzliche Klassen für systemeigene HTML-Steuerelemente

CSS-Klassen, die Sie systemeigenen HTML-Steuerelementen zuweisen können, um deren Erscheinungsbild zu ändern. Eine vollständige Liste dieser Klassen finden Sie unter CSS-Klassen für HTML-Steuerelemente.
Stile für WinJS-Steuerelemente

CSS-Klassen, die solche Teile von WinJS-Steuerelementen darstellen, auf die Formate angewendet werden können.
Typografische Stile

Stile für typografische Elemente wie „h1“, dd und „p“.
Zusätzliche typografische Klassen

CSS-Klassen, mit denen Sie Text formatieren können. Sie können z. B. mit der win-type-large-Klasse den Text eines Elements vergrößern.

Anpassen des Erscheinungsbildes Ihrer App

Wenn Sie das Erscheinungsbild Ihrer App anpassen möchten, sollten Sie nicht die WinJS-Stile verwerfen und ganz von vorn beginnen. Sie können auf ganz einfache Weise schrittweise Änderungen an der Formatierung vornehmen, indem Sie nur die Stile überschreiben, die Sie ändern möchten.

Es wird sogar empfohlen, die WinJS-Stile zu überschreiben, anstatt eigene zu erstellen. Wenn Ihre App im Modus mit hohem Kontrast ausgeführt wird, werden alle Änderungen an den Farben der Standardstile automatisch durch ein Farbschema überschrieben, das einen hohen Kontrast unterstützt.

Sie können sämtliche Stile im Standardstylesheet überschreiben, indem Sie Ihr eigenes Stylesheet erstellen und hinter dem WinJS-Stylesheet einfügen:


<!-- The WinJS style sheet. -->
<link href="/WinJS/css/ui-dark.css" rel="stylesheet">

<!-- Your style sheet for overriding portions of the default style sheet. -->
<link href="/css/mystylesheet.css" rel="stylesheet" />

So wird´s gemacht. Angeben von Farben

Sie können die WinJS-Stylesheets überschreiben oder eigene Stile angeben. Wenn Sie eigene Stile angeben möchten, sollten Sie die CSS-Systemfarben verwenden, da diese auch im Modus mit hohem Kontrast automatisch richtig dargestellt werden. Eine Liste der Systemfarben finden Sie unter Benutzerdefinierte Systemfarben.

Wenn Sie nicht die benutzerdefinierten Systemfarben verwenden und stattdessen einen RGB-Wert angeben, müssen Sie dazu einen vorhandenen WinJS-Stil überschreiben. Wenn Sie einen WinJS-Stil überschreiben und das System in den Modus mit hohem Kontrast wechselt, werden benutzerdefinierte Farbangaben ignoriert. Stattdessen wird eine Farbpalette verwendet, die mit dem Modus mit hohem Kontrast kompatibel ist.

Formatieren von HTML-Steuerelementen

Sie können HTML-Steuerelemente (Steuerelemente aus dem HTML5-Standard wie button, textarea und select) wie auf herkömmlichen HTML-Seiten mit CSS formatieren. (Weitere Informationen zu CSS und die Funktionsweise finden Sie unter Grundlagen von HTML/CSS/JavaScript. )

Wenn Sie also z. B. ein Eingabefeld so formatieren möchten, dass es 400 Pixel breit ist, schreiben Sie folgenden CSS-Code:

input[type=text]
{
    width: 400px;
}

Ein Texteingabesteuerelement

Steuerelemente enthalten i. d. R. mehrere Komponenten oder Teile. Das Texteingabesteuerelement aus dem vorherigen Beispiel besteht z. B. aus zwei Teilen: dem Textwert und der Schaltfläche für das Löschen.

Ein Texteingabesteuerelement mit beschrifteten Komponenten

Windows Store-Apps mit JavaScript bieten CSS-Pseudoelemente, mit denen Sie einzelne Teile vieler Steuerelemente formatieren können. Das Pseudoelement für den Texteingabewert ist "-ms-value", und das Pseudoelement für die Schaltfläche zum Löschen ist "-ms-clear".

Ein Texteingabesteuerelement mit Werten

Verwenden Sie zum Formatieren einer Steuerelementkomponente folgende Syntax:

element selector::part name { /* Ihre Stile */ }

Wenn Sie also die Schaltfläche zum Löschen des Eingabefelds formatieren möchten, erstellen Sie diesen Stil:

input[type=text]::-ms-clear
{
            border: 2px solid orange
}

Ein Texteingabesteuerelement, dessen Schaltfläche zum Löschen einen orangefarbenen Rahmen hat

Sie können die Selektoren für Pseudoelemente mit anderen Selektoren kombinieren, um als Ziel ein Steuerelement mit einem bestimmten Klassennamen oder einer bestimmten ID zu verwenden.

Um also die Schaltfläche zum Löschen aus einem Texteingabesteuerelement zu formatieren, das die "orangeButton"-Klasse verwendet, erstellen Sie folgenden Stil:

input[type=text].orangeButton::-ms-clear
{
            border: 2px solid orange
}

Weitere Informationen zu den unterschiedlichen Kombinationsmöglichkeiten von Pseudoelementen und anderen Selektoren finden Sie unter Grundlagen zu CSS-Selektoren.

Diese Komponenten sind bei HTML-Steuerelementen verfügbar.

Steuerelement	Komponenten
input type=checkbox	-ms-check
input type=radio	-ms-check
input type=password	-ms-reveal
input type=range	-ms-fill-lower, -ms-fill-upper, -ms-thumb, -ms-track, -ms-ticks-after, -ms-ticks-before, -ms-tooltip
input type=email, input type=number, input type=password, input type=search, input type=tel, input type=url	-ms-value,-ms-clear
input type=file	-ms-value, -ms-browse
progress	-ms-fill
select	-ms-value, -ms-expand

option-Elemente für Select-Steuerelemente bieten auch Unterstützung für CSS-Stile. So können Sie die Darstellung von Dropdownelementen, z. B. Farbe und Schriftschnitt, differenziert steuern. Dadurch werden Bearbeitungsszenarien wie das Steuerelement für die Schriftauswahl ermöglicht, bei denen Benutzer eine Vorschau der verschiedenen Schriftschnitte in einer Dropdownliste anzeigen können, bevor sie die zu verwendende Schriftart auswählen, wie hier zu sehen.


<select id="fontNameSelect" onChange="formatText('fontName')">
    <option style="font-family:Arial;">Arial</option>
    <option style="font-family:Comic Sans MS;">Comic Sans MS</option>
    <option style="font-family:Courier New;">Courier New</option>
    <option style="font-family:Cursive;">Cursive</option>
    <option style="font-family:Segoe Script;">Segoe Script</option>
</select>

Verwenden der HTML-Steuerelementklassen

Die Stylesheets enthalten CSS-Klassen, die Sie systemeigenen HTML-Steuerelementen zuweisen können, um deren Erscheinungsbild zu ändern. Sie können z. B. mit der win-backbutton-Klasse eine Standardschaltfläche erstellen, die wie die "Zurück"-Schaltfläche für das Navigieren aussieht.

<button class="win-backbutton"></button>

Wenn Sie die Klasse verwenden, wird die Schaltfläche wie folgt dargestellt:

Eine Schaltfläche mit der backbutton-CSS-Klasse

Formatieren von Steuerelementen aus der Windows-Bibliothek für JavaScript

Zum Formatieren eines WinJS-Steuerelements überschreiben Sie die WinJS CSS-Klassen für das jeweilige Steuerelement. Wenn Sie also eine AppBar formatieren möchten, überschreiben Sie die win-appbar-Klasse.

Das nächste Beispiel erstellt einen Stil, der die Statusanzeige einer ListView ausblendet.

.win-listView .win-progress {
    display: none;
}

Eine vollständige Liste der verfügbaren Klassen finden Sie unter WinJS-CSS-Klassen. Weitere Informationen zu den Klassen, die ein spezielles Steuerelement verwendet, finden Sie auf der Referenzseite des Steuerelements.

Einige Steuerelemente wie ListView und FlipView unterstützen auch Elementvorlagen. Mit Elementvorlagen haben Sie umfassende Kontrolle über das Erscheinungsbild und den Inhalt von Listenelementen. Weitere Informationen finden Sie unter Schnellstart: Hinzufügen von ListView-Steuerelementen und Schnellstart: Hinzufügen von FlipView-Steuerelementen.

Verwenden der typografischen Klassen

Das Stylesheet enthält auch CSS-Klassen für die Typografie, die Sie auf Elemente mit Text anwenden können. Sie können z. B. einer Überschrift mit der win-title-Klasse das Titelformat von Windows 8 verleihen. Dieses Beispiel verwendet die typografischen Klassen für das Erstellen unterschiedlicher Arten von Titeln.


     <p class="win-type-xx-large">win-type-xx-large</p>
     <p class="win-type-medium">win-type-medium</p>
     <p class="win-type-xx-small">win-type-xx-small</p>

Element, die typografische Klassen verwenden

Eine vollständige Liste der typografischen Klassen finden Sie unter Typografische CSS-Klassen.

Beispiele

Wenn Sie mehr über das Formatieren erfahren möchten, sehen Sie sich die folgenden Beispiele an:

Zusammenfassung

Sie haben erfahren, wie Sie die WinJS-Stylesheets verwenden, wie Sie systemeigene Steuerelemente und WinJS-Steuerelemente formatieren und wie Sie die anderen von WinJS für die Typografie bereitgestellten CSS-Klassen verwenden.