Notitie
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen u aan te melden of de directory te wijzigen.
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen de mappen te wijzigen.
Het patroon lijst/details heeft een lijstvenster (meestal met een lijstweergave) en een detailvenster voor inhoud. Wanneer een item in de lijst is geselecteerd, wordt het detailvenster bijgewerkt. Dit patroon wordt vaak gebruikt voor e-mail- en adresboeken.
Belangrijke API's: ListView-klasse, SplitView-klasse
Aanbeveling
Als u een XAML-besturingselement wilt gebruiken dat dit patroon voor u implementeert, raden we u aan het Besturingselement ListDetailsView XAML te gebruiken vanuit de Windows Community Toolkit.
Is dit het juiste patroon?
Het patroon lijst/details werkt goed als u het volgende wilt doen:
- Bouw een e-mail-app, adresboek of een app die is gebaseerd op een indeling met lijstdetails.
- Zoek en geef prioriteit aan een grote verzameling inhoud.
- Hiermee staat u het snel toevoegen en verwijderen van items uit een lijst toe terwijl u heen en weer werkt tussen contexten.
De juiste stijl kiezen
Bij het implementeren van het patroon lijst/details wordt u aangeraden de gestapelde stijl of de stijl naast elkaar te gebruiken op basis van de hoeveelheid beschikbare schermruimte.
| Beschikbare vensterbreedte | Aanbevolen stijl |
|---|---|
| 320 epx-640 epx | Gestapeld |
| 641 epx of breder | Naast elkaar |
Gestapelde stijl
In de gestapelde stijl is slechts één deelvenster tegelijk zichtbaar: de lijst of de details.
De gebruiker begint bij het lijstvenster en zoomt in op het detailvenster door een item in de lijst te selecteren. Voor de gebruiker lijkt het alsof de lijst- en detailweergaven op twee afzonderlijke pagina's bestaan.
Een gestapeld lijst-/detailpatroon maken
Een manier om het gestapelde lijst-/detailpatroon te maken, is door afzonderlijke pagina's te gebruiken voor het lijstvenster en het detailvenster. Plaats de lijstweergave op één pagina en het detailvenster op een afzonderlijke pagina.
Voor de lijstweergavepagina werkt een besturingselement voor lijstweergaven goed voor het presenteren van lijsten die afbeeldingen en tekst kunnen bevatten.
Gebruik voor de detailweergavepagina het inhoudselement dat het meest zinvol is. Als u veel afzonderlijke velden hebt, kunt u overwegen om een rasterindeling te gebruiken om elementen in een formulier te rangschikken.
Voor navigatie tussen pagina's raadpleegt u navigatiegeschiedenis en achterwaartse navigatie voor Windows-apps.
Zij-aan-zij stijl
In de stijl naast elkaar zijn het lijstvenster en detailvenster tegelijkertijd zichtbaar.
De lijst in het lijstvenster bevat een selectie-indicator om het momenteel geselecteerde item te markeren. Als u een nieuw item in de lijst selecteert, wordt het detailvenster bijgewerkt.
Een lijst/detailpatroon naast elkaar maken
Een manier om een lijst-/detailpatroon naast elkaar te maken, is door het besturingselement voor gesplitste weergave te gebruiken. Plaats de lijstweergave in het deelvenster Gesplitste weergave en de detailweergave in de inhoud van de gesplitste weergave.
Voor het lijstvenster werkt een besturingselement voor lijstweergaven goed voor het presenteren van lijsten die afbeeldingen en tekst kunnen bevatten.
Gebruik voor de detailinhoud het inhoudselement dat het meest zinvol is. Als u veel afzonderlijke velden hebt, kunt u overwegen om een rasterindeling te gebruiken om elementen in een formulier te rangschikken.
Adaptieve indeling
Als u een lijst-/detailpatroon voor elke schermgrootte wilt implementeren, maakt u een responsieve gebruikersinterface met een adaptieve indeling.
Een patroon voor adaptieve lijsten/details maken
Als u een adaptieve indeling wilt maken, definieert u verschillende VisualStates voor uw gebruikersinterface en declareert u onderbrekingspunten voor de verschillende statussen met AdaptiveTriggers.
De voorbeeldcode halen
De volgende voorbeelden implementeren het patroon lijst/details met adaptieve indelingen en demonstreren gegevensbinding voor statische, database- en onlineresources:
- Voorbeeld van master/detail
- ListView- en GridView-voorbeeld
- Klantorderdatabasevoorbeeld
- Voorbeeld van RSS-lezer
Aanbeveling
Als u een XAML-besturingselement wilt gebruiken dat dit patroon voor u implementeert, raden we u aan het Besturingselement ListDetailsView XAML te gebruiken vanuit de Windows Community Toolkit.
Verwante artikelen
Met ons samenwerken op GitHub
De bron voor deze inhoud vindt u op GitHub, waar u ook problemen en pull-aanvragen kunt maken en controleren. Bekijk onze gids voor inzenders voor meer informatie.
Windows developer