Schnellstart: Definieren von App-Layouts (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 für beliebige Fenstergrößen oder -ausrichtungen App-Layouts definieren.
Sehen Sie dieses Feature in unserer Reihe App-Features von A bis Z in Aktion.: Windows Store-App-Benutzeroberfläche von A bis Z
Ziel: Dieser Artikel enthält grundlegende Informationen darüber, wie Sie HTML, Cascading Stylesheets (CSS) und JavaScript verwenden können, um eine dynamische Benutzeroberfläche zu erstellen, die in allen Ansichtszuständen optisch ansprechend ist und einwandfrei funktioniert.
Voraussetzungen
Machen Sie ein Konzept für das Design Ihrer App.
Ausführliche Informationen zum Planen und Entwerfen einer Windows-Runtime-App finden Sie unter Definieren von Vision.
Machen Sie sich mit Fenstern in Windows 8.1 vertraut, deren Größe änderbar ist.
Weitere Informationen zu Anzeigemodi finden Sie unter UX-Richtlinien für Layout und Skalierung.
Machen Sie sich mit CSS-Medienabfragen vertraut.
Medienabfragen sind in der Spezifikation für Medienabfragen des World Wide Web Consortium (W3C) definiert. In unserem Beispiel "CSS-Modul für Medienabfragen" sehen Sie Medienabfragen in Aktion.
Machen Sie sich mit der Verwendung der erweiterten Layoutfeatures von Cascading Stylesheets, Level 3, (CSS3) und hierbei insbesondere mit der CSS3-Rasterausrichtung vertraut.
Informationen zu den erweiterten Layoutfeatures von CSS3 und der Rasterausrichtung finden Sie unter CSS.
Das Beispiel "Adaptives Layout mit CSS"
In diesem Artikel werden die grundlegende Konzepte für das Definieren eines App-Layouts erläutert, indem beschrieben wird, wie Layouts im Beispiel "Adaptives Layout mit CSS" implementiert werden. Bei diesem Beispiel handelt es sich um eine simulierte Wetter-App, die das Wetter des aktuellen Tages sowie eine Zehn-Tage-Prognose anzeigt. In dem Beispiel wird gezeigt, wie CSS und HTML, das CSS-Raster, das ListView-Steuerelement und CSS-Medienabfragen verwendet werden, um ein dynamisches App-Layout zu erstellen.
Bevor wir auf die Details eingehen, wollen wir einen Blick auf die Struktur des Beispiels "Adaptives Layout mit CSS" werfen. Die App besteht aus drei HTML-Seiten. Die erste Seite ist eine Seite oberster Ebene mit dem Namen App.html. Sie definiert die Hauptoberfläche für die UI-Elemente der App. Sie enthält eine Zurück-Schaltfläche, einen Titel und einen untergeordneten Titel, ein App-Menü, die Schaltflächen der App-Leiste und einen Bereich zum Anzeigen von Inhalten (der weiße Bereich in der folgenden Abbildung).
.png "Die Hauptseite der Beispiel-App")
Die beiden anderen HTML-Seiten, Current.html und TenDay.html, definieren die Struktur der Inhalte, die im Inhaltsbereich der Hauptseite angezeigt werden. Auf der Seite Current.html werden Detailinformationen zum Wetter des aktuellen Tages angezeigt:
.png "Die Seite für das aktuelle Wetter")
Auf der Seite TenDay.html werden Detailinformationen zur Zehn-Tage-Prognose angezeigt:
.png "Die Seite für die Zehn-Tage-Prognose")
Wir konzentrieren uns hier auf die Teile des Beispiels Adaptives Layout mit CSS, die das Layout der App-Hauptseite und der Zehn-Tage-Prognose definieren.
Die Hauptseite der App sieht folgendermaßen aus, wenn die Zehn-Tage-Prognose auf einem 10,6"-Display mit einer Auflösung von 1366 x 768 im Hoch- und Querformat und Vollbildmodus angezeigt wird und wenn sie neben einer anderen App platziert und die Größe in ein enges und ein breiteres Layout geändert wird.
.png "Hochformat, Querformat, schmale und breite Layouts")
Stellen Sie sicher, dass die App den verfügbaren Bildschirmbereich ausfüllt
Eine gut gestaltete App verfügt über eine Benutzeroberfläche, die den gesamten verfügbaren Bildschirmbereich einnimmt. Angesichts der Vielzahl unterschiedlicher Formfaktoren, Auflösungen und Ausrichtungen, denen Apps Rechnung tragen müssen, scheint dies auf den ersten Blick ein schwieriges Vorhaben zu sein. Dank CSS lässt sich diese Aufgabe jedoch leicht lösen.
So stellen Sie sicher, dass die App den verfügbaren Bildschirmbereich ausfüllt
Verwenden Sie ein div-Element, das als Container oberster Ebene für alle anderen UI-Elemente auf der Seite dient.
<body> <div class="win-ui-dark appGrid"> <!-- TODO: Define page structure here. --> </div> </body>Verwenden Sie die CSS-Eigenschaften vw und vh, um die Eigenschaft width und height des div-Elements relativ zum Viewport festzulegen. Füllen Sie beispielsweise wie hier dargestellt den Viewport mit
100vw(Viewportbreite) und100vh(Viewporthöhe)..appGrid { width: 100vw; height: 100vh; /* TODO: Add other styles here. */ }vw und vh können für alle Elemente unabhängig von ihrer Position in der Hierarchie angegeben werden. Da sich der Kontext der Größenanpassung für den Viewport nicht ändert, muss die vererbte Größe nicht berücksichtigt werden.
Hinweis Im Beispiel werden die Eigenschaften width und height auf 100 % festgelegt.
Definieren Sie das Basislayout der Hauptseite
Beim Gestalten der Benutzeroberfläche Ihrer App empfiehlt es sich, mit dem Querformat zu beginnen. Nach dem Definieren des Querformatlayouts ist das Anpassen des Layouts für das Hochformat und Layouts mit schmaler Breite ein Kinderspiel.
Verwenden Sie HTML, um die UI-Elemente für die Seite zu definieren
Die Benutzeroberfläche einer App enthält üblicherweise Elemente wie Navigationsschaltflächen, Überschriften, Menüs, Steuerelemente usw. Fügen Sie diese UI-Elemente als untergeordnete HTML-Elemente des div-Elements oberster Ebene für die Seite hinzu.
Im folgenden HTML-Code werden die UI-Elemente für die App-Seite oberster Ebene aus dem Beispiel "Adaptives Layout mit CSS" definiert. Zu diesen Elementen gehören die Zurück-Schaltfläche, der Titel und der untergeordnete Titel, das App-Menü, der Hauptinhaltsbereich und die Schaltflächen der App-Leiste.
<body>
<div class="win-ui-dark appGrid">
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="win-type-xx-large titlecontainer" tabindex="0"><span class="pagetitle">Mountains</span><span class="win-type-x-large chevron"></span></span>
<span class="win-type-x-large pagesubtitle">Rainer</span>
</h1>
</header>
<div id="headerFlyout" data-win-control="WinJS.UI.Menu">
<button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'rainierMenuItem', label:'Rainier'}"></button>
<button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'stHelensMenuItem', label:'St. Helens'}"></button>
<button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'olympusMenuItem', label:'Olympus'}"></button>
<button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'bakerMenuItem', label:'Baker'}"></button>
<button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'adamsMenuItem', label:'Adams'}"></button>
</div>
<div class="appViewContentMask">
<div class="appViewContent">
<div id="current-page" class="page" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/html/current.html', data: FluidAppLayout.Data.mountains[0].weatherData[0]}"></div>
<div id="ten-day-page" class="page" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/html/tenDay.html', data: FluidAppLayout.Data.mountains[0].weatherData}"></div>
</div>
</div>
</div>
<div id="appbar" class="win-ui-dark appbar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id: 'current', label: 'Current', icon: 'calendarday', type: 'toggle', onclick: FluidAppLayout.transitionPivot, selected: 'false', tooltip: 'Get the current report'}"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id: 'tenDay', label: 'Ten day', icon: 'calendarweek', type: 'toggle', onclick: FluidAppLayout.transitionPivot, selected: 'false', tooltip: 'Get the ten day report'}"></button>
</div>
</body>
Verwenden Sie CSS-Raster, um UI-Elemente auf der HTML-Seite zu positionieren
Eine der besten Methoden, um ein dynamisches und variables UI-Layout zu erzielen, ist die Verwendung von CSS-Rastern. Das Raster kann sich automatisch ausdehnen, um den verfügbaren Platz auszufüllen, und macht eine Fülle an Eigenschaften verfügbar, mit deren Hilfe es ganz leicht ist, das UI-Layout auf verschiedene Fenstergrößen abzustimmen. Da die Position von Elementen in einem Raster unabhängig von der Reihenfolge ist, in der sie festgelegt wurden — d. h., ihre Position wird ausschließlich von CSS und nicht von ihrer Reihenfolge im HTML-Markup vorgegeben —, können Elemente bei unterschiedlichen Bildschirmgrößen oder Ausrichtungen problemlos unterschiedlich angeordnet werden. Es ist sogar möglich, bestimmte Elemente in einigen Layouts vollständig auszublenden.
Gestalten der Hauptseite
In der App im Beispiel "Adaptives Layout mit CSS" wird ein CSS-Raster auf das div-Element oberster Ebene der Seite "App.html" angewendet, indem die display-Eigenschaft des div-Elements auf
-ms-gridfestgelegt wird. Dieses Raster oberster Ebene definiert die Gesamtstruktur für die Positionierung von UI-Elementen auf der Hauptseite der App.Danach werden in der Beispiel-App die Spalten und Zeilen des Rasters definiert, indem der Wert der Eigenschaften -ms-grid-columns und -ms-grid-rows festgelegt wird.
Durch den folgenden CSS-Code wird ein Raster auf das div-Element oberster Ebene der App-Hauptseite angewendet. Dieses Raster wird verwendet, um die Elemente zu positionieren, aus denen der App-Kopf (die Zurück-Schaltfläche, der Titel und der untergeordnete Titel und das App-Menü) besteht, und um die Position des Hauptinhaltsbereichs festzulegen.
.appGrid { display: -ms-grid; -ms-grid-columns: 120px 1fr; -ms-grid-rows: 120px 1fr; /* Other properties omitted for clarity. */ }Durch den oben gezeigten CSS-Code wird ein Raster mit zwei Spalten und zwei Zeilen erstellt. Die erste Spalte ist 120 Pixel und die zweite Spalte eine "Bruchteileinheit" breit. Das bedeutet, dass die Spaltenbreite automatisch vergrößert wird, um den verfügbaren Platz auszufüllen, der nicht von der ersten Spalte beansprucht wird. Die Zeilen werden auf gleiche Weise definiert.
Diese Abbildung zeigt, wie das Raster die Hauptseite der App aufteilt:
.png "Das Raster der Hauptseite")
Anschließend wird im Beispiel "Adaptives Layout mit CSS" die Position der UI-Elemente festgelegt, indem jedes Element einer bestimmten Zelle im Raster zugewiesen wird. Hierzu werden im Beispiel die Eigenschaften -ms-grid-column und -ms-grid-row auf Elemente der Seite angewendet. Das CSS-Raster unterstützt mehrere weitere Eigenschaften, um Elemente relativ zu den Zellengrenzen zu positionieren und zuzulassen, dass sich Elemente über mehrere Spalten oder Zeilen erstrecken. Weitere Informationen finden Sie unter Rasterlayout.
Durch den folgenden CSS-Code wird das header-Element der Hauptseite der Beispiel-App in Spalte 1, Zeile 1, des Rasters oberster Ebene positioniert, und es wird zugelassen, dass sich das Element über beide Spalten des Rasters erstreckt. Durch den Code wird außerdem ein untergeordnetes Raster in Spalte 1, Zeile 1, des Rasters oberster Ebene erstellt. Das untergeordnete Raster wird verwendet, um die einzelnen Elemente zu platzieren, aus denen sich der Kopf (Zurück-Schaltfläche, Titel und untergeordneter Titel und App-Menü) zusammensetzt.
header[role=banner] { -ms-grid-column: 1; -ms-grid-row: 1; -ms-grid-column-span: 2; /* Child grid for positioning header items.*/ display: -ms-grid; -ms-grid-columns: 120px 1fr; -ms-grid-rows: 1fr; }Durch den oben gezeigten Code wird ein Raster in dem Bereich erstellt, der in der folgenden Abbildung blau hervorgehoben ist.
.png "Das untergeordnete Raster für den Kopf der Beispiel-App")
Im Beispiel "Adaptives Layout mit CSS" werden geschachtelte div-Elemente verwendet, um den Hauptinhaltsbereich zu definieren, in dem die aktuelle Vorhersage und die Zehn-Tage-Prognose angezeigt werden.
<div class="appViewContentMask"> <div class="appViewContent"> <div id="current-page" class="page" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/html/current.html', data: FluidAppLayout.Data.mountains[0].weatherData[0]}"></div> <div id="ten-day-page" class="page" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/html/tenDay.html', data: FluidAppLayout.Data.mountains[0].weatherData}"></div> </div> </div>Wie Sie sehen, wird im vorherigen Beispiel das HtmlControl-Steuerelemente der Windows-Bibliothek für JavaScript verwendet, um die HTML-Seiten für die aktuelle Vorhersage und die Zehn-Tage-Prognose dynamisch einzubinden. Weitere Informationen zu WinJS-Steuerelementen finden Sie unter Schnellstart: Hinzufügen von WinJS-Steuerelementen und -Stilen.
Durch den folgenden CSS-Code wird das
appViewContentMask-div-Element in Spalte 2, Zeile 2, des Rasters oberster Ebene positioniert. Außerdem werden Eigenschaften festgelegt, um sicherzustellen, dass der Inhalt die ganze Rasterzelle ausfüllt und dass Inhalte, die nicht in die Zelle passen, ausgeblendet werden..appViewContentMask { -ms-grid-column: 2; -ms-grid-row: 2; width: 100%; height: 100%; overflow: hidden; /* Other properties omitted for clarity. */ }Durch den folgenden CSS-Code wird das
appViewContent-div-Element in ein untergeordnetes Raster mit einer einzigen Zelle umgewandelt, die den durch dasappViewContentMask-div-Element definierten Bereich ausfüllt. Durch die Verwendung eines untergeordneten Rasters ist es leicht, den Inhalt dynamisch umbrechen zu lassen, wenn der Ansichtszustand die Größe oder Ausrichtung der App ändert..appViewContent { width: 100%; height: 100%; display: -ms-grid; -ms-grid-columns: 1fr; -ms-grid-rows: 1fr; }Der CSS-Code weist das Raster für den Inhaltsbereich zu dem blau hervorgehobenen Bereich zu:
.png "Das Raster im Inhaltsbereich der Beispiel-App")
Definieren Sie das Basislayout für die Zehn-Tage-Prognose
Die Zehn-Tage-Prognose ist eine Sammlung von Elementen, die mithilfe eines WinJS ListView-Steuerelements verwaltet und angezeigt werden. Jedes Element besteht aus einem Bild und einem Satz von Zeichenfolgen (Datum, Höchst- und Tiefsttemperatur, gefühlte Temperatur und Schneewahrscheinlichkeit):
.png "Layoutelemente in der Zehn-Tage-Prognose")
Die folgende HTML-Seite definierte die Benutzeroberfläche für die Elemente in der Zehn-Tage-Prognose. Im Beispiel "Adaptives Layout mit CSS" werden WinJS-Vorlagen und Datenbindungen verwendet, um Daten für das ListView-Steuerelement bereitzustellen. In diesem Thema geht es um die Gestaltung der Benutzeroberfläche; Vorlagen und Datenbindungen werden an dieser Stelle daher nicht weiter behandelt. Wenn Sie mehr über Vorlagen und Datenbindungen erfahren möchten, finden Sie entsprechende Informationen unter So wird's gemacht: Verwenden von Vorlagen zum Binden von Daten.
<body>
<div class="tenDayPage">
<div id="tenDayTemplate" class="tenDayTemplate" data-win-control="WinJS.Binding.Template">
<div class="tenDayGrid">
<div class="win-type-x-large tenDayDate" data-win-bind="innerHTML: date">
</div>
<div class="tenDayImg">
<img data-win-bind="src: imgSrc" />
</div>
<div class="win-type-x-large tenDayHighLow">
<span class="tenDayHigh" data-win-bind="innerHTML: hi"></span>
<span>/</span>
<span class="tenDayLow" data-win-bind="innerHTML: low"></span>
</div>
<div class="tenDayFeelsLike">
<span>Feels like </span>
<span data-win-bind="innerHTML: feelsLike"></span>
</div>
<div class="tenDayChanceOfSnow">
<span>Chance of snow is </span>
<span data-win-bind="innerHTML: chanceOfSnow"></span>
</div>
</div>
</div>
<div id="tenDayListView" class="tenDayListView" data-win-control="WinJS.UI.ListView" data-win-options="{layout: {type: WinJS.UI.GridLayout}}"></div>
</div>
</body>
Im oben gezeigten Beispiel werden spezielle WinJS CSS classes for typography verwendet, um einen extra großen Schriftgrad für die Zeichenfolgen für das Datum und die Höchst- und Tiefsttemperaturen festzulegen. Das ist die Bedeutung von class="win-type-x-large" in den tenDayDate- und tenDayHighLow-div-Elementen.
In der Beispiel-App wird der folgende CSS-Code verwendet, um sicherzustellen, dass die Seite "TenDay.html" und das zugehörige ListView-Steuerelement den übergeordneten Container (den Inhaltsbereich der App-Hauptseite) ausfüllen.
/* Size Page to full size of parent container */
.tenDayPage
{
height: 100%;
}
/* List View Control */
.tenDayListView
{
width: 100%;
height: 100%;
}
Verwenden Sie CSS-Medienabfragen, um ansichtsspezifische Layouts und Stile anzuwenden
Mithilfe von CSS-Medienabfragen können Sie je nach Fenstergröße problemlos verschiedene Stile für die Anwendung auf die HTML-Elemente in der App definieren. Sie können für alle verschiedenen Layouts eine separate Medienabfrage verwenden oder Medienabfragen kombinieren, um den gleichen Satz von Stilen auf mehrere Layouts anzuwenden. In diesem Artikel werden die Medienabfragen beschrieben, die im Beispiel "Adaptives Layout mit CSS" verwendet werden, um die Hauptseite zu gestalten und die Elemente in der Zehn-Tage-Prognose anzuordnen.
Gestalten der Hauptseite für ein schmales Layout
Wenn Sie die Beispiel-App verwenden, werden Sie feststellen, dass sich Größe und Layout der UI-Elemente zwischen Hochformat, Querformat und Layouts mit geänderter Größe nicht wesentlich unterscheiden. Bei einer Größenänderung der App auf eine Breite, die weniger als 500 Pixel beträgt, sind jedoch die folgenden Änderungen erkennbar:
- Die UI-Elemente im App-Kopf werden kleiner.
- Das Layout wechselt von einem Layout mit zwei Spalten und zwei Zeilen zu einem einspaltigen Layout, in dem der Kopf die erste Zeile und der Hauptinhaltsbereich die zweite Zeile belegt.
.png "Unterschiede beim Kopflayout zwischen schmalen und breiten Layouts")
Diese Änderungen werden durch eine CSS-Medienabfrage angewendet, die speziell für schmale Breiten einen anderen Satz mit Stilen definiert:
@media (max-width:499px) {
.appGrid {
display: -ms-grid;
-ms-grid-columns: 1fr;
-ms-grid-rows: 120px 1fr;
width: 100%;
height: 100%;
}
header[role=banner] {
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-columns: 60px 1fr;
-ms-grid-rows: 1fr;
display: -ms-grid;
}
header[role=banner] .win-backbutton {
-ms-grid-column: 1;
-ms-grid-row: 1;
margin-left: 20px;
margin-top: 75px;
}
header[role=banner] .titlearea {
-ms-grid-column: 2;
-ms-grid-row: 1;
margin-top: 69px;
max-width: 260px;
}
.appViewContentMask {
-ms-grid-column: 1;
-ms-grid-row: 2;
}
Im vorherigen CSS-Code bewirkt ein neuer Wert für die –ms-grid-columns-Eigenschaft, dass das App-Hauptraster (appGrid) von einem zweispaltigen zu einem einspaltigen Layout wechselt. Der CSS-Code definiert außerdem ein neues untergeordnetes Raster für die Elemente im App-Kopf und positioniert die zugehörigen Elemente im neuen Raster. Abschließend bewirkt der Code, dass der Inhaltsbereich (appViewContentMask) von Spalte 2, Zeile 2, des alten Rasters in Spalte 1, Zeile 2, des neuen Rasters verschoben wird.
Gestalten der Zehn-Tage-Prognose für ein schmales Layout
Sie können die Änderungen am Layout der einzelnen Elemente in der Zehn-Tage-Prognose bemerken, wenn Sie die Größe der App so ändern, dass die Breite weniger als 500 Pixel beträgt. Wenn die Breite größer als 500 Pixel ist, werden die Elemente vertikal in einem Raster mit einer Spalte angeordnet. Wenn die Breite kleiner als 500 Pixel ist, werden die Elemente zu einer horizontalen Ausrichtung in einem Raster mit einer Spalte angeordnet.
Die folgende Abbildung zeigt, wie ein Element in der Zehn-Tage-Prognose in den verschiedenen Layouts aussieht.
.png "Unterschiede beim Elementlayout zwischen schmalen und breiten Layouts")
Um die unterschiedlichen Layouts umzusetzen, kommen CSS-Medienabfragen zum Einsatz, damit Stile auf der Basis des aktuellen Ansichtszustands angewendet werden können. In dem Beispiel wird ein Satz mit Stilen definiert, die in allen Ansichtszuständen gleich sind. Ein weiterer Satz wird nur für die Layouts verwendet, wenn die Breite weniger als 500 Pixel beträgt:
/* Styles that are common across all view states */
.tenDayGrid
{
width: 190px;
height: 250px;
overflow: hidden;
padding: 10px;
display: -ms-grid;
-ms-grid-columns: 1fr;
-ms-grid-rows: (auto)[5];
}
.tenDayDate
{
-ms-grid-column: 1;
-ms-grid-row: 1;
}
.tenDayImg
{
-ms-grid-column: 1;
-ms-grid-row: 2;
}
.tenDayHighLow
{
-ms-grid-column: 1;
-ms-grid-row: 3;
}
.tenDayFeelsLike
{
-ms-grid-column: 1;
-ms-grid-row: 4;
}
.tenDayChanceOfSnow
{
-ms-grid-column: 1;
-ms-grid-row: 5;
}
}
/* Define the template for the width less than 500px */
@media (max-width:499px)
{
.tenDayDate
{
font-weight: 600;
}
.tenDayDate > .day
{
font-weight: 200;
}
.tenDayHighLow
{
font-weight: 300;
}
.tenDayFeelsLike, .tenDayChanceOfSnow
{
font-weight: 300;
}
.tenDayGrid
{
width: 250px;
height: 150px;
overflow: hidden;
padding: 10px;
display: -ms-grid;
-ms-grid-columns: auto 1fr;
-ms-grid-rows: (auto)[4];
}
.tenDayDate
{
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-column-span: 2;
}
.tenDayImg
{
-ms-grid-column: 1;
-ms-grid-row: 2;
-ms-grid-row-span: 3;
}
.tenDayHighLow
{
-ms-grid-column: 2;
-ms-grid-row: 2;
}
.tenDayFeelsLike
{
-ms-grid-column: 2;
-ms-grid-row: 3;
}
.tenDayChanceOfSnow
{
-ms-grid-column: 2;
-ms-grid-row: 4;
}
}
Verwenden Sie JavaScript, um falls erforderlich Fenstergrößen-Änderungsereignisse zu verarbeiten
Es empfiehlt sich, das Layout einer App so weit wie möglich mithilfe von CSS und Medienabfragen zu definieren. Manchmal müssen Sie jedoch JavaScript verwenden, um Layoutfragen zu lösen, auf die CSS keine Antwort hat.
In der Beispiel-App wird beispielsweise ein WinJS ListView-Steuerelement verwendet, um die Elemente in der Zehn-Tage-Prognose anzuzeigen, und je nach App-Breite wechselt das ListView-Steuerelement vom Listen- in den Rastermodus oder umgekehrt. Wenn die Breite der Beispiel-App 500 Pixel oder mehr beträgt, verwendet das ListView-Steuerelement den Rastermodus, um Elemente vertikal und horizontal so anzuordnen, dass der übergeordnete Container ausgefüllt ist. Wenn die Breite der App weniger als 500 Pixel beträgt, verwendet das ListView-Steuerelement den Listenmodus, um die Elemente in einer vertikalen Liste anzuordnen.
Um ansichtsspezifische Layouts in JavaScript zu erstellen, müssen Sie einen Ereignislistener für das Fenstergrößen-Änderungsereignis registrieren. Fragen Sie im Code des Ereignislisteners die clientWidth-Eigenschaft ab, und konfigurieren Sie das Layout entsprechend.
Im folgenden Beispiel wird das Beispiel "Adaptives Layout mit CSS" verwendet, um das ListView-Steuerelement auf den Rastermodus festzulegen. Wenn die Fensterbreite weniger als 500 Pixel beträgt, wechselt das ListView-Steuerelement in den Listenmodus. Der Ereignislistener der App wartet auf das Größenänderungsereignis und fragt dann die clientWidth-Eigenschaft ab und ändert das ListView-Steuerelement entsprechend.
function ready(element, options) {
element.winControl = this;
var that = this;
WinJS.UI.process(element).done(function () {
that.listView = element.querySelector(".tenDayListView").winControl;
var itemTemplate = element.querySelector(".tenDayTemplate");
var listViewLayout = new WinJS.UI.GridLayout();
if (document.body.clientWidth <= 499) {
listViewLayout = new WinJS.UI.ListLayout();
}
else {
element.style.opacity = "0";
}
// ...
window.addEventListener("resize", tenDayResize, false);
});
}
function tenDayResize(e) {
var listview = document.querySelector(".tenDayListView").winControl;
if (document.body.clientWidth <= 499) {
if (!(listview.layout instanceof WinJS.UI.ListLayout)) {
listview.layout = new WinJS.UI.ListLayout();
}
}
else {
if (listview.layout instanceof WinJS.UI.ListLayout) {
listview.layout = new WinJS.UI.GridLayout();
}
}
}
Zusammenfassung
Sie sollten nun wissen, wie Sie HTML, CSS und JavaScript verwenden müssen, um eine dynamische Benutzeroberfläche für Ihre App zu erstellen, die in allen Fenstergrößen optisch ansprechend ist und einwandfrei funktioniert.
Verwandte Themen
Beispiel "Adaptives Layout mit CSS"
Beispiel "CSS-Modul für Medienabfragen"