Listenansicht und Rasteransicht
Mit den meisten Anwendungen können Sätze von Daten, beispielsweise eine Bildergalerie oder ein Satz von E-Mails, bearbeitet und angezeigt werden. Das XAML-Benutzeroberflächenframework bietet ListView und GridView-Steuerelemente, die das Anzeigen und Bearbeiten von Daten in Ihrer App vereinfachen.
Hinweis
ListView und GridView stammen beide von der ListViewBase-Klasse ab, sodass sie die gleiche Funktionalität haben, aber Daten unterschiedlich anzeigen. In diesem Artikel gelten Diskussionen zur Listenansicht sowohl für das ListView- als auch für das GridView-Steuerelement, sofern nicht anders angegeben. Möglicherweise werden Klassen wie ListView oder ListViewItem genannt. Das Präfix List kann jedoch durch Grid für das entsprechende Rastersteuerelement ersetzt werden (GridView oder GridViewItem).
ListView- und GridView-Steuerelemente bieten viele Vorteile, wenn Sie mit Sammlungen arbeiten. Beide sind einfach zu implementieren und bieten grundlegende Benutzeroberfläche, Interaktion und Scrollen, während sie leicht anpassbar sind. Und beide können an vorhandene dynamische Datenquellen oder an hartcodierte Daten gebunden werden, die im XAML selbst oder im CodeBehind bereitgestellt werden.
Beide Steuerelemente können flexibel in einer Vielzahl von Szenarien verwendet werden, aber insgesamt funktionieren sie am besten mit Sammlungen, in denen alle Elemente die gleiche grundlegende Struktur und Darstellung sowie das gleiche Interaktionsverhalten aufweisen. Das heißt, sie sollten alle dieselbe Aktion ausführen, wenn sie geklickt werden (z. B. um einen Link zu öffnen oder zu durchsuchen).
Vergleichen von ListView und GridView
ListView
Das ListView-Steuerelement zeigt Vertikal gestapelte Daten in einer einzelnen Spalte an. ListView funktioniert besser für Elemente, die Text als Schwerpunkt haben, und für Sammlungen, die von oben nach unten gelesen werden sollen (z. B. alphabetisch sortiert). Zu den gängigen Anwendungsfällen für ListView gehören Listen von Nachrichten und Suchergebnissen. Wenn Sie Sammlungen in mehreren Spalten oder in einem tabellenähnlichen Format anzeigen müssen, sollten Sie ListView nicht verwenden. Erwägen Sie stattdessen die Verwendung eines DataGrid-Steuerelements .
GridView
Das GridView-Steuerelement stellt eine Auflistung von Elementen in Zeilen und Spalten dar, die vertikal gescrollt werden können. Daten werden horizontal gestapelt, bis sie eine Spalte ausfüllen, und dann mit der nächsten Zeile in der Spalte fortgesetzt. GridView funktioniert besser für Sammlungen, die Bilder als Fokus haben oder deren Elemente von nebeneinander gelesen werden können oder nicht in einer bestimmten Reihenfolge sortiert werden. Ein gängiger Anwendungsfall für GridView ist ein Foto- oder Produktkatalog.
Welches Steuerelement sollten Sie verwenden? Ein Vergleich mit ItemsRepeater
Es ist wichtig, die Unterschiede zwischen diesen Arten von Steuerelementen zu verstehen, bevor Sie entscheiden, welches Steuerelement verwendet werden soll.
ListView und Gitteransicht
Die funktionsreichen ListView- und GridView-Steuerelemente funktionieren sofort einsatzbereit. Sie erfordern keine Anpassung, können aber einfach angepasst werden. Jede verfügt über eine eigene integrierte Benutzeroberfläche und UX und ist so konzipiert, dass nahezu jeder Sammlungstyp unverändert angezeigt wird.
ItemsRepeater
Das ItemsRepeater-Steuerelement wird auch zum Anzeigen von Sammlungen verwendet, ist aber als Baustein zum Erstellen eines benutzerdefinierten Steuerelements konzipiert, das Ihren spezifischen Ui-Anforderungen entspricht. Es verfügt nicht über die gleichen integrierten Features und Funktionen wie ListView und GridView, sodass Sie alle erforderlichen Features oder Interaktionen implementieren müssen. Verwenden Sie ItemsRepeater, wenn Sie über eine stark angepasste Benutzeroberfläche verfügen, die Sie nicht mit ListView oder GridView erstellen können, oder wenn Ihre Datenquelle ein anderes Verhalten für jedes Element erfordert.
Weitere Informationen zu ItemsRepeater finden Sie in der Dokumentation zu Richtlinien und API.
UWP und WinUI 2
Wichtig
Die Informationen und Beispiele in diesem Artikel sind für Apps optimiert, die das Windows App SDK und WinUI 3 verwenden, gelten jedoch allgemein für UWP-Apps, die WinUI 2 verwenden. In der UWP-API-Referenz finden Sie plattformspezifische Informationen und Beispiele.
Dieser Abschnitt enthält Informationen, die Sie zum Verwenden des Steuerelements in einer UWP- oder WinUI 2-App benötigen.
APIs für diese Steuerelemente sind im Windows.UI.Xaml.Controls-Namespace vorhanden.
- UWP-APIs:ListView-Klasse, GridView-Klasse, ItemsSource-Eigenschaft, Items-Eigenschaft
- Öffnen Sie die WinUI 2-Katalog-App, und sehen Sie sich die ListView oder die GridView in Aktion an. Die App WinUI 2-Katalog umfasst interaktive Beispiele für die meisten WinUI 2-Steuerelemente, -Features und -Funktionen. Rufen Sie die App aus dem Microsoft Store oder den Quellcode auf GitHub ab.
Es wird empfohlen, die neueste WinUI 2-Version zu verwenden, um die aktuellsten Stile und Vorlagen für alle Steuerelemente abzurufen.
Erstellen einer Listenansicht oder einer Rasteransicht
- Wichtige APIs:ListView-Klasse, GridView-Klasse, ItemsSource-Eigenschaft, Items-Eigenschaft
Die WinUI 3-Katalog-App umfasst interaktive Beispiele für die meisten WinUI 3-Steuerelemente, -Features und -Funktionen. Laden Sie die App aus dem Microsoft Store herunter, oder rufen Sie den Quellcode auf GitHub ab.
ListView und GridView sind beide ItemsControl-Typen, sie können also eine Sammlung von Elementen beliebigen Typs enthalten. Ein ListView- oder GridView-Steuerelement muss Elemente in seiner Items-Auflistung enthalten, bevor es etwas auf dem Bildschirm anzeigen kann. Zum Auffüllen der Ansicht können Sie elemente direkt zur Auflistung hinzufügen oder die ItemsSource-Eigenschaft auf eine Datenquelle festlegen.
Achtung
Sie können entweder die Items- oder ItemsSource-Eigenschaft verwenden, um die Liste aufzufüllen, aber Sie können nicht beide gleichzeitig verwenden. Wenn Sie die ItemsSource-Eigenschaft festlegen und dann ein Element in XAML hinzufügen, wird das hinzugefügte Element ignoriert. Wenn Sie die ItemsSource-Eigenschaft festlegen und der Items-Sammlung ein Element in Code hinzufügen, wird eine Ausnahme ausgelöst.
Viele der Beispiele in diesem Artikel füllen der Einfachheit halber die Items-Auflistung direkt auf. Es ist jedoch üblicher, dass die Elemente in einer Liste aus einer dynamischen Quelle stammen, z. B. einer Liste mit Büchern aus einer Onlinedatenbank. Verwenden Sie für diesen Zweck die ItemsSource-Eigenschaft.
Hinzufügen von Elementen zu einem ListView- oder GridView-Steuerelement
Sie können elemente zur ListView- oder GridView Items-Auflistung hinzufügen, indem Sie entweder XAML oder Code verwenden, um dasselbe Ergebnis zu erzielen. Normalerweise fügen Sie Elemente über XAML hinzu, wenn Sie über eine kleine Anzahl von Elementen verfügen, die sich nicht ändern und einfach definiert werden können, oder wenn Sie die Elemente zur Laufzeit im Code generieren.
Methode 1: Hinzufügen von Elementen zur Items-Auflistung
Option 1: Hinzufügen von Elementen über XAML
<!-- No corresponding C# code is needed for this example. --> <ListView x:Name="Fruits"> <x:String>Apricot</x:String> <x:String>Banana</x:String> <x:String>Cherry</x:String> <x:String>Orange</x:String> <x:String>Strawberry</x:String> </ListView>Option 2: Hinzufügen von Elementen über Code
<StackPanel Name="FruitsPanel"></StackPanel>// Create a new ListView and add content. ListView Fruits = new ListView(); Fruits.Items.Add("Apricot"); Fruits.Items.Add("Banana"); Fruits.Items.Add("Cherry"); Fruits.Items.Add("Orange"); Fruits.Items.Add("Strawberry"); // Add the ListView to a parent container in the visual tree (which you created in the corresponding XAML file). FruitsPanel.Children.Add(Fruits);
Beide Optionen erzeugen dieselbe Listenansicht, wie hier gezeigt:
Methode 2: Hinzufügen von Elementen durch Festlegen der ItemsSource-Eigenschaft
Sie würden normalerweise eine ListView oder GridView verwenden, um Daten aus einer Quelle wie einer Datenbank oder dem Internet anzuzeigen. Um ein ListView- oder GridView-Steuerelement aus einer Datenquelle aufzufüllen, legen Sie dessen ItemsSource-Eigenschaft auf eine Sammlung von Datenelementen fest. Diese Methode funktioniert besser, wenn ListView oder GridView benutzerdefinierte Klassenobjekte enthält, wie in den folgenden Beispielen gezeigt.
Option 1: Festlegen von ItemsSource im Code
Hier wird die ListView ItemsSource-Eigenschaft im Code direkt auf eine instance einer Auflistung festgelegt.
<StackPanel x:Name="ContactPanel"></StackPanel>// Class definition should be provided within the namespace being used, outside of any other classes. this.InitializeComponent(); // Instead of adding hard coded items to an ObservableCollection as shown here, //the data could be pulled asynchronously from a database or the internet. ObservableCollection<Contact> Contacts = new ObservableCollection<Contact>(); // You create Contact objects by providing a first name, last name, and company for the Contact constructor. // They are then added to the ObservableCollection Contacts. Contacts.Add(new Contact("John", "Doe", "Contoso, LTD.")); Contacts.Add(new Contact("Jane", "Doe", "Fabrikam, Inc.")); Contacts.Add(new Contact("Santa", "Claus", "Alpine Ski House")); // Create a new ListView (or GridView) for the UI, and add content by setting ItemsSource ListView ContactsLV = new ListView(); ContactsLV.ItemsSource = Contacts; // Add the ListView to a parent container in the visual tree (which you created in the corresponding XAML file) ContactPanel.Children.Add(ContactsLV);Option 2: Festlegen von ItemsSource in XAML
Sie können die ItemsSource-Eigenschaft auch an eine Sammlung im XAML-Code binden. Hier ist ItemsSource an eine öffentliche Eigenschaft namens Contacts gebunden, die die private Datensammlung der Seite mit dem Namen _contacts verfügbar macht.
<ListView x:Name="ContactsLV" ItemsSource="{x:Bind Contacts}"/>// Provide a class definition within the namespace being used, outside of any other classes. // These two declarations belong outside the main page class. private ObservableCollection<Contact> _contacts = new ObservableCollection<Contact>(); public ObservableCollection<Contact> Contacts { get { return this._contacts; } } // Define this method within your main page class. protected override void OnNavigatedTo(NavigationEventArgs e) { base.OnNavigatedTo(e); // Instead of hard coded items, the data could be pulled // asynchronously from a database or the internet. Contacts.Add(new Contact("John", "Doe", "Contoso, LTD.")); Contacts.Add(new Contact("Jane", "Doe", "Fabrikam, Inc.")); Contacts.Add(new Contact("Santa", "Claus", "Alpine Ski House")); }
Beide Optionen erzeugen dieselbe Listenansicht, wie im folgenden Screenshot gezeigt. (Die Listenansicht zeigt die Zeichenfolgendarstellung jedes Elements an, da für diese Übung keine Datenvorlage definiert ist.)
Wichtig
Ohne eine definierte Datenvorlage werden benutzerdefinierte Klassenobjekte nur mit ihrem Zeichenfolgenwert in der Listenansicht angezeigt, wenn sie über eine definierte ToString-Methode verfügen.
Im nächsten Abschnitt wird ausführlicher erläutert, wie einfache und benutzerdefinierte Klassenelemente in einer ListView- oder GridView-Vorlage visuell dargestellt werden.
Weitere Informationen zur Datenbindung finden Sie unter Übersicht über Datenbindung.
Hinweis
Wenn Sie gruppierte Daten in Ihrer Listenansicht anzeigen müssen, müssen Sie an eine CollectionViewSource-Klasse binden. CollectionViewSource fungiert als Proxy für die Sammlungsklasse in XAML und aktiviert die Unterstützung von Gruppierung. Weitere Informationen finden Sie unter CollectionViewSource.
Anpassen des Aussehens mit einer Datenvorlage
Mithilfe einer Datenvorlage in einem ListView- oder GridView-Steuerelement können Sie definieren, wie die Elemente und Daten visualisiert werden sollen. Datenelemente werden in der Listenansicht standardmäßig als Zeichenfolgendarstellung des Datenobjekts angezeigt, an das sie gebunden sind. Sie können die Zeichenfolgendarstellung einer bestimmten Eigenschaft des Datenelements anzeigen, indem Sie DisplayMemberPath auf diese Eigenschaft festlegen.
In der Regel möchten Sie jedoch eine umfassendere Darstellung Ihrer Daten anzeigen. Um anzugeben, wie Elemente in der Listen- oder Rasteransicht angezeigt werden sollen, erstellen Sie eine DataTemplate-Klasse . Der XAML-Code in DataTemplate definiert das Layout und die Darstellung der Steuerelemente, die zum Anzeigen eines einzelnen Elements verwendet werden. Die Steuerelemente im Layout können an die Eigenschaften eines Datenobjekts gebunden werden, oder sie können statischen Inhalt aufweisen, der inline definiert ist.
Wichtig
Wenn Sie die x:Bind-Markuperweiterung in DataTemplate verwenden, müssen Sie den Datentyp (x:DataType) in der Datenvorlage angeben.
Eine einfache ListView-Datenvorlage
In diesem Beispiel ist das Datenelement eine einfache Zeichenfolge. Um ein Bild links von der Zeichenfolge hinzuzufügen und die Zeichenfolge in Teal anzuzeigen, definieren Sie DataTemplate inline innerhalb der ListView-Definition. Dies ist dasselbe ListView-Steuerelement, das Sie zuvor mit Option 1 unter Methode 1 erstellt haben.
<!--No corresponding code is needed for this example.-->
<ListView x:Name="FruitsList">
<ListView.ItemTemplate>
<DataTemplate x:DataType="x:String">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="47"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Source="Assets/placeholder.png" Width="32" Height="32"
HorizontalAlignment="Left" VerticalAlignment="Center"/>
<TextBlock Text="{x:Bind}" Foreground="Teal" FontSize="14"
Grid.Column="1" VerticalAlignment="Center"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<x:String>Apricot</x:String>
<x:String>Banana</x:String>
<x:String>Cherry</x:String>
<x:String>Orange</x:String>
<x:String>Strawberry</x:String>
</ListView>
So werden die Datenelemente angezeigt, wenn Sie eine einfache ListView-Datenvorlage anwenden:
Eine ListView-Datenvorlage für benutzerdefinierte Klassenobjekte
Im folgenden Beispiel ist das Datenelement ein Contact-Objekt. Um das Kontaktbild links neben Dem Kontaktnamen und dem Unternehmen hinzuzufügen, definieren Sie DataTemplate inline innerhalb der ListView-Definition. Diese ListView-Datenvorlage wurde wie zuvor gezeigt in Option 2 unter Methode 2 erstellt.
<ListView x:Name="ContactsLV" ItemsSource="{x:Bind Contacts}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="local:Contact">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Grid.RowSpan="2" Source="Assets/grey-placeholder.png" Width="32"
Height="32" HorizontalAlignment="Center" VerticalAlignment="Center"></Image>
<TextBlock Grid.Column="1" Text="{x:Bind Name}" Margin="12,6,0,0"
Style="{ThemeResource BaseTextBlockStyle}"/>
<TextBlock Grid.Column="1" Grid.Row="1" Text="{x:Bind Company}" Margin="12,0,0,6"
Style="{ThemeResource BodyTextBlockStyle}"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
So werden die Datenelemente angezeigt, wenn Sie eine ListView-Datenvorlage auf benutzerdefinierte Klassenobjekte anwenden:
Datenvorlagen sind der bevorzugte Weg für die Definition des Aussehens Ihrer ListView. Sie können sich auch erheblich auf die Leistung auswirken, wenn Ihre Liste eine große Anzahl von Elementen enthält.
Sie können Ihre Datenvorlage inline in der ListView- oder GridView-Definition definieren, wie im vorherigen Code gezeigt, oder separat in einem Abschnitt "Ressourcen". Wenn Sie sie außerhalb der ListView- oder GridView-Definition definieren, müssen Sie der Datenvorlage ein x:Key-Attribut zuweisen und es der ItemTemplate-Eigenschaft von ListView oder GridView mithilfe dieses Schlüssels zuweisen.
Weitere Informationen und Beispiele zur Verwendung von Datenvorlagen und Elementcontainern zur Definition des Aussehens von Elementen in Ihrer Liste oder Ihrem Raster finden Sie unter Elementcontainer und Vorlagen.
Ändern des Layouts von Elementen
Wenn Sie einem ListView- oder GridView-Steuerelement Elemente hinzufügen, wird jedes Element automatisch in einen Elementcontainer umgebrochen und dann alle Elementcontainer festgelegt. Wie diese Elementcontainer angeordnet werden, hängt von der ItemsPanel-Eigenschaft des Steuerelements ab.
ListView verwendet standardmäßig ItemsStackPanel, wodurch eine vertikale Liste erzeugt wird:
GridView verwendet ItemsWrapGrid, das Elemente horizontal hinzufügt und vertikal umschließt und scrollt:
Sie können das Layout von Elementen ändern, indem Sie die Eigenschaften im Elementbereich anpassen, oder Sie können den Standardbereich durch einen anderen Bereich ersetzen.
Hinweis
Wenn Sie ItemsPanel ändern, deaktivieren Sie die Virtualisierung nicht . Sowohl ItemsStackPanel als auch ItemsWrapGrid unterstützen Virtualisierung, sodass diese Klassen sicher verwendet werden können. Wenn Sie ein anderes Panel verwenden, könnten Sie die Virtualisierung deaktivieren und die Leistung der Listenansicht beeinträchtigen. Weitere Informationen finden Sie in den Artikeln zur Listenansicht unter Leistung.
In diesem Beispiel wird gezeigt, wie ein ListView-Steuerelement seine Elementcontainer in einer horizontalen Liste anlegt, indem die Orientation-Eigenschaft von ItemsStackPanel geändert wird.
Da die Listenansicht standardmäßig vertikal scrollt, müssen Sie auch einige Eigenschaften im internen ScrollViewer der Listenansicht anpassen, damit sie horizontal scrollt.
- Ändern Sie ScrollViewer.HorizontalScrollMode in Enabled oder Auto.
- Ändern Sie ScrollViewer.HorizontalScrollBarVisibility in Auto.
- Ändern Sie ScrollViewer.VerticalScrollMode in Disabled.
- Ändern Sie ScrollViewer.VerticalScrollBarVisibility in Ausgeblendet.
Wichtig
Die folgenden Beispiele werden mit der Breite der Listenansicht ohne Einschränkungen gezeigt, sodass die horizontalen Bildlaufleisten nicht angezeigt werden. Wenn Sie diesen Code ausführen, können Sie für ListView festlegen Width="180" , dass die Bildlaufleisten angezeigt werden.
<ListView Height="60"
ScrollViewer.HorizontalScrollMode="Enabled"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollMode="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Hidden">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<x:String>Apricot</x:String>
<x:String>Banana</x:String>
<x:String>Cherry</x:String>
<x:String>Orange</x:String>
<x:String>Strawberry</x:String>
</ListView>
So wird die Liste angezeigt:
Im nächsten Beispiel legt ListView Elemente in einer vertikalen Umbruchliste an, indem ItemsWrapGrid anstelle von ItemsStackPanel verwendet wird.
Wichtig
Sie müssen die Höhe der Listenansicht einschränken, um zu erzwingen, dass das Steuerelement die Container umschließt.
<ListView Height="100"
ScrollViewer.HorizontalScrollMode="Enabled"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollMode="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Hidden">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<x:String>Apricot</x:String>
<x:String>Banana</x:String>
<x:String>Cherry</x:String>
<x:String>Orange</x:String>
<x:String>Strawberry</x:String>
</ListView>
So wird die Liste angezeigt:
Wenn Sie gruppierte Daten in der Listenansicht anzeigen, bestimmt ItemsPanel, wie die Elementgruppen angeordnet sind, nicht wie die einzelnen Elemente angeordnet sind. Wenn Sie beispielsweise das zuvor gezeigte horizontale ItemsStackPanel verwenden, um gruppierte Daten anzuzeigen, werden die Gruppen horizontal angeordnet, aber die Elemente in jeder Gruppe werden weiterhin vertikal gestapelt, wie hier gezeigt:
Auswahl von Elementen und Interaktion
Sie können aus einer Vielzahl von Möglichkeiten wählen, um Benutzern die Interaktion mit einer Listenansicht zu ermöglichen. Standardmäßig können Benutzer ein einzelnes Element auswählen. Sie können die Eigenschaft SelectionMode ändern, um eine Mehrfachauswahl zu ermöglichen oder die Auswahl zu deaktivieren. Sie können die IsItemClickEnabled-Eigenschaft so festlegen, dass Benutzer auf ein Element (z. B. eine Schaltfläche) klicken, um eine Aktion aufzurufen, anstatt das Element auszuwählen.
Hinweis
Sowohl ListView als auch GridView verwenden die ListViewSelectionMode-Enumeration für ihre SelectionMode-Eigenschaften. IsItemClickEnabled ist standardmäßig auf False festgelegt, sodass Sie es nur so festlegen müssen, dass der Klickmodus aktiviert wird.
In der folgenden Tabelle werden die Arten gezeigt, wie Benutzer mit einer Listenansicht interagieren können und wie Sie auf die jeweilige Interaktion reagieren können.
| Um diese Interaktion zu ermöglichen: | Verwenden Sie diese Einstellungen: | Behandeln Sie dieses Ereignis: | Verwenden Sie diese Eigenschaft zum Abrufen des ausgewählten Elements: |
|---|---|---|---|
| Keine Interaktion | SelectionMode="None" IsItemClickEnabled="False" |
– | NICHT ZUTREFFEND |
| Einzelauswahl | SelectionMode="Single" IsItemClickEnabled="False" |
SelectionChanged | Selecteditem Selectedindex |
| Mehrfachauswahl | SelectionMode="Multiple" IsItemClickEnabled="False" |
SelectionChanged | SelectedItems |
| Erweiterte Auswahl | SelectionMode="Extended" IsItemClickEnabled="False" |
SelectionChanged | SelectedItems |
| Klicken Sie im Menüband auf | SelectionMode="None" IsItemClickEnabled="True" |
ItemClick | – |
Hinweis
Sie können IsItemClickEnabled aktivieren, um ein ItemClick-Ereignis auszulösen, während SelectionMode ebenfalls auf Single, Multiple oder Extended festgelegt ist. Wenn Sie dies tun, wird zuerst das ItemClick-Ereignis und anschließend das SelectionChanged-Ereignis ausgelöst. In einigen Fällen (z. B. wenn Sie zu einer anderen Seite im ItemClick-Ereignishandler wechseln), wird das SelectionChanged-Ereignis nicht ausgelöst, und das Element ist nicht ausgewählt.
Sie können diese Eigenschaften in XAML oder im Code festlegen, wie hier gezeigt:
<ListView x:Name="myListView" SelectionMode="Multiple"/>
<GridView x:Name="myGridView" SelectionMode="None" IsItemClickEnabled="True"/>
myListView.SelectionMode = ListViewSelectionMode.Multiple;
myGridView.SelectionMode = ListViewSelectionMode.None;
myGridView.IsItemClickEnabled = true;
Schreibgeschützt
Sie können die Eigenschaft SelectionMode auf ListViewSelectionMode.None festlegen, um die Elementauswahl zu deaktivieren. Dadurch wird das Steuerelement in den schreibgeschützten Modus versetzt, sodass es zum Anzeigen von Daten, aber nicht zur Interaktion mit dem Steuerelement verwendet wird. Das heißt, die Elementauswahl ist deaktiviert, das Steuerelement selbst jedoch nicht.
Einzelauswahl
In dieser Tabelle werden Tastatur-, Maus- und Touchinteraktionen beschrieben, wenn SelectionMode auf Single festgelegt ist.
| Zusatztaste | Interaktion |
|---|---|
| Keine | |
| STRG |
Wenn SelectionMode auf Single festgelegt ist, können Sie das ausgewählte Datenelement aus der SelectedItem-Eigenschaft abrufen. Sie können den Index in der Auflistung des ausgewählten Elements abrufen, indem Sie die SelectedIndex-Eigenschaft verwenden. Wenn kein Element ausgewählt ist, ist SelectedItem null, und SelectedIndex ist -1.
Wenn Sie versuchen, ein Element, das sich nicht in der Items-Auflistung befindet, als SelectedItem festzulegen, wird der Vorgang ignoriert, und SelectedItem ist NULL. Wenn Sie jedoch versuchen, SelectedIndex auf einen Index festzulegen, der sich außerhalb des Bereichs der Elemente in der Liste befindet, tritt eine System.ArgumentException-Ausnahme auf.
Mehrfachauswahl
In dieser Tabelle werden die Tastatur-, Maus- und Touchinteraktionen beschrieben, wenn SelectionMode auf Multiple festgelegt ist.
| Zusatztaste | Interaktion |
|---|---|
| Keine | |
| UMSCHALTTASTE |
Erweiterte Auswahl
In dieser Tabelle werden die Tastatur-, Maus- und Touchinteraktionen beschrieben, wenn SelectionMode auf Erweitert festgelegt ist.
| Zusatztaste | Interaktion |
|---|---|
| Keine | |
| STRG | |
| UMSCHALTTASTE |
Wenn SelectionMode auf Mehrere oder Erweitert festgelegt ist, können Sie die ausgewählten Datenelemente aus der SelectedItems-Eigenschaft abrufen.
Die Eigenschaften SelectedIndex, SelectedItem und SelectedItems sind synchronisiert. Wenn Sie beispielsweise SelectedIndex auf -1 festlegen, wird SelectedItem auf NULL und SelectedItems ist leer. Wenn Sie SelectedItem auf NULL festlegen, ist SelectedIndex auf -1 und SelectedItems leer.
Im Mehrfachauswahlmodus enthält SelectedItem das Element, das zuerst ausgewählt wurde, und Selectedindex enthält den Index des Elements, das zuerst ausgewählt wurde.
Reagieren auf Änderungen der Auswahl
Um auf Änderungen der Auswahl in einer Listenansicht zu reagieren, behandeln Sie das Ereignis SelectionChanged. Im Ereignishandlercode können Sie die Liste mit den ausgewählten Elementen aus der SelectionChangedEventArgs.AddedItems-Eigenschaft abrufen. Sie können alle Elemente abrufen, deren Auswahl aus der SelectionChangedEventArgs.RemovedItems-Eigenschaft aufgehoben wurde. Die AddedItems- und RemovedItems-Auflistungen enthalten höchstens ein Element, es sei denn, Benutzer wählen einen Bereich von Elementen aus, indem Sie die UMSCHALTTASTE gedrückt halten.
Das folgende Beispiel zeigt, wie Sie das SelectionChanged-Ereignis behandeln und auf die verschiedenen Item-Auflistungen zugreifen:
<StackPanel HorizontalAlignment="Right">
<ListView x:Name="listView1" SelectionMode="Multiple"
SelectionChanged="ListView1_SelectionChanged">
<x:String>Apricot</x:String>
<x:String>Banana</x:String>
<x:String>Cherry</x:String>
<x:String>Orange</x:String>
<x:String>Strawberry</x:String>
</ListView>
<TextBlock x:Name="selectedItem"/>
<TextBlock x:Name="selectedIndex"/>
<TextBlock x:Name="selectedItemCount"/>
<TextBlock x:Name="addedItems"/>
<TextBlock x:Name="removedItems"/>
</StackPanel>
private void ListView1_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (listView1.SelectedItem != null)
{
selectedItem.Text =
"Selected item: " + listView1.SelectedItem.ToString();
}
else
{
selectedItem.Text =
"Selected item: null";
}
selectedIndex.Text =
"Selected index: " + listView1.SelectedIndex.ToString();
selectedItemCount.Text =
"Items selected: " + listView1.SelectedItems.Count.ToString();
addedItems.Text =
"Added: " + e.AddedItems.Count.ToString();
removedItems.Text =
"Removed: " + e.RemovedItems.Count.ToString();
}
Klickmodus
Sie können eine Listenansicht so ändern, dass Benutzer auf Schaltflächen und andere Elemente klicken, anstatt sie auszuwählen. Dies ist beispielsweise nützlich, wenn Ihre App eine neue Seite öffnet, wenn Benutzer auf ein Element in einer Liste oder einem Raster klicken.
So aktivieren Sie dieses Verhalten
- Legen Sie SelectionMode auf None fest.
- Legen Sie IsItemClickEnabled auf True fest.
- Behandeln Sie das ItemClick-Ereignis, um etwas zu tun, wenn Benutzer auf ein Element klicken.
Dies ist eine Listenansicht mit Elementen, auf die geklickt werden kann. Der Code im ItemClick-Ereignishandler öffnet eine neue Seite in der App.
<ListView SelectionMode="None"
IsItemClickEnabled="True"
ItemClick="ListView1_ItemClick">
<x:String>Page 1</x:String>
<x:String>Page 2</x:String>
<x:String>Page 3</x:String>
<x:String>Page 4</x:String>
<x:String>Page 5</x:String>
</ListView>
private void ListView1_ItemClick(object sender, ItemClickEventArgs e)
{
switch (e.ClickedItem.ToString())
{
case "Page 1":
this.Frame.Navigate(typeof(Page1));
break;
case "Page 2":
this.Frame.Navigate(typeof(Page2));
break;
case "Page 3":
this.Frame.Navigate(typeof(Page3));
break;
case "Page 4":
this.Frame.Navigate(typeof(Page4));
break;
case "Page 5":
this.Frame.Navigate(typeof(Page5));
break;
default:
break;
}
}
Programmgesteuerte Auswahl eines Bereichs von Elementen
Manchmal müssen Sie eine ListView-Elementauswahl programmgesteuert bearbeiten. Beispielsweise können Sie die Schaltfläche Alle auswählen anzeigen, damit Benutzer alle Elemente in einer Liste auswählen können. In diesem Fall ist es in der Regel nicht sehr effizient, Elemente einzeln der SelectedItems-Auflistung hinzuzufügen und daraus zu entfernen. Jede Elementänderung verursacht ein SelectionChanged-Ereignis, und wenn Sie direkt mit den Elementen arbeiten, anstatt mit Indexwerten zu arbeiten, wird das Element ent virtualisiert.
Es ist effizienter, die Methoden SelectAll, SelectRange und DeselectRange zum Ändern der Auswahl zu verwenden, als die SelectedItems-Eigenschaft zu verwenden. Mit diesen Methoden werden Elemente mithilfe von Bereichen von Elementindizes ausgewählt (oder deaktiviert). Elemente, die virtualisiert sind, bleiben virtualisiert, da nur der Index verwendet wird. Alle Elemente im angegebenen Bereich werden ausgewählt (bzw. die Auswahl aller Elemente im angegeben Bereich wird aufgehoben), unabhängig vom ursprünglichen Auswahlzustand. Das SelectionChanged-Ereignis tritt nur einmal für jeden Aufruf dieser Methoden auf.
Wichtig
Sie sollten diese Methoden nur aufrufen, wenn die SelectionMode-Eigenschaft auf Multiple oder Extended festgelegt ist. Wenn Sie SelectRange aufrufen, wenn SelectionMode Single oder None ist, wird eine Ausnahme ausgelöst.
Wenn Sie Elemente mithilfe von Indexbereichen auswählen, verwenden Sie die SelectedRanges-Eigenschaft , um alle ausgewählten Bereiche in der Liste abzurufen.
Wenn die ItemsSource-Eigenschaft IItemsRangeInfo implementiert und Sie diese Methoden zum Ändern der Auswahl verwenden, werden die Eigenschaften AddedItems und RemovedItems in SelectionChangedEventArgs nicht festgelegt. Das Festlegen dieser Eigenschaften erfordert die Deaktivierung der Virtualisierung des Elementobjekts. Verwenden Sie zum Abrufen der Elemente stattdessen die Eigenschaft SelectedRanges.
Sie können alle Elemente in einer Sammlung auswählen, indem Sie die SelectAll-Methode aufrufen. Es gibt jedoch keine entsprechende Methode, um die Auswahl aller Elemente aufzuheben. Sie können die Auswahl aller Elemente aufheben, indem Sie DeselectRange aufrufen und einen ItemIndexRange mit einem Wert für FirstIndex von 0 und einem Wert für Length übergeben, der der Anzahl der Elemente in der Sammlung entspricht. Dies wird im folgenden Beispiel zusammen mit einer Option zum Auswählen aller Elemente gezeigt.
<StackPanel Width="160">
<Button Content="Select all" Click="SelectAllButton_Click"/>
<Button Content="Deselect all" Click="DeselectAllButton_Click"/>
<ListView x:Name="listView1" SelectionMode="Multiple">
<x:String>Apricot</x:String>
<x:String>Banana</x:String>
<x:String>Cherry</x:String>
<x:String>Orange</x:String>
<x:String>Strawberry</x:String>
</ListView>
</StackPanel>
private void SelectAllButton_Click(object sender, RoutedEventArgs e)
{
if (listView1.SelectionMode == ListViewSelectionMode.Multiple ||
listView1.SelectionMode == ListViewSelectionMode.Extended)
{
listView1.SelectAll();
}
}
private void DeselectAllButton_Click(object sender, RoutedEventArgs e)
{
if (listView1.SelectionMode == ListViewSelectionMode.Multiple ||
listView1.SelectionMode == ListViewSelectionMode.Extended)
{
listView1.DeselectRange(new ItemIndexRange(0, (uint)listView1.Items.Count));
}
}
Informationen zum Ändern der Darstellung ausgewählter Elemente finden Sie unter Elementcontainer und Vorlagen.
Drag & Drop
ListView- und GridView-Steuerelemente unterstützen das Ziehen und Ablegen von Elementen innerhalb ihrer eigenen Steuerelemente und zwischen ihnen und anderen ListView- und GridView-Steuerelementen. Weitere Informationen zum Implementieren von Drag and Drop-Funktionen finden Sie unter Drag and Drop.
Beispielcode herunterladen
- XAML ListView- und GridView-Beispiel: Veranschaulicht die Steuerelemente ListView und GridView.
- XAML-Beispiel zum Ziehen und Ablegen: Veranschaulicht das Ziehen und Ablegen mit dem ListView-Steuerelement.
- WinUI-Katalogbeispiel : Sehen Sie alle XAML-Steuerelemente in einem interaktiven Format.
Verwandte Artikel
Windows developer
Feedback
Bald verfügbar: Im Laufe des Jahres 2024 werden wir GitHub-Issues stufenweise als Feedbackmechanismus für Inhalte abbauen und durch ein neues Feedbacksystem ersetzen. Weitere Informationen finden Sie unter https://aka.ms/ContentUserFeedback.
Feedback senden und anzeigen für