Listenansicht und Rasteransicht
Die meisten Anwendungen bearbeiten und anzeigen Gruppen von Daten, z. B. eine Bildergalerie oder eine Gruppe von E-Mail-Nachrichten. Das XAML-Benutzeroberflächenframework stellt ListView- und GridView-Steuerelemente bereit, die das Anzeigen und Bearbeiten von Daten in Ihrer App vereinfachen.
Hinweis
ListView und GridView leiten beide von der ListViewBase-Klasse ab, sodass sie dieselbe Funktionalität haben, aber Daten anders anzeigen. In diesem Artikel gelten Diskussionen zur Listenansicht sowohl für die ListView- als auch für gridView-Steuerelemente, 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 beim Arbeiten mit Sammlungen. Beide sind einfach zu implementieren und bieten einfache UI, Interaktion und Bildlauf, während sie einfach angepasst werden können. Und beide können an vorhandene dynamische Datenquellen oder hartcodierte Daten gebunden werden, die im XAML selbst oder im CodeBehind bereitgestellt werden.
Beide Steuerelemente sind flexibel in einer Vielzahl von Szenarien zu verwenden, aber insgesamt funktionieren sie am besten mit Sammlungen, in denen alle Elemente dieselbe grundlegende Struktur und Darstellung aufweisen, sowie dasselbe Interaktionsverhalten. Das heißt, sie alle sollten dieselbe Aktion ausführen, wenn sie darauf geklickt werden (z. B. um einen Link zu öffnen oder zu durchsuchen).
Vergleichen von ListView und GridView
ListView
Das ListView-Steuerelement zeigt Daten vertikal in einer einzelnen Spalte an. ListView funktioniert besser für Elemente mit Text als Fokuspunkt 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üllt und dann mit der nächsten Zeile in der Spalte fortsetzt. GridView funktioniert besser für Sammlungen, die Bilder als Fokus haben oder deren Elemente von seite zu Seite gelesen werden können oder nicht in einer bestimmten Reihenfolge sortiert sind. 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 Steuerelementtypen zu verstehen, bevor Sie entscheiden, welches Steuerelement verwendet werden soll.
ListView und GridView
Die featurereichen ListView- und GridView-Steuerelemente funktionieren sofort einsatzbereit. Sie benötigen 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 jede Art von Sammlung angezeigt wird.
ItemsRepeater
Das ItemsRepeater-Steuerelement wird auch zum Anzeigen von Sammlungen verwendet, ist jedoch als Baustein zum Erstellen eines benutzerdefinierten Steuerelements für Ihre speziellen UI-Anforderungen konzipiert. 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 hochgradig angepasste Benutzeroberfläche verfügen, die Sie nicht mithilfe von ListView oder GridView erstellen können, oder wenn Für jedes Element ein anderes Verhalten für die Datenquelle erforderlich ist.
Weitere Informationen zu ItemsRepeater finden Sie in der Richtlinien- und API-Dokumentation.
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 Gallery-App, und sehen Sie die ListView oder gridView in Aktion. Die App WinUI 2 Gallery beinhaltet 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.
Wir empfehlen die Verwendung der neuesten WinUI 2 zum Abrufen der aktuellsten Stile und Vorlagen für alle Steuerelemente.
Erstellen einer Listenansicht oder einer Rasteransicht
- Wichtige APIs: ListView-Klasse, GridView-Klasse, ItemsSource-Eigenschaft, Items-Eigenschaft
Öffnen Sie die WinUI 3 Gallery-App, und sehen Sie die ListView oder gridView in Aktion.
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 auf dem Bildschirm beliebige Elemente anzeigen kann. Um die Ansicht aufzufüllen, können Sie der Auflistung Elemente direkt 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 beide nicht gleichzeitig verwenden. Wenn Sie die ItemsSource-Eigenschaft festlegen und ein Element in XAML hinzufügen, wird das hinzugefügte Element ignoriert. Wenn Sie die ItemsSource-Eigenschaft festlegen und der Items-Auflistung im Code ein Element hinzufügen, wird eine Ausnahme ausgelöst.
Viele der Beispiele in diesem Artikel füllen die Items-Auflistung direkt aus Gründen der Einfachheit auf. Es ist jedoch häufiger, dass die Elemente in einer Liste aus einer dynamischen Quelle stammen, z. B. eine Liste von Büchern aus einer Onlinedatenbank. Sie verwenden die ItemsSource-Eigenschaft zu diesem Zweck.
Hinzufügen von Elementen zu einem ListView- oder GridView-Steuerelement
Sie können der ListView- oder GridView Items-Auflistung Elemente hinzufügen, indem Sie entweder XAML oder Code verwenden, um dasselbe Ergebnis zu erzielen. Sie würden Elemente über XAML hinzufügen, wenn Sie eine kleine Anzahl von Elementen haben, die sich nicht ändern und leicht definiert werden, 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 die gleiche Listenansicht, wie hier gezeigt:
Methode 2: Hinzufügen von Elementen durch Festlegen der ItemsSource-Eigenschaft
Sie würden in der Regel eine ListView oder GridView verwenden, um Daten aus einer Quelle wie einer Datenbank oder dem Internet anzuzeigen. Zum Auffüllen eines ListView- oder GridView-Steuerelements aus einer Datenquelle legen Sie die 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 Instanz 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 mit dem Namen "Kontakte" 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. (In der Listenansicht wird die Zeichenfolgendarstellung jedes Elements angezeigt, da für diese Übung keine Datenvorlage definiert ist.)
Wichtig
Ohne eine definierte Datenvorlage werden benutzerdefinierte Klassenobjekte in der Listenansicht mit ihrem Zeichenfolgenwert nur 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 eine Bindung an eine CollectionViewSource-Klasse erstellen. CollectionViewSource fungiert als Proxy für die Sammlungsklasse in XAML und ermöglicht die Gruppierungsunterstützung. 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.
Sie möchten jedoch möglicherweise eine umfangreichere Darstellung Ihrer Daten anzeigen. Um anzugeben, wie Elemente in der Listenansicht 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 statische Inhalte enthalten, die inline definiert sind.
Wichtig
Wenn Sie die x:Bind-Markuperweiterung in DataTemplate verwenden, müssen Sie den Datentyp (x:DataType) für die Datenvorlage angeben.
Eine einfache ListView-Datenvorlage
In diesem Beispiel ist das Datenelement eine einfache Zeichenfolge. Wenn Sie links neben der Zeichenfolge ein Bild hinzufügen und die Zeichenfolge im Teal anzeigen möchten, definieren Sie DataTemplate inline innerhalb der ListView-Definition. Dies ist dasselbe ListView-Steuerelement, das Sie zuvor mithilfe von 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. Wenn Sie das Kontaktbild links neben dem Kontaktnamen und dem Unternehmen hinzufügen möchten, definieren Sie "DataTemplate" inline in der ListView-Definition. Diese ListView-Datenvorlage wurde in Option 2 unter Methode 2 erstellt, wie zuvor gezeigt.
<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 auch die Leistung erheblich beeinträchtigen, wenn Ihre Liste eine große Anzahl von Elementen enthält.
Sie können Ihre Datenvorlage inline innerhalb der ListView- oder GridView-Definition definieren, wie im vorherigen Code dargestellt, 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 sie mithilfe dieses Schlüssels der ItemTemplate-Eigenschaft der ListView oder GridView 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, werden alle Elemente in einem Elementcontainer automatisch umbrochen und dann alle Elementcontainer festgelegt. Wie diese Elementcontainer angeordnet werden, hängt von der ItemsPanel-Eigenschaft des Steuerelements ab.
ListView verwendet standardmäßig ItemsStackPanel, was eine vertikale Liste erzeugt:
GridView verwendet ItemsWrapGrid, das Elemente horizontal hinzufügt, und umschließt und scrollt vertikal:
Sie können das Layout von Elementen ändern, indem Sie die Eigenschaften im Elementbereich anpassen oder den Standardbereich durch ein anderes Panel ersetzen.
Hinweis
Wenn Sie ItemsPanel ändern, deaktivieren Sie die Virtualisierung nicht . Sowohl ItemsStackPanel als auch ItemsWrapGrid unterstützen die Virtualisierung, sodass diese Klassen sicher verwendet werden können. Wenn Sie ein anderes Panel verwenden, können Sie die Virtualisierung deaktivieren und die Leistung der Listenansicht verlangsamen. Weitere Informationen finden Sie in den Artikeln zur Listenansicht unter "Leistung".
In diesem Beispiel wird gezeigt, wie Sie ein ListView-Steuerelement so gestalten, dass seine Elementcontainer in einer horizontalen Liste angeordnet werden, 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 scrollen kann.
- Ä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 nicht eingeschränkten Breite der Listenansicht gezeigt, sodass die horizontalen Bildlaufleisten nicht angezeigt werden. Wenn Sie diesen Code ausführen, können Sie festlegen Width="180" , dass ListView die Bildlaufleisten anzeigt.
<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 werden in ListView Elemente in einer vertikalen Umbruchliste mithilfe von ItemsWrapGrid anstelle von ItemsStackPanel angeordnet.
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 die Darstellung der einzelnen Elemente. Wenn Sie z. B. das zuvor gezeigte horizontale ItemsStackPanel zum Anzeigen gruppierter Daten verwenden, werden die Gruppen horizontal angeordnet, die Elemente in jeder Gruppe werden jedoch weiterhin vertikal gestapelt, wie hier gezeigt:
.
Auswahl von Elementen und Interaktion
Sie können aus einer Vielzahl von Möglichkeiten auswä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-Aufzählung für ihre SelectionMode-Eigenschaften. IsItemClickEnabled ist standardmäßig auf "False" festgelegt, daher müssen Sie ihn nur so festlegen, dass der Klickmodus aktiviert wird.
Diese Tabelle zeigt die Möglichkeiten, wie ein Benutzer mit einer Listenansicht interagieren kann und wie Sie auf die Interaktion reagieren können.
| Um diese Interaktion zu ermöglichen: | Verwenden Sie die folgenden Einstellungen: | Behandeln Sie dieses Ereignis: | Verwenden Sie diese Eigenschaft zum Abrufen des ausgewählten Elements: |
|---|---|---|---|
| Keine Interaktion | SelectionMode="None" IsItemClickEnabled="False" |
– | – |
| Einzelauswahl | SelectionMode="Single" IsItemClickEnabled="False" |
SelectionChanged | SelectedItem SelectedIndex |
| Mehrfachauswahl | SelectionMode="Multiple" IsItemClickEnabled="False" |
SelectionChanged | SelectedItems |
| Erweiterte Auswahl | SelectionMode="Extended" IsItemClickEnabled="False" |
SelectionChanged | SelectedItems |
| Klicken | SelectionMode="None" IsItemClickEnabled="True" |
ItemClick | N/V |
Hinweis
Sie können IsItemClickEnabled aktivieren, um ein ItemClick-Ereignis auszuheben, während SelectionMode auch auf Single, Multiple oder Extended festgelegt ist. Wenn Sie dies tun, wird das ItemClick-Ereignis zuerst ausgelöst, und dann wird das SelectionChanged-Ereignis ausgelöst. In einigen Fällen (z. B. wenn Sie im ItemClick-Ereignishandler zu einer anderen Seite wechseln), wird das SelectionChanged-Ereignis nicht ausgelöst, und das Element wird 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 SelectionMode-Eigenschaft auf ListViewSelectionMode.None festlegen, um die Elementauswahl zu deaktivieren. Dadurch wird das Steuerelement im schreibgeschützten Modus ausgeführt und kann zwar zum Anzeigen von Daten, nicht jedoch für die Interaktion mit ihm verwendet werden. Das heißt, die Elementauswahl ist deaktiviert, aber das Steuerelement selbst ist nicht.
Einzelauswahl
In dieser Tabelle werden Tastatur-, Maus- und Touchinteraktionen beschrieben, wenn SelectionMode auf Single festgelegt ist.
| Zusatztaste | Interaktion |
|---|---|
| None | |
| Ctrl |
Wenn SelectionMode auf Single festgelegt ist, können Sie das ausgewählte Datenelement aus der SelectedItem-Eigenschaft abrufen. Mit der SelectedIndex-Eigenschaft können Sie den Index in der Auflistung des ausgewählten Elements abrufen. Wenn kein Element ausgewählt ist, ist SelectedItem null, und SelectedIndex ist -1.
Wenn Sie versuchen, ein Element festzulegen, das nicht in der Items-Auflistung als SelectedItem enthalten ist, 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 "Mehrfach" festgelegt ist.
| Zusatztaste | Interaktion |
|---|---|
| None | |
| Shift |
Erweiterte Auswahl
In dieser Tabelle werden die Tastatur-, Maus- und Touchinteraktionen beschrieben, wenn SelectionMode auf "Erweitert" festgelegt ist.
| Zusatztaste | Interaktion |
|---|---|
| Keine | |
| Ctrl | |
| Shift |
Wenn SelectionMode auf "Mehrfach" oder "Erweitert" festgelegt ist, können Sie die ausgewählten Datenelemente aus der SelectedItems-Eigenschaft abrufen.
Die Eigenschaften SelectedIndex, SelectedItem und SelectedItems werden synchronisiert. Wenn Sie beispielsweise SelectedIndex auf -1 festlegen, wird SelectedItem auf NULL festgelegt, und SelectedItems ist leer. Und wenn Sie SelectedItem auf NULL festlegen, ist SelectedIndex auf -1 festgelegt, und SelectedItems ist 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 Auswahländerungen
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 Auflistungen "AddedItems" und "RemovedItems" 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 das SelectionChanged-Ereignis behandelt und auf die verschiedenen Item-Auflistungen zugegriffen wird:
<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 hilfreich, wenn Ihre App eine neue Seite öffnet, wenn Benutzer auf ein Element in einer Liste oder einem Raster klicken.
So aktivieren Sie dieses Verhalten
- Set SelectionMode to None.
- Legen Sie IsItemClickEnabled auf True fest.
- Behandeln Sie das ItemClick-Ereignis, um etwas zu tun, wenn Benutzer auf ein Element klicken.
Hier ist eine Listenansicht mit klickbaren Elementen. 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;
}
}
Programmgesteuertes Auswählen eines Bereichs von Elementen
Manchmal müssen Sie eine ListView-Elementauswahl programmgesteuert bearbeiten. Sie können beispielsweise eine 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, der Sammlung SelectedItems-Elemente einzeln hinzuzufügen oder Elemente einzeln aus dieser 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 de virtualisiert.
Es ist effizienter, die Methoden SelectAll, SelectRange und DeselectRange zu verwenden, um die Auswahl zu ändern, als die SelectedItems-Eigenschaft zu verwenden. Mit diesen Methoden werden Elemente mithilfe von Elementindizes ausgewählt (oder deaktiviert). Elemente, die virtualisiert werden, bleiben virtualisiert, da nur der Index verwendet wird. Alle Elemente im angegebenen Bereich werden unabhängig vom ursprünglichen Auswahlzustand ausgewählt (oder nicht ausgewählt). 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 or 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 De virtualisieren des Elementobjekts. Verwenden Sie die SelectedRanges-Eigenschaft, um stattdessen die Elemente abzurufen.
Sie können alle Elemente in einer Sammlung auswählen, indem Sie die SelectAll-Methode aufrufen. Es gibt jedoch keine entsprechende Methode, um alle Elemente zu deaktivieren. 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 sowie zwischen sich selbst und anderen ListView- und GridView-Steuerelementen. Weitere Informationen zum Implementieren von Drag- und Drop-Funktionen finden Sie unter "Ziehen und Ablegen".
Beispielcode herunterladen
- XAML-Beispiel für ListView und GridView: Veranschaulicht die ListView- und GridView-Steuerelemente.
- XAML-Beispiel für Ziehen und Ablegen: Veranschaulicht das Ziehen und Ablegen mit dem ListView-Steuerelement.
- Beispiel für Windows-UI-Bibliothek: Hier werden alle XAML-Steuerelemente in einem interaktiven Format dargestellt.
Verwandte Artikel
Windows developer