Sammlungen und ListenCollections and lists

Sowohl Sammlungen als auch Listen beziehen sich auf die Darstellung mehrerer verwandter Datenelemente, die gemeinsam angezeigt werden.Collections and lists both refer to the representation of multiple related data items that appear together. Sammlungen können auf mehrere Arten und durch mehrere unterschiedliche Sammlungssteuerelemente dargestellt werden (können auch als Sammlungsansichten bezeichnet werden).Collections can be represented in multiple ways, by different collection controls (also may be referred to as collection views). Sammlungssteuerelemente zeigen und ermöglichen Interaktionen mit sammlungsbasierten Inhalten wie einer Liste mit Kontakten, einer Liste mit Daten, einer Sammlung von Bildern usw.Collection controls display and enable interactions with collection-based content, such as a list of contacts, a list of dates, a collection of images, and so on.

Wichtige APIs: ListView class, GridView class, FlipView class, TreeView class, ItemsRepeater classImportant APIs: ListView class, GridView class, FlipView class, TreeView class, ItemsRepeater class

Zu den in diesem Artikel behandelten Steuerelementen gehören:The controls covered in this article include:

  • Listenansichten, die in erster Linie zum Anzeigen von textlastigen Inhaltssammlungen verwendet werdenList views, which are primarily used to display text-heavy content collections
  • Rasteransichten, die in erster Linie zum Anzeigen von bildlastigen Inhaltssammlungen verwendet werdenGrid views, which are primarily used to display image-heavy content collections
  • Flip-Ansichten, die in erster Linie zum Anzeigen von bildlastigen Inhaltssammlungen verwendet werden, bei denen exakt ein Element gleichzeitig den Fokus erhalten muss.Flip views, which are primarily used to display image-heavy content collections that require exactly one item to be in focus at a time
  • Strukturansichten, die in erster Linie zum Anzeigen von textlastigen Inhaltssammlungen in einer bestimmten Hierarchie verwendet werden.Tree views, which are primarily used to display text-heavy content collections in a specific hierarchy
  • ItemsRepeater, wobei es sich um einen anpassbaren Baustein zum Erstellen benutzerdefinierter Sammlungssteuerelemente handelt.ItemsRepeater, which is a customizable building block to create custom collection controls

Entwurfsrichtlinien, Funktionen und Beispiele für jedes Steuerelement findest du weiter unten.Design guidelines, features, and examples are given below for each control.

Jedes dieser Steuerelemente (mit Ausnahme von ItemsRepeater) bietet integrierte Stile und Interaktionen.Each of these controls (with the exception of ItemsRepeater) provide built-in styling and interaction. Um jedoch die visuelle Darstellung Ihrer Sammlungsansicht und der darin enthaltenen Elemente weiter anzupassen, wird ein DataTemplate verwendet.However, to further customize the visual look of your collection view and the items inside it, a DataTemplate is used. Ausführliche Informationen zu Datenvorlagen und zum Anpassen der Darstellung einer Sammlungsansicht findest du auf der Seite Elementcontainer und -vorlagen.Detailed information on data templates and customizing the look of a collection view can be found on the Item containers and templates page.

Jedes dieser Steuerelemente (mit Ausnahme von ItemsRepeater) verfügt außerdem über ein integriertes Verhalten, das die Auswahl einzelner oder mehrerer Elemente ermöglicht.Each of these controls (with the exception of ItemsRepeater) also have built-in behavior to allow for the selection of single or multiple items. Weitere Informationen findest du unter Übersicht über Auswahlmodi.See Selection modes overview to learn more.

Windows 10 Fall Creators Update – Verhaltensänderung: Beim Schwenken/Bildlauf in der Liste der UWP-Apps wird jetzt standardmäßig anstelle des Ausführens der Auswahl ein aktiver Stift verwendet (z. B. Toucheingabe, Touchpad und passiver Stift).Windows 10 Fall Creators Update - Behavior change By default, instead of performing selection, an active pen now scrolls/pans a list in UWP apps (like touch, touchpad, and passive pen). Wenn Ihre App vom vorherigen Verhalten abhängig ist, können Sie die Stift-Bildlaufaktionen außer Kraft setzen und auf das vorherige Verhalten zurückzusetzen.If your app depends on the previous behavior, you can override pen scrolling and revert to the previous behavior. Weitere Details finden Sie im API-Referenzthema für die ScrollViewer-Klasse.For details, see the API reference topic for the Scroll Viewer Class.

BeispieleExamples

XAML-SteuerelementekatalogXAML Controls Gallery
XAML controls gallery

Wenn du die App XAML-Steuerelementekatalog installiert hast, kannst du die Steuerelemente ListView, GridView, FlipView, TreeView und ItemsRepeater in Aktion sehen.If you have the XAML Controls Gallery app installed, see the ListView, GridView, FlipView, TreeView, and ItemsRepeater in action.

ListenansichtenList views

Listenansichten stellen textintensive Elemente dar, normalerweise in einem einspaltigen, vertikal gestapelten Layout.List views represent text-heavy items, typically in a single-column, vertically-stacked layout. Mit ihnen kannst du Elemente kategorisieren und Gruppenüberschriften zuweisen, Elemente ziehen und ablegen, Inhalt zusammenstellen und Elemente neu anordnen.They let you categorize items and assign group headers, drag and drop items, curate content, and reorder items.

Ist dies das richtige Steuerelement?Is this the right control?

Mit einer Listenansicht können Sie:Use a list view to:

  • Anzeigen einer Sammlung, die in erster Linie aus textbasierten Elementen besteht, wobei alle Elemente das selbe visuelle und Interaktionsverhalten aufweisen sollten.Display a collection that primarily consists of text-based items, where all of the items should have the same visual and interaction behavior.
  • Darstellen einer einzelnen oder kategorisierten Inhaltssammlung.Represent a single or categorized collection of content.
  • Aufnehmen einer Vielzahl von Anwendungsfällen, einschließlich der folgenden gängigen:Accommodate a variety of use cases, including the following common ones:
    • Erstellen einer Liste von Nachrichten oder Nachrichtenprotokollen.Create a list of messages or message log.
    • Erstellen einer Kontaktliste.Create a contacts list.
    • Den Masterbereich mit dem Master-/Detailmuster erstellen.Create the master pane in the master/details pattern. Ein Master-/Detailmuster wird häufig in E-Mail-Apps verwendet, in denen ein Bereich (der Masterbereich) eine Liste auswählbarer Elemente enthält, während im anderen eine detaillierte Ansicht des ausgewählten Elements enthalten ist.A master/details pattern is often used in email apps, in which one pane (the master) has a list of selectable items while the other pane (details) has a detailed view of the selected item.

BeispieleExamples

Im Folgenden findest du eine einfache Listenansicht, in der eine Kontaktliste angezeigt wird und in der die Datenelemente alphabetisch gruppiert sind.Here's a simple list view that shows a contacts list, and groups the data items alphabetically. Die Gruppenkopfzeilen (in diesem Beispiel jeder Buchstabe des Alphabets) können auch so angepasst werden, dass sie „fixiert“ (sticky) bleiben, damit sie beim Scrollen immer am oberen Rand der ListView angezeigt werden.The group headers (each letter of the alphabet in this example) can also be customized to stay "sticky", as in they will always appear at the top of the ListView while scrolling.

Eine Listenansicht mit gruppierten Daten

Dies ist eine ListView, die invertiert wurde, um ein Protokoll mit Meldungen anzuzeigen, wobei die neuesten Meldungen ganz unten angezeigt werden.This is a ListView that has been inverted to display a log of messages, with the newest messages appearing at the bottom. Bei einer invertierten ListView werden Elemente am unteren Bildschirmrand mit einer integrierten Animation angezeigt.With an inverted ListView, items appear at the bottom of the screen with a built-in animation.

Invertierte Listenansicht

ThemaTopic BeschreibungDescription

Listenansicht und RasteransichtList view and grid view

Lernen Sie die Grundlagen der Verwendung einer Listen- oder Rasteransicht in Ihrer App kennen.Learn the essentials of using a list view or grid view in your app.

Elementcontainer und VorlagenItem containers and templates

Die Elemente, die du in einer Listen- oder Rasteransicht anzeigst, können eine wichtige Rolle für das Gesamtdesign deiner App spielen.The items you display in a list or grid view can play a major role in the overall look of your app. Lass deine App gut aussehen , indem du die Darstellung deiner Sammlungselemente durch Ändern von Steuerelementvorlagen und Datenvorlagen anpasst.Make your app look great by customizing the look of your collection items through modifying control templates and data templates.

Elementvorlagen für ListenansichtItem templates for list view

Verwenden Sie diese Beispiel-Elementvorlagen für eine ListView, um das Erscheinungsbild gängiger App-Typen abzurufen.Use these example item templates for a ListView to get the look of common app types.

Invertierte ListenInverted lists

Bei invertierten Listen werden neue Elemente am Ende hinzugefügt, z. B. bei einer Chat-App.Inverted lists have new items added at the bottom, like in a chat app. Befolge die Anleitung dieses Artikels, um in deiner App eine invertierte Liste zu verwenden.Follow this article's guidance to use an inverted list in your app.

Aktualisieren durch ZiehenPull-to-refresh

Dank des Mechanismus „Aktualisieren durch Ziehen“ können Benutzer aktuelle Daten in einer Liste durch das Ausführen einer Ziehbewegung von oben nach unten auf der Liste abrufen.The pull-to-refresh mechanism lets a user pull down on a list of data using touch in order to retrieve more data. Verwende diesen Artikel, um „Aktualisieren durch Ziehen“ in deiner Listenansicht zu implementieren.Use this article to implement pull-to-refresh in your list view.

Geschachtelte UINested UI

Eine geschachtelte UI ist eine Benutzeroberfläche (User Interface, UI) mit geschachtelten Steuerelementen, die in einem Container eingeschlossen sind, die ein Benutzer ebenfalls aktivieren kann.Nested UI is a user interface (UI) that exposes actionable controls enclosed inside a container that a user can also take action on. Beispielsweise gibt es möglicherweise ein Listenansichtelement, das eine Schaltfläche enthält. Benutzer können das Listenelement auswählen oder die Schaltfläche verwenden, die darin geschachtelt ist.For example, you might have list view item that contains a button, and the user can select the list item, or press the button nested within it. Befolgen Sie diese bewährten Methoden, um eine optimal geschachtelte Benutzeroberfläche (UI) für Ihre Benutzer bereitzustellen.Follow these best practices to provide the best nested UI experience for your users.

RasteransichtenGrid views

Rasteransichten eignen sich zum Anordnen und Durchsuchen bildbasierter Inhaltssammlungen.Grid views are suited for arranging and browsing image-based content collections. Ein Rasteransichtslayout wird vertikal gescrollt und horizontal bewegt.A grid view layout scrolls vertically and pans horizontally. Elemente befinden sich in einem umbrochenen Layout und werden von links nach rechts und anschließend von oben nach unten in Leserichtung angezeigt.Items are in a wrapped layout, as they appear in a left-to-right, then top-to-bottom reading order.

Ist dies das richtige Steuerelement?Is this the right control?

Verwende eine Rasteransicht für Folgendes:Use a grid view to:

  • Anzeigen einer Inhaltssammlung, in der der Fokuspunkt jedes Elements ein Bild ist und jedes Element das selbe visuelle und Interaktionsverhalten aufweisen sollte.Display a content collection in which the focal point of each item is an image, and each item should have the same visual and interaction behavior.
  • Inhaltsbibliotheken anzeigen.Display content libraries.
  • Die zwei Inhaltsansichten formatieren, die dem semantischen Zoom zugeordnet sind.Format the two content views associated with semantic zoom.
  • Aufnehmen einer Vielzahl von Anwendungsfällen, einschließlich der folgenden gängigen:Accommodate a variety of use cases, including the following common ones:
    • Storefront-artige Benutzeroberfläche (d. h. Durchsuchen von Apps, Liedern, Produkten)Storefront-type user interface (i.e. browsing apps, songs, products)
    • Interaktive FotobibliothekenInteractive photo libraries

BeispieleExamples

Dieses Beispiel zeigt ein typisches Rasteransichtslayout, in diesem Fall zum Durchsuchen von Apps.This example shows a typical grid view layout, in this case for browsing apps. Metadaten für Rasteransichtselemente sind in der Regel auf wenige Textzeilen und eine Bewertung des Elements beschränkt.Metadata for grid view items is usually restricted to a few lines of text and an item rating.

Beispiel eines Rasteransichtslayouts

Eine Rasteransicht eignet sich ideal für eine Inhaltsbibliothek, die häufig verwendet wird, um Medien wie Bilder und Videos darzustellen.A grid view is an ideal solution for a content library, which is often used to present media such as pictures and videos. In einer Inhaltsbibliothek erwarten Benutzer, dass sie auf ein Element tippen können, um eine Aktion aufzurufen.In a content library, users expect to be able to tap an item to invoke an action.

Beispiel einer Inhaltsbibliothek

ThemaTopic BeschreibungDescription

Listenansicht und RasteransichtList view and grid view

Lernen Sie die Grundlagen der Verwendung einer Listen- oder Rasteransicht in Ihrer App kennen.Learn the essentials of using a list view or grid view in your app.

Elementcontainer und VorlagenItem containers and templates

Die Elemente, die du in einer Listen- oder Rasteransicht anzeigst, können eine wichtige Rolle für das Gesamtdesign deiner App spielen.The items you display in a list or grid view can play a major role in the overall look of your app. Lass deine App gut aussehen , indem du die Darstellung deiner Sammlungselemente durch Ändern von Steuerelementvorlagen und Datenvorlagen anpasst.Make your app look great by customizing the look of your collection items through modifying control templates and data templates.

Elementvorlagen für RasteransichtItem templates for grid view

Verwenden Sie diese Beispiel-Elementvorlagen für eine GridView, um das Erscheinungsbild gängiger App-Typen abzurufen.Use these example item templates for GridView to get the look of common app types.

Geschachtelte UINested UI

Eine geschachtelte UI ist eine Benutzeroberfläche (User Interface, UI) mit geschachtelten Steuerelementen, die in einem Container eingeschlossen sind, die ein Benutzer ebenfalls aktivieren kann.Nested UI is a user interface (UI) that exposes actionable controls enclosed inside a container that a user can also take action on. Beispielsweise gibt es möglicherweise ein Rasteransichtselement, das eine Schaltfläche enthält. Benutzer können das Rasterelement auswählen oder die Schaltfläche verwenden, die darin geschachtelt ist.For example, you might have grid view item that contains a button, and the user can select the grid item, or press the button nested within it. Befolgen Sie diese bewährten Methoden, um eine optimal geschachtelte Benutzeroberfläche (UI) für Ihre Benutzer bereitzustellen.Follow these best practices to provide the best nested UI experience for your users.

Flip-AnsichtenFlip views

Flip-Ansichten eignen sich zum Durchsuchen bildbasierter Inhaltssammlungen, insbesondere dann, wenn die gewünschte Erfahrung so ist, dass immer nur ein Bild sichtbar ist.Flip views are suited for browsing image-based content collections, specifically where the desired experience is for only one image to be visible at a time. Eine Flip-Ansicht ermöglicht dem Benutzer sich durch die Sammlungselemente zu bewegen bzw. diese „durchzublättern“ (vertikal oder horizontal), wobei jedes Element einzeln nach der Benutzerinteraktion angezeigt wird.A flip view allows the user to move or "flip" through the collection items (either vertically or horizontally), having each item appear one at a time after the user interaction.

Ist dies das richtige Steuerelement?Is this the right control?

Verwende eine Flip-Ansicht für Folgendes:Use a flip view to:

  • Anzeigen einer kleinen bis mittelgroßen Sammlung (weniger als 25 Elemente), wobei die Sammlung aus Bildern besteht, die nur wenige oder gar keine Metadaten besitzen.Display a small to medium (less than 25 items) collection, where the collection is made up of images with little to no metadata.
  • Einzelnes Anzeigen von Elementen, wobei dem Endbenutzer das Durchblättern der Elemente in der selbst gewählten Geschwindigkeit gestattet wird.Display items one at a time, and allow the end-user to flip through the items at their own pace.
  • Aufnehmen einer Vielzahl von Anwendungsfällen, einschließlich der folgenden gängigen:Accommodate a variety of use cases, including the following common ones:
    • FotokatalogePhoto galleries
    • Produktkataloge oder -präsentationenProduct galleries or showcases

BeispieleExamples

In den folgenden beiden Beispielen wird eine FlipView gezeigt, die horizontal bzw. vertikal durchblätterbar ist.The following two examples show a FlipView that flips horizontally and vertically, respectively.

Horizontale Flip-Ansicht

Vertikale Flip-Ansicht

ThemaTopic BeschreibungDescription

Flip-AnsichtFlip view

Erfahre die Grundlagen der Verwendung einer Flip-Ansicht in deiner App sowie, wie du das Aussehen deiner Elemente innerhalb einer Flip-Ansicht anpasst.Learn the essentials of using a flip view in your app, along with how to customize the look of your items within a flip view.

StrukturansichtenTree views

Strukturansichten sind zum Anzeigen von textbasierten Sammlungen geeignet, die über eine wichtige Hierarchie verfügen, die angezeigt werden muss.Tree views are suited for displaying text-based collections that have an important hierarchy that needs to be showcased. Strukturansichtselemente sind reduzierbar/erweiterbar, werden in einer visuellen Hierarchie angezeigt, können mit Symbolen ergänzt werden und können zwischen Strukturansichten gezogen und abgelegt werden.Tree view items are collapsible/expandable, are shown in a visual hierarchy, can be supplmented with icons, and can be dragged and dropped between tree views. Strukturansichten ermöglichen eine Schachtelung auf N Ebenen.Tree views allow for N-level nesting.

Ist dies das richtige Steuerelement?Is this the right control?

Verwende eine Strukturansicht für Folgendes:Use a tree view to:

  • Anzeigen einer Sammlung geschachtelter Elemente, deren Kontext und Bedeutung von einer Hierarchie oder einer bestimmten Organisationskette abhängig sind.Display a collection of nested items whose context and meaning is dependent on a hierarchy or specific organizational chain.
  • Aufnehmen einer Vielzahl von Anwendungsfällen, einschließlich der folgenden gängigen:Accommodate a variety of use cases, including the following common ones:
    • Datei-BrowserFile browser
    • UnternehmensorganigrammCompany organizational chart

BeispieleExamples

Im Folgenden findest du ein Beispiel für eine Strukturansicht, die einen Datei-Explorer darstellt und viele verschiedene, geschachtelte Elemente anzeigt, die von Symbolen ergänzt werden.Here is an example of a tree view that represents a file explorer, and displays many different nested items supplemented by icons.

Strukturansicht mit Symbolen

ThemaTopic BeschreibungDescription

StrukturansichtTree view

Erfahre die Grundlagen der Verwendung einer Strukturansicht in deiner App sowie, wie du das Aussehen und Interaktionsverhalten deiner Elemente innerhalb einer Strukturansicht anpasst.Learn the essentials of using a tree view in your app, along with how to customize the look and interaction behavior of your items within a tree view.

ItemsRepeaterItemsRepeater

ItemsRepeater unterscheidet sich von den übrigen Sammlungssteuerelementen, die auf dieser Seite angezeigt werden, da es keine vorgefertigten Stile oder Interaktionen bereitstellt, d. h., wenn es einfach auf einer Seite platziert wird, ohne Eigenschaften zu definieren.ItemsRepeater is different from the rest of the collection controls shown on this page because it does not provide any styling or interaction out-of-box, i.e. when simply placed on a page without defining any properties. ItemsRepeater ist eher ein Baustein, den du als Entwickler verwenden kannst, um ein eigenes benutzerdefiniertes Sammlungssteuerelement zu erstellen, insbesondere eins, das nicht mithilfe der anderen in diesem Artikel aufgeführten Steuerelemente erstellt werden kann.ItemsRepeater is rather a building block that you as a developer can use to create your own custom collections control, specifically one that cannot be achieved by using the other controls in this article. ItemsRepeater ist ein datengesteuerter Hochleistungsbereich, der exakt auf deine Anforderungen zugeschnitten werden kann.ItemsRepeater is a data-driven and high-performance panel that can be tailored to fit your exact needs.

Ist dies das richtige Steuerelement?Is this the right control?

Verwende in folgenden Fällen ein „ItemsRepeater“-Steuerelement:Use an ItemsRepeater if:

  • Du hast eine konkrete Vorstellung von einer Benutzeroberfläche und Benutzererfahrung, die nicht mithilfe vorhandener Sammlungssteuerelemente erstellt werden können.You have a specific user interface and user experience in mind that cannot be created using existing collection controls.
  • Du verfügst über eine bestehende Datenquelle für deine Elemente (z. B. aus dem Internet abgerufene Daten, eine Datenbank oder eine bereits vorhandene Sammlung in deiner CodeBehind).You have an existing data source for your items (such as data pulled from the internet, a database, or a pre-existing collection in your code-behind).

BeispieleExamples

Die folgenden drei Beispiele sind alle ItemsRepeater-Steuerelemente, die an dieselbe Datenquelle (eine Sammlung von Zahlen) gebunden sind.The following three examples are all ItemsRepeater controls that are bound to the same data source (a collection of numbers). Die Sammlung von Zahlen wird auf drei Arten dargestellt, wobei jedes der unten dargestellten ItemsRepeater-Steuerelemente unter Verwendung eines anderen benutzerdefinierten Layouts und einer anderen benutzerdefinierten ItemTemplate benutzt wurde.The collection of numbers is represented in three ways, with each of the ItemsRepeaters below using a different custom Layout and a different custom ItemTemplate.

ItemsRepeater mit horizontalen Balken ItemsRepeater mit vertikalen Balken ItemsRepeater mit kreisförmiger DarstellungItemsRepeater with horizontal bars ItemsRepeater with vertical bars ItemsRepeater with circular representation

ThemaTopic BeschreibungDescription

ItemsRepeaterItemsRepeater

Erfahre mehr über die Grundlagen der Verwendung eines ItemsRepeater-Steuerelements in deiner App und wie du alle erforderlichen Interaktionen und visuellen Komponenten für deine Sammlungsansicht implementieren kannst.Learn the essentials of using an ItemsRepeater in your app, along with how to implement all of the necessary interaction and visual components for your collection view.

Prüfliste für Globalisierung und LokalisierungGlobalization and localization checklist

UmbruchWrappingZwei Zeilen für die Listenbeschriftung zulassen.Allow two lines for the list label.
Horizontale ErweiterungHorizontal expansionStelle sicher, dass die Felder sich an Texte unterschiedlicher Längen anpassen können und stets scrollfähig sind.Make sure fields can accomdation text expansion and are scrollable.
Vertikaler AbstandVertical spacingVerwende nicht lateinische Zeichen für vertikalen Abstand, um sicherzustellen, dass nicht lateinische Schriften richtig angezeigt werden.Use non-Latin characters for vertical spacing to ensure non-Latin scripts will display properly.

Beispielcode herunterladenGet the sample code

Entwurfs- und UX-RichtlinienDesign and UX Guidelines

API-ReferenzAPI reference