Definieren von Layouts und Ansichten (HTML)
[ 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 Windows-Runtime-Apps erstellen, die durch konsistente und vorhersagbare Verwaltung der Benutzeroberfläche eine dynamische und harmonische Erfahrung für eine Vielzahl von Formfaktoren, Anzeigegrößen und Ansichtszuständen bieten. Sie möchten, dass Ihre App toll aussieht, wenn Benutzer sie auf einem Smartphone, auf einem Tablet oder auf einem großen HD-Monitor anzeigen, den Bildschirm in das Hochformat drehen oder die App-Größe ändern. Wenn Sie die von Ihren Benutzern verwendeten Geräte und Ansichten berücksichtigen, kann Ihre UI elegant dynamisch umgebrochen werden.
.png "Vollbild im Querformat, Vollbild im Hochformat und schmale Ansicht nach Größenänderung")
Beim Angeben der UI einer Windows-Runtime-App mit JavaScript sind zwei primäre Faktoren wichtig: die von der App unterstützten Ansichten und die für die App erforderlichen Layouts. Sie verwenden Cascading Stylesheets (CSS), um die Arbeit zu erledigen.
CSS Sie beschreiben und verwalten Ihre Benutzeroberfläche durch standardbasiertes CSS, das den Inhalt von der Darstellung trennt, d. h. das, was dargestellt ist, wird von dem getrennt, wie es dargestellt ist. Durch diese Trennung können Sie eine konsistente, brauchbare und angenehme Benutzeroberfläche bereitstellen, die mehrere Geräte, Formfaktoren, Bildschirmgrößen, Benutzereinstellungen und Ansichtszustände unterstützt.
Layouts Layouts sind Mechanismen, mit denen Ihre App die von ihr unterstützten Ansichten anpasst. Sie entwerfen, strukturieren und präsentieren Ihren Inhalt mithilfe von CSS3-Layoutmodulen (Cascading Stylesheets, Level 3) wie Rastern, mehreren Spalten, Bereichen und FlexBoxes, die sich an die vom Benutzer gewählte Ansicht anpassen können.
Eine App mit der Funktion semantischer Zoom kann semantische Schwellenwerte angeben, sodass die UI je nach Granularität und Menge der angezeigten Informationen zwischen einem Rasterlayout und einem linearen Layout wechseln kann.
Ansichten Eine Ansicht ist die Art und Weise, in der ein Benutzer auf Inhalt zugreift und ihn ändert.
- Ausrichtung im Querformat oder Hochformat
- Vollbild oder geänderte Größe
- Schwenkbare, zoomfähige, skalierte oder in der Größe geänderte Benutzeroberfläche
- Bestimmte UI-Elements wie ein Suchergebnisbereich oder eine Ordnerstruktur
Zum Definieren von Layouts und Ansichten für eine Windows-Runtime-App müssen Sie mit HTML, JavaScript und CSS vertraut sein.
Inhalt dieses Abschnitts
| Thema | Beschreibung |
|---|---|
Sie können für beliebige Fenstergrößen oder -ausrichtungen App-Layouts definieren. |
|
Schnellstart: Entwerfen von Apps für verschiedene Fenstergrößen |
Wenn Sie eine App so entwerfen möchten, dass sie bei allen Fenstergrößen gut aussieht und funktioniert, müssen Sie die Entscheidung treffen, ob Sie zusätzliche Layouts als Erweiterung des standardmäßigen horizontalen Vollbildlayouts erstellen möchten. |
Sie können den Benutzern bei der Steigerung ihrer Produktivität helfen, indem Sie ihnen das Anzeigen mehrerer voneinander unabhängiger Funktionen in separaten Fenstern ermöglichen. |
|
Wenn Sie den Benutzern Ihrer Windows-Runtime-App eine Benutzeroberfläche bieten möchten, die so flexibel und anpassbar wie möglich ist, müssen Sie zunächst den für Ihren Inhalt und die Ansichten, über die der Inhalt genutzt wird, am besten geeigneten Layoutmodus auswählen. In diesem Thema werden die Cascading Stylesheet-Layoutfeatures der Stufe 3 (CSS3) beschrieben, die in Windows 8 für Windows Store-Apps unterstützt werden. |
|
Mithilfe der im Folgenden beschriebenen Gestaltungsmuster können Sie das Layout der UI-Elemente auf den Seiten Ihrer App festlegen. Durch ein durchgängiges Muster für Ränder, Seitenköpfe, Bundstegbreiten und weitere vergleichbare Elemente wird app-übergreifend ein geschlossenes Gesamtbild gewahrt, und Sie erreichen, dass die Benutzer Interaktionen überall im System leichter verstehen können. |