Richtlinien für Listen- und Rasteransichts-Steuerelemente

Applies to Windows and Windows Phone

Beispiel für eine Rasteransicht und eine Listenansicht.

Beschreibung

Eine Raster- bzw. Listenansicht ist eine Sammlung mit Inhalten innerhalb einer Windows Store-App. Raster- und Listenansichten bieten eine konsistente Anzeige von Elementen für Benutzer und sind für die Fingereingabe optimiert.

Diese Steuerelemente sind in unterschiedlichen Formaten verfügbar: nicht gruppiertes Raster, gruppiertes Raster, Liste (HTML), nicht gruppierte Liste (XAML) und gruppierte Liste (XAML). Listen lassen sich vertikal verschieben. Raster lassen sich horizontal verschieben. Die Leserichtung in Listen verläuft von oben nach unten. Raster werden von oben nach unten und links nach rechts gelesen.

Hinweis  Die Windows-Bibliothek für JavaScript (WinJS) enthält ein einzelnes ListView-Steuerelement mit Listen- und Rasterlayoutoptionen. Apps, die C#/VB/C++ und XAML verwenden, erstellen Listen- und Rasterlayouts mit zwei separaten Steuerelementen: ListView und GridView. Diese Richtlinien gelten für alle diese Steuerelementtypen.

Beispiel

Hier sehen Sie eine Liste mit Suchergebnissen in einer Standardrasteransicht:

Suchergebnisse für die Abfrage "pizza" in einer Rasteransicht

Ist dies das richtige Steuerelement?

Verwenden Sie ein Listen- oder Rasteransichts-Steuerelement, um eine Sammlung von Daten den Benutzern als Reihe von Elementen darzustellen. So können Sie mit einer Listenansicht zum Beispiel eine Liste von E-Mails, Artikel in einem Warenkorb, eine Liste von Bildern oder Suchergebnisse darstellen.

Dieses Steuerelement kann für folgende Zwecke verwendet werden:

  • Darstellen von Daten in Gruppen
  • Ermöglichen der Auswahl von Elementen
  • Anpassen der Art und Weise, wie Ihre Daten geladen werden
  • Bereitstellen besserer Tastaturfunktionen und Auswahlmöglichkeiten
  • Dynamisches Bearbeiten der Elementliste und Anzeigen integrierter Animationen
  • Anpassen der Elemente mit Vorlagen oder Hinzufügen eigener Ereignisse für die Elemente
  • Anzeigen unterschiedlich großer Elemente

Liste oder Raster?

Die WinJS enthält zwei grundlegende Layouts für ListView: ein Listenlayout und ein Rasterlayout. (Sie können auch eigene benutzerdefinierte Layouts erstellen.) Wenn Sie C#/VB/C++ und XAML einsetzen, verwenden Sie zwei separate Steuerelemente namens ListView und GridView, um dieselbe Funktionalität zu erzielen.

Liste: Das Listenlayout wird als einzelne Spalte angezeigt, die von oben nach unten gelesen und vertikal bewegt wird bzw. einen vertikalen Bildlauf aufweist. In diesem Layout werden keine Gruppeninformationen wie Gruppenköpfe oder -grenzen angezeigt.

ListView mit Listenlayout

Verwenden Sie eine Liste in folgenden Situationen:

  • Anzeigen von Inhalten in einem schmalen Fenster oder im Hochformat
  • Versuch, Platz zu sparen (Listenlayouts nehmen weniger Platz in Anspruch als Rasterlayouts)
  • Gruppierung von Elementen ist nicht erforderlich
  • Erstellen des Masterbereichs in einer Master-/Detailansicht Die Master-/Detailansicht wird häufig in Mail-Apps verwendet, wo eine Seite des Bildschirms eine Liste mit auswählbaren Elementen anzeigt und die andere Seite des Bildschirms eine Detailansicht des gewählten Elements. Ein Beispiel für diese Ansicht finden Sie im Abschnitt Verwenden des richtigen Interaktionsmusters.

Raster: Das Rasterlayout (oder GridView in Apps mit XAML) wird immer horizontal bewegt, und das Layout der Elemente ist von oben nach unten und links nach rechts angeordnet.

ListView mit Rasterlayout

Verwenden Sie ein Raster in folgenden Situationen:

  • Anzeigen von Inhaltsbibliotheken Ein Beispiel für diese Ansicht finden Sie im Abschnitt Verwenden des richtigen Interaktionsmusters.
  • Ihre App muss Elemente gruppieren. Mit der Gruppierung können Inhalte organisiert werden, wenn die Sammlung der Elemente sehr umfangreich ist oder sich generell für die Gruppierung eignet (wie eine Sammlung aus Songs, die nach Album gruppiert sind).
  • Formatierung der beiden Inhaltsansichten für semantischen Zoom.

Verwenden des richtigen Interaktionsmusters

Listen- oder Rasteransichts-Steuerelemente werden normalerweise auf vier Arten verwendet: zum Anzeigen einer Inhaltsbibliothek, zum Anzeigen von Master-/Detaildaten, als Auswahl und zum Anzeigen statischer Daten. Wenn Sie diese Steuerelemente für einen dieser Zwecke verwenden, erwarten Benutzer, dass die folgenden Interaktionsmuster für die Ansicht gelten:

  • Inhaltsbibliothekmuster

    Verwenden Sie dieses Muster, wenn Sie eine Inhaltsauflistung oder -bibliothek anzeigen. Dieses Muster wird häufig zum Anzeigen von Medien wie Bildern oder Videos verwendet.

    Inhaltsbibliothek

    In einer Inhaltsbibliothek erwarten Benutzer, auf ein Element tippen zu können, um eine Aktion aufzurufen. Die meisten Inhaltsbibliotheken unterstützen auch die Auswahl von Elementen mit der Querziehen-Geste. Beim Querziehen kann der Benutzer senkrecht zur Verschieberichtung über ein Element streichen, um es auszuwählen. Beispiel: Wenn Sie das Querziehen in einer horizontal verschiebbaren Inhaltsbibliothek aktivieren, kann ein Benutzer ein Element auswählen, indem er es vertikal zieht.

    Wenn Sie C#/VB/C++ und XAML verwenden, fügen Sie ein GridView-Steuerelement hinzu, das mit einer dieser Elementvorlagen für Rasterlayouts formatiert wurde, um diese Anzeigeart schnell zu implementieren.

    Wenn Sie JavaScript und HTML verwenden, können Sie die ListView wie folgt konfigurieren, damit sie dem Inhaltsbibliothekmuster folgt:

  • Master-/Detailmuster (auch bezeichnet als geteilte Ansicht)

    Beim Master-/Detailmuster können Sie den Masterbereich mit einer Listenansicht organisieren. Der Masterbereich zeigt eine Liste mit auswählbaren Elementen an. Wenn der Benutzer ein Element im Masterbereich auswählt, werden zusätzliche Informationen zum gewählten Element im Detailbereich angezeigt. Die Listenansicht eignet sich nur für die Formatierung eines Masterbereichs. Verwenden Sie ein anderes Steuerelement für den Detailbereich.

    E-Mail-App mit dem Master-/Detailmuster

    Die XAML- Bild- und Textlistenvorlage (Posteingang) formatiert eine ListView, um Inhalt im Masterbereichsmuster anzuzeigen.

    Sie verwenden HTML? Konfigurieren Sie die ListView wie folgt, um sie als Masterbereich im Master-/Detailmuster einzusetzen:

    Sie können mehrere Listenansichts-Steuerelemente miteinander verketten, um komplexe Master-/Detailhierarchien zu erstellen.

  • Auswahlmuster

    Verwenden Sie das Auswahlmuster, wenn die Auswahl die primäre Benutzeraktion ist und die Möglichkeit, ein Element durch Tippen aufzurufen, nicht wichtig ist. Bei diesem Interaktionsmuster wird zusätzlich zum Querziehen das Tippen zum Auswählen verwendet.

    ListView mit dem Auswahlmuster

  • Statisches Muster

    Verwenden Sie dieses Muster, wenn Sie die Listenansicht nur zum Anzeigen von Inhalten verwenden möchten und die meisten Interaktionsarten deaktiviert sind. Dieses Muster eignet sich für Elementauflistungen, die schreibgeschützt sind und keine Aktivierung oder Navigation zulassen.

Den Code für die einzelnen Interaktionsmuster finden Sie im Beispiel für die Interaktivitätsanpassung von HTML-ListView-Steuerelementen oder dem Beispiel für die Interaktivitätsanpassung von XAML-ListView- und -GridView-Steuerelementen.

Empfohlene und nicht empfohlene Vorgehensweisen

  • Elemente in derselben Listen- oder Rasteransicht sollten dasselbe Verhalten aufweisen. Beispiel: Wenn ein Element in einer Listenansicht eine Aktion ausführt, wenn der Benutzer darauf tippt, sollten alle Elemente in der Listenansicht beim Tippen eine Aktion ausführen.
  • Verwenden Sie den semantischen Zoom, wenn die Liste in Gruppen unterteilt ist (siehe SemanticZoom (HTML) oder SemanticZoom (XAML)). Der semantische Zoom erleichtert den Benutzern die Navigation in gruppierten Inhalten.
    • Verwenden Sie das Rasterlayout im WinJS ListView-Steuerelement oder XAML GridView-Steuerelement, um die vergrößerte Ansicht zu organisieren. Diese Ansicht zeigt Gruppenköpfe und individuelle Elemente an.

      Vergrößerte Ansicht einer Liste von Anlagefonds

    • Verwenden Sie auch ein Rasterlayout für die verkleinerte Ansicht. Beachten Sie, dass diese Ansicht nur Gruppenköpfe anzeigt.

      Verkleinerte Ansicht einer Liste von Anlagefonds

  • Registrieren Sie das STRG+ALT+G-Tastendruckereignis, wenn Sie interaktive Gruppenköpfe in einer Rasteransicht verwenden, und benutzen Sie diese Tastenkombination zur Navigation in die Gruppe für das Element, das den Fokus hat.
  • Zeigen Sie keine Auswahlhäkchen an, wenn Benutzer nur ein einzelnes Element sehen können (wenn selectionMode auf "single" gesetzt ist). Beispiele finden Sie im Beispiel für die Interaktivitätsanpassung von HTML-ListView-Steuerelementen oder Beispiel für die Interaktivitätsanpassung von XAML-ListView- und -GridView-Steuerelementen.
  • Verwenden Sie Listen- oder Rasteransichten nicht als Universallayout-Steuerelemente. Verwenden Sie zum Erstellen eines Raster- oder Tabellenlayouts ein Hub-Steuerelement, Grid-Steuerelement oder ein CSS-Layout, wie ein Rasterlayout oder FlexBox-Layout. (Weitere Informationen zu CSS-Layouts finden Sie unter Auswählen eines CSS3-Layouts für Ihre App.)
  • Verwenden Sie kein Listen- oder Rasteransichts-Steuerelement, um Befehlssymbolleisten zu erstellen, wie eine Symbolleiste mit Schaltflächen zum Ausschneiden, Kopieren und Einfügen. Verwenden Sie stattdessen mehrere nebeneinander angeordnete Schaltflächen.

Spezielle Richtlinien für das WinJS ListView-Steuerelement

  • Wenn Ihre ListView ein Rasterlayout verwendet, wechseln Sie zu einem Listenlayout, wenn die App auf eine schmalere Breite eingestellt oder zum Hochformat umgeschaltet wird.
  • Wenn Ihre ListView ein Rasterlayout verwendet und Gruppen enthält, zeigen Sie beim Wechseln zu einem Listenlayout die Gruppen an. Wenn der Benutzer auf eine Gruppe tippt, aktualisieren Sie die ListView, um die Elemente in der Gruppe anzuzeigen. Stellen Sie außerdem eine Zurück-Schaltfläche bereit, mit der der Benutzer zur Gruppenanzeige zurückkehren kann. Sie können diese Funktion mithilfe des SemanticZoom-Steuerelements bereitstellen.
  • Ändern Sie, wie die Elemente in der ListView angezeigt werden, wenn die Größe Ihrer App angepasst wird. Sie können Ihr CSS-Format mithilfe von Medienabfragen automatisch aktualisieren oder eine andere itemTemplate verwenden, wenn für die App die Größe der Ansicht geändert wird. Falls Sie das CSS-Format aktualisieren, müssen Sie die forceLayout-Methode des ListView-Steuerelements aufrufen, damit die Änderungen korrekt angezeigt werden.
  • Speichern Sie vor der Größenänderung der App den indexOfFirstVisible-Wert des ListView-Steuerelements, und stellen Sie ihn dann wieder her, wenn die App wieder im Vollbildmodus angezeigt wird. So verlieren die Benutzer nicht ihre Position in der Liste.

Verwandte Themen

Für Entwickler (HTML)
WinJS.UI.ListView object
Schnellstart: Hinzufügen von ListView-Steuerelementen
Elementvorlagen für Listenlayouts
Elementvorlagen für Rasterlayouts
Für Entwickler (XAML)
ListView class
GridView class
Quickstart: adding ListView and GridView controls
Elementvorlagen für Listenlayouts
Elementvorlagen für Rasterlayouts
Beispiele
HTML-Grundlagenbeispiel für ListView
Beispiel für die Interaktivitätsanpassung von HTML-ListView-Steuerelementen
Beispiel für HTML-ListView-Gruppierung und SemanticZoom
Beispiel für HTML-ListView-Elementvorlagen
Beispiel für HTML-ListView-Steuerelemente, die mit Datenquellen arbeiten
Beispiel für HTML-ListView-Leistungsoptimierung
Beispiel für inkrementelles Ladeverhalten von HTML-ListView-Steuerelementen
Grundlagenbeispiel für XAML-ListView- und -GridView-Steuerelemente
Beispiel für die Interaktivitätsanpassung von XAML-ListView- und -GridView-Steuerelementen
Beispiel für XAML-GridView-Gruppierung und SemanticZoom

 

 

Anzeigen:
© 2014 Microsoft