Omgekeerde lijsten

U kunt een lijstweergave gebruiken om een gesprek te presenteren in een chatervaring met items die visueel uniek zijn om de afzender/ontvanger weer te geven. Door verschillende kleuren en horizontale uitlijning te gebruiken om berichten van de afzender/ontvanger te scheiden, kan de gebruiker zich snel in een gesprek richten.

Belangrijke API's: Klasse ListView, klasse ItemsStackPanel, eigenschap ItemsUpdatingScrollMode

Normaal gesproken moet u de lijst zodanig presenteren dat deze van beneden naar boven lijkt te groeien in plaats van van van boven naar beneden. Wanneer er een nieuw bericht binnenkomt en aan het einde wordt toegevoegd, schuiven de vorige berichten omhoog om ruimte te maken en trekt de aandacht van de gebruiker naar de nieuwste aankomst. Als een gebruiker echter omhoog schuift om eerdere antwoorden weer te geven, mag de komst van een nieuw bericht geen visuele verschuiving veroorzaken die de focus zou verstoren.

Een omgekeerde lijst maken

Als u een omgekeerde lijst wilt maken, gebruikt u een lijstweergave met een ItemsStackPanel als het deelvenster items. Stel op de ItemsStackPanel de ItemsUpdatingScrollMode in op KeepLastItemInView.

In dit voorbeeld ziet u hoe u de items van de lijstweergave onder uitlijnt en aangeeft dat wanneer er een wijziging is in de items het laatste item in de weergave moet blijven.

XAML

<ListView>
   <ListView.ItemsPanel>
       <ItemsPanelTemplate>
           <ItemsStackPanel VerticalAlignment="Bottom"
                            ItemsUpdatingScrollMode="KeepLastItemInView"/>
       </ItemsPanelTemplate>
   </ListView.ItemsPanel>
</ListView>

Aanbevelingen

• Berichten van de afzender/ontvanger aan tegenovergestelde zijden uitlijnen om de gespreksstroom duidelijk te maken voor gebruikers.
• Animeer de bestaande berichten zodat deze uit de weg zijn en het meest recente bericht kan worden weergegeven, indien de gebruiker al aan het einde van het gesprek wacht op het volgende bericht.
• Verstoort de focus van gebruikers niet door items te verplaatsen als ze het einde van het gesprek niet lezen.

De voorbeeldcode halen

• Voorbeeld van XAML Bottom-uplijst