Schnellstart: Entwerfen von Apps für verschiedene Fenstergrößen

Artikel
12/12/2015

[ 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]

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 die App so anlegen, dass sie anstelle der Standardmindestbreite von 500 Pixel eine Mindestbreite von 320 Pixel unterstützt und dass zu einem vertikalen Layout gewechselt wird, wenn die Höhe der App ihre Breite übersteigt. Dies sind optionale Entwurfsentscheidungen.

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: In diesem Artikel wird erläutert, wie Sie die Mindestbreite einer App von 500 Pixel in 320 Pixel ändern und das Design so anpassen, dass die App auch bei geringer Breite gut aussieht und funktioniert. Außerdem erfahren Sie, wie Sie eine horizontal schwenkbare App entwerfen, um immer dann zu einem vertikalen Layout zu wechseln, wenn die Höhe der App ihre Breite übersteigt.

Voraussetzungen

Erstellen Ihrer ersten Windows Store-App mit JavaScript

UX-Richtlinien für Layout und Skalierung

Beispiel: Layout für Fenster, deren Höhe ihre Breite übersteigt

In diesem Artikel werden die zusätzlichen Entwurfsoptionen für hohe und schmale Layouts erläutert. Die Implementierung wird unter Beispiel: Layout für Fenster, deren Höhe ihre Breite übersteigt beschrieben. Dieses Beispiel basiert auf der Vorlage Grid App in Microsoft Visual Studio.

Die Vorlage Grid App hat vier Seiten:

default (default.html), mit der die groupedItems-Seite nach dem Starten der App geladen wird.
groupedItems (pages\groupItems\groupedItems.html), auf der der Benutzer Gruppen und Elemente anzeigen kann. Zudem kann er entweder eine Gruppenbezeichnung auswählen, um zur Gruppendetailseite zu navigieren (groupDetail), oder er kann ein Element auswählen, um zur Ganzseitenansicht zu navigieren (itemDetail).
groupDetail (pages\groupDetail\groupDetail.html), die dem Benutzer das Anzeigen von Gruppendetails und Elementen ermöglicht. Außerdem kann der Benutzer ein Element auswählen, um zur Ganzseitenansicht zu navigieren (itemDetail).
itemDetail (pages\itemDetail\itemDetail.html), die die Ganzseitenansicht eines Elements repräsentiert.

In diesem Artikel verwenden Sie für jede Seite das Standardlayout. Wir erläutern nur die Änderungen, die für den JavaScript-Code der Seite groupDetail und groupedItems erforderlich sind.

Die wichtigste Codierungstechnik besteht dabei darin, eine Überprüfung hinsichtlich Änderungen an den offsetWidth- und offsetHeight-Eigenschaften einer Seite vorzunehmen. Wenn infolge einer Änderung der Seitenbreite oder Geräteausrichtung durch den Benutzer bestimmte Breiten- und Höhenwerte erreicht werden, ändert die Seite das Layout und Verhalten der zugehörigen Steuerelemente.

Um dies zu testen, erstellen Sie in Visual Studio eine neue Instanz des JavaScript Windows Store Grid App-Projekts, und befolgen Sie dann die restlichen Anweisungen.

Definieren der Mindestbreite

Die standardmäßige Mindestbreite einer Windows Store-App beträgt 500 Pixel. Mit der Höhe der App wird immer der gesamte Bildschirm ausgefüllt. Die Mindestbildschirmhöhe einer App beträgt 768 Pixel.

Wenn Ihre App bei schmalen Breiten gut funktioniert oder wenn das Multitasking für die App ein wichtiges Szenario darstellt und Sie Benutzer dazu bewegen möchten, sie zusammen mit anderen Apps auf demselben Bildschirm angezeigt zu lassen, können Sie die Mindestbreite von 500 Pixel in 320 Pixel ändern. Benutzer können die App dann nahtlos verkleinern, von der Vollbildanzeige bis hinunter auf eine Breite von 320 Pixel.

Sie ändern die Mindestbreite der App in der Manifestdatei package.appxmanifest Führen Sie dazu in Visual Studio die folgenden Schritte aus:

Öffnen Sie die Manifestdatei package.appxmanifest. Das Manifest wird automatisch im Manifest-Designer geöffnet.
Öffnen Sie die Registerkarte Anwendung, und greifen Sie auf das Feld für die Mindestbreite zu.
Ändern Sie die Mindestbreite mithilfe der Dropdownliste in 320 px.
Wenn Sie die Manifestdatei package.appxmanifest in einem Text-Editor öffnen, sollte das ApplicationView-Element als untergeordnetes Element des VisualElements-Elements angezeigt werden. Die neue Mindestbreite in der Manifestdatei sieht beispielsweise wie folgt aus:
```
<ApplicationView MinWidth="width320" /> 
```

Da die App jetzt auf eine Breite von 320 Pixel verkleinert werden kann, müssen Sie die App so anpassen, dass sie bei schmalen Breiten leicht genutzt werden kann. Insbesondere ändern Sie die App, sodass sie nicht horizontal, sondern vertikal verschoben wird.

Definieren des Verhaltens für die Gruppen- und Elementansicht

Fügen Sie in der Datei pages\groupedItems\groupedItems.js der ready-Methode der ui.Pages.define-Funktion Code hinzu. Diese Methode wird nach Abschluss der gesamten Seiteninitialisierung und -darstellung aufgerufen. Rufen Sie in dieser Methode die _initializeLayout-Funktion auf, die Sie später definieren werden. (Zur Referenz: Der hinzuzufügende Code ist durch *** START ***- und *** END ***-Kommentare markiert.)
```
ui.Pages.define("/pages/groupedItems/groupedItems.html", {
    // ...
    ready: function (element, options) {
        var listView = element.querySelector(".groupeditemslist").winControl;
        listView.element.focus();
        // *** START ***
        this._initializeLayout(listView);
        // *** END ***
    },
    // ...
```

Fügen Sie in der Datei groupedItems.js der updateLayout-Methode der ui.Pages.define-Funktion Code hinzu. Diese Methode wird immer dann aufgerufen, wenn der Benutzer die Layoutzustände der App wechselt, beispielsweise zwischen dem schmalen Layout, dem Hochformat und dem Querformat. Verweisen Sie in dieser Methode auf das ListView-Steuerelement der Seite, deaktivieren Sie vorübergehend Seitenanimationen, und rufen Sie dann die _initializeLayout-Funktion auf, die Sie später definieren werden.

ui.Pages.define("/pages/groupedItems/groupedItems.html", {
    // ...
    updateLayout: function (element) {
        /// <param name="element" domElement="true" />

        // TODO: Respond to changes in layout.
        // *** START ***
        var listView = element.querySelector(".groupeditemslist").winControl;

        // Don't show page entrance animations when the app switches layouts.
        var handler = function (e) {
            listView.removeEventListener("contentanimating", handler, false);
            e.preventDefault;
        }
        listView.addEventListener("contentanimating", handler, false);

        this._initializeLayout(listView);
        // *** END ***
    },
    // ...

Fügen Sie in der Datei groupedItems.js der ui.Pages.define-Funktion Code hinzu, um die _initializeLayout-Funktion zu definieren. Anhand dieser Funktion wird bestimmt, ob sich die Seite im schmalen Layout oder im Hoch- oder Querformatslayout befindet. Zudem wird das ListView-Steuerelement der Seite entsprechend angepasst. Diese Funktion wird sowohl von der ready- als auch der updateLayout-Methode aufgerufen. Diese Funktion führt folgende Aktionen aus:

Wenn die Seitenbreite größer als 320 Pixel, aber kleiner als 500 Pixel ist, zeigt das ListView-Steuerelement der Seite die Daten nur als vertikal scrollbare Liste mit Gruppen an. (500 Pixel ist eine Beispielbreite. Sie können selbst entscheiden, bei welcher Breite sich das Layout ändern soll. In diesem Beispiel wurde eine Breite von 500 Pixel als Punkt gewählt, an dem die App ihr Layout wechselt. Für alle Breiten unterhalb von 500 Pixel wird von der App ein schmales Layout verwendet.
Wenn die Breite der Seite kleiner als die Höhe ist, zeigt das ListView-Steuerelement die Daten als vertikal scrollbare Liste mit Gruppen an, die Elemente enthalten.
Andernfalls zeigt das ListView-Steuerelement die Daten als horizontal scrollbares Raster mit Gruppen an, die Elemente enthalten.

ui.Pages.define("/pages/groupedItems/groupedItems.html", {
    // ...
    // *** START ***
    _initializeLayout: function (listView) {
        // Narrow layout.
        if (document.documentElement.offsetWidth < 500) {
            // Show data as a vertically-scrolling list of groups only.
            listView.itemDataSource = Data.groups.dataSource;
            listView.groupDataSource = null;
            listView.layout = new ui.ListLayout();                
        }
        // Portait layout.
        else if (document.documentElement.offsetWidth < document.documentElement.offsetHeight) {
            // Show data as as a vertically-scrolling list of groups that contain items.
            listView.itemDataSource = Data.items.dataSource;
            listView.groupDataSource = Data.groups.dataSource;
            listView.layout = new ui.ListLayout();                                
        }
        // Landscape layout.
        else {
            // Show data as a horizontally-scrolling grid of groups contain items.
            listView.itemDataSource = Data.items.dataSource;
            listView.groupDataSource = Data.groups.dataSource;
            listView.layout = new ui.GridLayout();
        }
    },
    // *** END ***
    // ...

Definieren des Verhaltens für die Gruppendetail- und Elementdetailansicht

Fügen Sie in der Datei pages\groupDetail\groupDetail.js der updateLayout-Methode der ui.Pages.define-Funktion Code hinzu. Diese Methode wird immer dann aufgerufen, wenn der Benutzer in der App zwischen dem Hoch- und dem Querformatslayout wechselt. Verweisen Sie in dieser Methode auf das ListView-Steuerelement der Seite, deaktivieren Sie vorübergehend Seitenanimationen, und rufen Sie dann die _initializeLayout-Funktion auf, die Sie später definieren werden. Führen Sie zudem für das ListView-Steuerelement einen Bildlauf aus, sodass das zuerst sichtbare Element das richtige Element ist.

ui.Pages.define("/pages/groupDetail/groupDetail.html", {
    // ...
    updateLayout: function (element) {
        /// <param name="element" domElement="true" />

        // TODO: Respond to changes in layout.
        // *** START ***
        var listView = element.querySelector(".itemslist").winControl;

        // Don't show page entrance animations when the app switches layouts.
        var handler = function (e) {
            listView.removeEventListener("contentanimating", handler, false);
            e.preventDefault();
        }
        listView.addEventListener("contentanimating", handler, false);

        var firstVisible = listView.indexOfFirstVisible;

        this._initializeLayout(listView);

        if (firstVisible >= 0 && listView.itemDataSource.list.length > 0) {
            listView.indexOfFirstVisible = firstVisible;
        }
        // *** END ***
    },
    // ...

Fügen Sie in der Datei groupDetail.js der ui.Pages.define-Funktion Code hinzu, um die _initializeLayout-Funktion zu definieren. Anhand dieser Funktion wird bestimmt, ob sich die Seite im Hoch- oder Querformatslayout befindet. Zudem wird das Steuerelement der Seite entsprechend angepasst. Diese Funktion wird von der updateLayout-Methode aufgerufen. Diese Funktion führt folgende Aktionen aus:
- Wenn die Seitenbreite größer als 320 Pixel, aber kleiner als 500 Pixel ist, zeigt das ListView-Steuerelement der Seite die Daten nur als vertikal scrollbare Liste mit Gruppen an. (500 Pixel ist eine Beispielbreite. Sie können selbst entscheiden, bei welcher Breite sich das Layout ändern soll. In diesem Beispiel wurde eine Breite von 500 Pixel als Punkt gewählt, an dem die App ihr Layout wechselt. Für alle Breiten unterhalb von 500 Pixel wird von der App ein schmales Layout verwendet.
- Wenn die Breite der Seite kleiner als die Höhe ist, zeigt das ListView-Steuerelement die Daten als vertikal scrollbare Liste ohne Gruppenkopf an.
- Andernfalls zeigt das ListView-Steuerelement die Daten als horizontal scrollbares Raster mit dem Gruppenkopf auf der linken Seite an.
```
ui.Pages.define("/pages/groupDetail/groupDetail.html", {
    // ...
    // *** START ***
    _initializeLayout: function (listView) {
        // Portrait layout.
        if (document.documentElement.offsetWidth < document.documentElement.offsetHeight) {
            listView.layout = new ui.ListLayout();
            var header = document.getElementsByTagName("header");
            header.item(0).style.display = "none";
        }
        // Landscape layout.
        else {
            listView.layout = new ui.GridLayout({ groupHeaderPosition: "left" });
            var header = document.getElementsByTagName("header");
            header.item(0).style.display = "inherit";
        }
    },
    // *** END ***
    // ...
```

Wechseln von Layouts

Nun können Sie sehen, was mit dem App-Layout geschieht, wenn Sie die Fenstergröße ändern.

Starten Sie in Visual Studio die App im Simulator. (Informationen zur entsprechenden Vorgehensweise finden Sie unter Ausführen von Windows Store-Apps im Simulator.
Klicken Sie auf Standard-Fingereingabemodus.
Ziehen Sie den oberen Teil der Seite zur Seite, und verschieben Sie die Trennlinie, sodass die Seite 500 Pixel breit ist. Die Daten werden in Form einer vertikal scrollbaren Liste mit Gruppen dargestellt, die Elemente enthalten.
Verschieben Sie die Trennlinie so, dass die Seite 320 Pixel breit ist. Die Daten werden nur in Form einer vertikal scrollbaren Liste mit Gruppen dargestellt.
Klicken Sie auf Im Uhrzeigersinn drehen. Die Daten werden in Form einer vertikal scrollbaren Liste mit Gruppen dargestellt, die Elemente enthalten.
Experimentieren Sie mit dem Tippen auf Gruppentitel, Elementtitel und die Zurück-Schaltfläche sowie mit dem Ändern von Seitenbreiten und Geräteausrichtungen.

Zusammenfassung

Sie wissen jetzt, wie Sie die App so entwerfen können, dass sie bei geringen Breiten und in Layouts, bei denen die Höhe die Breite übersteigt, gut aussieht und funktioniert.

Freigeben über