Language: HTML | XAML

Schnellstart: Formatieren von Steuerelementen (HTML)

Applies to Windows and Windows Phone

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

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

Die WinJS-Stylesheets bieten Folgendes:

  • Eine Reihe von Stilen, die Ihrer App automatisch das Erscheinungsbild von Windows 8 verleihen. Wenn Sie das Stylesheet einfügen, wird automatisch die Darstellung Ihrer Steuerelemente angepasst. Außerdem arbeiten Sie optimal mit berührungsgesteuerten Displays zusammen.
  • 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 von Stylesheets aus der Windows-Bibliothek für JavaScript

Wenn Sie mit Microsoft Visual Studio ein neues Projekt erstellen, werden automatisch alle erforderlichen Dateien aus der Windows-Bibliothek für JavaScript hinzugefügt. Dazu gehören auch die beiden WinJS-Stylesheets. Um die Stylesheets zu verwenden, fügen Sie einfach im head-Element Ihrer HTML-Seite einen Verweis auf eines der Stylesheets hinzu:

WinJS-Stylesheet-Referenz für Windows


<!DOCTYPE html>
<html>
<head>
    
    <!-- A WinJS style sheet. -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">

</head>
<body>
    
</body>
</html>

WinJS-Stylesheet-Referenz für Windows Phone


<!DOCTYPE html>
<html>
<head>
    
    <!-- A WinJS style sheet. -->
    <link href="/css/ui-themed.css" rel="stylesheet" />

</head>
<body>
    
</body>
</html>

WinJS bietet zwei Standard-Stylesheets, mit denen Sie das Erscheinungsbild Ihrer App an Windows anpassen können: "ui-dark.css" und "ui-light.css". 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. Eine vollständige Liste dieser typografischen Klassen finden Sie unter CSS-Klassen für die Typografie.

Hinzufügen des hellen oder dunklen Stylesheets

Wie bereits unter Schnellstart: Hinzufügen von WinJS-Steuerelementen und -Stilen beschrieben, werden beim Erstellen eines neuen Projekts für eine Windows-Runtime-App mit JavaScript in Visual Studio automatisch die erforderlichen WinJS-Dateien und -Verweise hinzugefügt.

In der Voreinstellung enthält jede HTML-Seite für Ihr Projekt einen Verweis auf das dunkle Stylesheet.


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

WinJS bietet zudem ein helles Stylesheet. Sie können es hinzufügen, indem Sie den Verweis auf das dunkle Stylesheet wie folgt ersetzen:


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

Sie sollten stets eines dieser Stylesheets hinzufügen. Bei Apps, die meist Bilder oder Videos anzeigen, sollten Sie das dunkle Stylesheet verwenden, während bei Apps mit viel Text das helle Stylesheet empfohlen wird. (Wenn Sie ein benutzerdefiniertes Farbschema verwenden, verwenden Sie das Stylesheet, das am besten zum Erscheinungsbild Ihrer App passt.)

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="//Microsoft.WinJS.2.0/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.

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

Verwandte Themen

Grundlagen von HTML/CSS/JavaScript
Grundlagen zu CSS-Selektoren
WinJS-CSS-Klassen
CSS-Klassen für HTML-Steuerelemente
API-Referenz für Windows-Runtime und die Windows-Bibliothek für JavaScript

 

 

Anzeigen:
© 2014 Microsoft