Verzamelingen en lijsten

Verzamelingen en lijsten verwijzen beide naar de weergave van meerdere gerelateerde gegevensitems die samen worden weergegeven. Verzamelingen kunnen op meerdere manieren worden weergegeven, door verschillende verzamelingsbesturingselementen (ook wel verzamelingsweergaven genoemd). Verzamelingsbesturingselementen geven weer en maken interacties mogelijk met op verzameling gebaseerde inhoud, zoals een lijst met contactpersonen, een lijst met datums, een verzameling afbeeldingen, enzovoort.

Belangrijke API's: ItemsView, ListView-klasse, GridView-klasse, FlipView-klasse, TreeView-klasse, ItemsRepeater-klasse

De besturingselementen die in dit artikel worden behandeld, zijn onder andere:

Beheersing	Primair gebruik
ItemsView	verzamelingen weergeven met behulp van een flexibel indelingssysteem
ListView	inhoudsverzamelingen met veel tekst weergeven
GridView	inhoudsverzamelingen met veel afbeeldingen weergeven
FlipView	om inhoudsverzamelingen met veel afbeeldingen weer te geven waarvoor precies één item tegelijk de focus moet hebben
Boombeeld	inhoudsverzamelingen met veel tekst weergeven in een specifieke hiërarchie
ItemsRepeater-	als aanpasbare bouwsteen voor het maken van aangepaste verzamelingsbesturingselementen

Ontwerprichtlijnen, functies en voorbeelden worden hieronder gegeven voor elk besturingselement.

Elk van deze besturingselementen (met uitzondering van ItemsRepeater) biedt ingebouwde stijl en interactie. Als u echter het visuele uiterlijk van uw verzamelingsweergave en de items erin verder wilt aanpassen, wordt een DataTemplate gebruikt. Gedetailleerde informatie over gegevenssjablonen en het aanpassen van het uiterlijk van een verzamelingsweergave vindt u op de pagina Itemcontainers en sjablonen .

Elk van deze besturingselementen (met uitzondering van ItemsRepeater) heeft ook ingebouwd gedrag om de selectie van één of meerdere items mogelijk te maken. Zie het overzicht van selectiemodi voor meer informatie.

Een van de scenario's die niet in dit artikel worden behandeld, is het weergeven van verzamelingen in een tabel of meerdere kolommen. Als u een verzameling in deze indeling wilt weergeven, kunt u het DataGrid-besturingselement van de Windows Community Toolkit gebruiken.

Voorbeelden

WinUI 2 Gallery
	Als u de WinUI 2 Gallery-app hebt geïnstalleerd, raadpleegt u de Lijstweergave, GridView, FlipView, TreeView en ItemsRepeater in actie. De WinUI 2 Gallery-app (Microsoft Store) downloaden De broncode ophalen (GitHub)

Weergave Items

U kunt een itemsweergave gebruiken om tekst- of afbeeldingsgerelateerde gegevensitems weer te geven in verschillende flexibele indelingen die tijdens runtime kunnen worden gewisseld.

Is dit de juiste controle?

Gebruik een itemsweergave om het volgende te doen:

• Geef een verzameling weer die voornamelijk bestaat uit op tekst gebaseerde items, waarbij alle items hetzelfde visuele en interactiegedrag moeten hebben.
• Geef een inhoudsverzameling weer waarin het middelpunt van elk item een afbeelding is en elk item hetzelfde visuele en interactiegedrag moet hebben.
• Inhoudsbibliotheken weergeven.
• Geschikt voor verschillende gebruiksscenario's, waaronder de volgende veelvoorkomende:
  • Een lijst met contactpersonen maken.
  • Storefront-type gebruikersinterface (bijvoorbeeld door apps, nummers, producten)
  • Interactieve fotobibliotheken

Voorbeelden

Hier ziet u een itemsweergave met een verzameling foto's in een uniforme rasterindeling.

Dit is dezelfde verzameling die wordt weergegeven in een stack-indeling. De focus ligt hier op de tekst in plaats van op de foto.

Verwante artikelen

Onderwerp	Description
Itemsweergave	Meer informatie over de essentiële elementen van het gebruik van een itemsweergave in uw app.
Item-containers en -sjablonen	De items die u in een lijst of raster weergeeft, kunnen een belangrijke rol spelen in het algehele uiterlijk van uw app. Zorg ervoor dat uw app er geweldig uitziet door het uiterlijk van uw verzamelingsitems aan te passen door besturingssjablonen en gegevenssjablonen te wijzigen.

Lijstweergave

Lijstweergaven vertegenwoordigen tekstzware items, meestal in een verticaal gestapelde indeling met één kolom. Hiermee kunt u items categoriseren en groepskopteksten toewijzen, items slepen en neerzetten, inhoud cureren en items opnieuw ordenen.

Is dit de juiste controle?

Gebruik een lijstweergave om:

• Geef een verzameling weer die voornamelijk bestaat uit op tekst gebaseerde items, waarbij alle items hetzelfde visuele en interactiegedrag moeten hebben.
• Vertegenwoordig een enkele of gecategoriseerde verzameling inhoud.
• Geschikt voor verschillende gebruiksscenario's, waaronder de volgende veelvoorkomende:
  • Maak een lijst met berichten of berichtenlogboeken.
  • Een lijst met contactpersonen maken.
  • Maak het lijstvenster in het patroon lijst/details. Een lijst-/detailpatroon wordt vaak gebruikt in e-mailapps, waarin het ene deelvenster een lijst met selecteerbare items bevat, terwijl het andere deelvenster (details) een gedetailleerde weergave van het geselecteerde item heeft.

Opmerking

Als u aanwijzergebeurtenissen voor een UIElement wilt afhandelen in een schuifbare weergave (zoals een ScrollViewer of ListView), moet u expliciet ondersteuning uitschakelen voor manipulatiegebeurtenissen in het element in de weergave door UIElement.CancelDirectmanipulation aan te roepen. Als u manipulatiegebeurtenissen in de weergave opnieuw wilt inschakelen, roept u UIElement.TryStartDirectManipulationaan.

Voorbeelden

Hier volgt een eenvoudige lijstweergave waarin een lijst met contactpersonen wordt weergegeven en de gegevensitems alfabetisch worden gegroepeerd. De groepskoppen (elke letter van het alfabet in dit voorbeeld) kunnen ook worden aangepast om 'plakkerig' te blijven, omdat ze altijd boven aan de ListView worden weergegeven tijdens het schuiven.

Dit is een ListView die is omgekeerd om een logboek met berichten weer te geven, waarbij de nieuwste berichten onderaan worden weergegeven. Met een omgekeerde ListView worden items onder aan het scherm weergegeven met een ingebouwde animatie.

Verwante artikelen

Onderwerp	Description
Lijstweergave en rasterweergave	Meer informatie over het gebruik van een lijstweergave of rasterweergave in uw app.
Item-containers en -sjablonen	De items die u in een lijst- of rasterweergave weergeeft, kunnen een belangrijke rol spelen in het algehele uiterlijk van uw app. Zorg ervoor dat uw app er geweldig uitziet door het uiterlijk van uw verzamelingsitems aan te passen door besturingssjablonen en gegevenssjablonen te wijzigen.
Itemsjablonen voor lijstweergave	Gebruik deze voorbeelditemsjablonen voor een ListView om het uiterlijk van algemene app-typen op te halen.
Omgekeerde lijsten	Omgekeerde lijsten bevatten nieuwe items onderaan, zoals in een chat-app. Volg de richtlijnen van dit artikel voor het gebruik van een omgekeerde lijst in uw app.
Pull-to-refresh	Met het mechanisme voor pull-to-refresh kan een gebruiker een lijst met gegevens ophalen met behulp van contact om meer gegevens op te halen. Gebruik dit artikel om pull-to-refresh te implementeren in de lijstweergave.
Geneste gebruikersinterface	Geneste gebruikersinterface is een gebruikersinterface (UI) waarmee besturingselementen worden weergegeven die kunnen worden uitgevoerd binnen een container waarop een gebruiker ook actie kan ondernemen. U hebt bijvoorbeeld een lijstweergave-item met een knop en de gebruiker kan het lijstitem selecteren of op de knop drukken die erin is genest. Volg deze aanbevolen procedures om de beste geneste gebruikersinterface-ervaring voor uw gebruikers te bieden.

Rasterweergave

Rasterweergaven zijn geschikt voor het rangschikken en bladeren door inhoudsverzamelingen op basis van afbeeldingen. Een indeling van de rasterweergave schuift verticaal en pannen horizontaal. Items bevinden zich in een verpakte indeling, zoals ze worden weergegeven in een van links naar rechts en vervolgens van boven naar beneden.

Is dit de juiste controle?

Gebruik een rasterweergave om het volgende te doen:

• Geef een inhoudsverzameling weer waarin het middelpunt van elk item een afbeelding is en elk item hetzelfde visuele en interactiegedrag moet hebben.
• Inhoudsbibliotheken weergeven.
• Maak de twee inhoudsweergaven op die zijn gekoppeld aan semantische zoom.
• Geschikt voor verschillende gebruiksscenario's, waaronder de volgende veelvoorkomende:
  • Storefront-type gebruikersinterface (bijvoorbeeld door apps, nummers, producten)
  • Interactieve fotobibliotheken

Opmerking

Als u aanwijzergebeurtenissen wilt afhandelen voor een UIElement in een schuifbare weergave (zoals een ScrollViewer of ListView), moet u expliciet ondersteuning uitschakelen voor manipulatiegebeurtenissen op het element in de weergave door UIElement.CancelDirectmanipulation()aan te roepen. Als u manipulatiegebeurtenissen in de weergave opnieuw wilt inschakelen, roept u UIElement.TryStartDirectManipulation()aan.

Voorbeelden

In dit voorbeeld ziet u een typische indeling voor rasterweergaven, in dit geval voor het bladeren door apps. Metagegevens voor rasterweergave-items zijn meestal beperkt tot een paar regels tekst en een itemclassificatie.

Een rasterweergave is een ideale oplossing voor een inhoudsbibliotheek, die vaak wordt gebruikt voor het presenteren van media zoals afbeeldingen en video's. In een inhoudsbibliotheek verwachten gebruikers dat ze op een item kunnen tikken om een actie aan te roepen.

Verwante artikelen

Onderwerp	Description
Lijstweergave en rasterweergave	Meer informatie over het gebruik van een lijstweergave of rasterweergave in uw app.
Item-containers en -sjablonen	De items die u in een lijst- of rasterweergave weergeeft, kunnen een belangrijke rol spelen in het algehele uiterlijk van uw app. Zorg ervoor dat uw app er geweldig uitziet door het uiterlijk van uw verzamelingsitems aan te passen door besturingssjablonen en gegevenssjablonen te wijzigen.
Itemsjablonen voor rasterweergave	Gebruik deze voorbeelditemsjablonen voor een ListView om het uiterlijk van algemene app-typen op te halen.
Geneste gebruikersinterface	Geneste gebruikersinterface is een gebruikersinterface (UI) waarmee besturingselementen worden weergegeven die kunnen worden uitgevoerd binnen een container waarop een gebruiker ook actie kan ondernemen. U hebt bijvoorbeeld een lijstweergave-item met een knop en de gebruiker kan het lijstitem selecteren of op de knop drukken die erin is genest. Volg deze aanbevolen procedures om de beste geneste gebruikersinterface-ervaring voor uw gebruikers te bieden.

Weergave draaien

Spiegelweergaven zijn geschikt voor het bladeren door inhoudsverzamelingen op basis van afbeeldingen, met name waar de gewenste ervaring is dat slechts één afbeelding tegelijk zichtbaar is. Met een flipweergave kan de gebruiker de verzamelingsitems (verticaal of horizontaal) verplaatsen of spiegelen, waarbij elk item één voor één wordt weergegeven na de interactie van de gebruiker.

Is dit de juiste controle?

Gebruik een flip-weergave om het volgende te doen:

• Een kleine tot middelgrote verzameling (minder dan 25 items) weergeven, waarbij de verzameling bestaat uit afbeeldingen met weinig tot geen metagegevens.
• Items één voor één weergeven en de eindgebruiker in staat stellen de items in hun eigen tempo te doorlopen.
• Geschikt voor verschillende gebruiksscenario's, waaronder de volgende veelvoorkomende:
  • Fotogalerijen
  • Productgalerieën of showcases

Voorbeelden

In de volgende twee voorbeelden ziet u een FlipView waarmee respectievelijk horizontaal en verticaal wordt gespiegeld.

Verwante artikelen

Onderwerp	Description
weergave omdraaien	Meer informatie over het gebruik van een flip-weergave in uw app, samen met het aanpassen van het uiterlijk van uw items in een flipweergave.

Boomstructuurweergave

Structuurweergaven zijn geschikt voor het weergeven van op tekst gebaseerde verzamelingen met een belangrijke hiërarchie die moet worden weergegeven. Items in de structuurweergave zijn samenvouwbaar/uitvouwbaar, worden weergegeven in een visuele hiërarchie, kunnen worden aangevuld met pictogrammen en kunnen worden gesleept en verwijderd tussen structuurweergaven. Structuurweergaven maken nesten op N-niveau mogelijk.

Is dit de juiste controle?

Gebruik een structuurweergave om het volgende te doen:

• Een verzameling geneste items weergeven waarvan de context en betekenis afhankelijk zijn van een hiërarchie of een specifieke organisatieketen.
• Geschikt voor verschillende gebruiksscenario's, waaronder de volgende veelvoorkomende:
  • Bestandsbrowser
  • Organigram van bedrijf

Voorbeelden

Hier volgt een voorbeeld van een structuurweergave die een verkenner vertegenwoordigt en veel verschillende geneste items weergeeft die worden aangevuld met pictogrammen.

Verwante artikelen

Onderwerp	Description
Structuurweergave	Meer informatie over de essentie van het gebruik van een structuurweergave in uw app, samen met het aanpassen van het uiterlijk en interactiegedrag van uw items in een structuurweergave.

ItemsRepeater

ItemsRepeater verschilt van de rest van de verzamelingsbesturingselementen die op deze pagina worden weergegeven, omdat deze geen kant-en-klare stijl of interactie biedt, bijvoorbeeld wanneer deze eenvoudig op een pagina wordt geplaatst zonder eigenschappen te definiëren. ItemsRepeater is eerder een bouwsteen die u als ontwikkelaar kunt gebruiken om uw eigen besturingselement voor aangepaste verzamelingen te maken, met name een bouwsteen die niet kan worden bereikt met behulp van de andere besturingselementen in dit artikel. ItemsRepeater is een gegevensgestuurd en high-performance paneel dat kan worden afgestemd op uw exacte behoeften.

Aanbeveling

Het besturingselement ItemsView is gebouwd boven op ItemsRepeater en biedt veel van de voordelen van ItemsRepeater zonder dat u uw eigen aangepaste verzamelingsbeheer hoeft te maken.

Is dit de juiste controle?

Gebruik een ItemsRepeater als:

• U hebt een specifieke gebruikersinterface en gebruikerservaring in gedachten die niet kunnen worden gemaakt met behulp van bestaande verzamelingsbesturingselementen.
• U hebt een bestaande gegevensbron voor uw items (zoals gegevens die zijn opgehaald van internet, een database of een bestaande verzameling in uw code-behind).

Voorbeelden

De volgende drie voorbeelden zijn alle ItemsRepeater-besturingselementen die zijn gebonden aan dezelfde gegevensbron (een verzameling getallen). De verzameling getallen wordt op drie manieren weergegeven, waarbij elk van de onderstaande ItemsRepeaters een andere aangepaste indeling en een andere aangepaste ItemTemplate gebruikt.

Verwante artikelen

Onderwerp	Description
ItemsRepeater-	Leer de essentiële onderdelen van het gebruik van een ItemsRepeater in uw app, samen met het implementeren van alle benodigde interactie- en visuele onderdelen voor uw verzamelingsweergave.

Controlelijst voor globalisatie en lokalisatie

• Wrapping: Twee regels voor het lijstlabel toestaan.
• Horizontale uitbreiding: zorg ervoor dat velden geschikt zijn voor tekstuitbreiding en schuifbaar zijn.
• Verticale afstand: Gebruik niet-Latijnse tekens voor verticale afstand om ervoor te zorgen dat niet-Latijnse scripts correct worden weergegeven.

De voorbeeldcode halen

• WinUI Gallery-voorbeeld : bekijk alle XAML-besturingselementen in een interactieve indeling.

Verwante artikelen

Ontwerp- en UX-richtlijnen

• Lijst/Details
• Navigatievenster
• Semantische zoomfunctie
• slepen en neerzetten
• Miniatuurafbeeldingen

API-referentie

• ListView-klasse
• GridView-klasse
• Klasse Keuzelijst met invoervak
• Klasse ListBox