Partager via

Listes inversées

  • Article

Vous pouvez utiliser un affichage de liste pour présenter une conversation dans une expérience de conversation avec des éléments visuellement distincts pour représenter l’expéditeur/destinataire. L’utilisation de différentes couleurs et de l’alignement horizontal pour séparer les messages de l’expéditeur/récepteur permet à l’utilisateur de s’orienter rapidement dans une conversation.

API importantes : classe ListView, classe ItemsStackPanel, propriété ItemsUpdatingScrollMode

Vous devrez généralement présenter la liste de sorte qu’elle semble croître du bas vers le haut au lieu du haut vers le bas. Lorsqu’un nouveau message arrive et est ajouté à la fin, les messages précédents glissent vers le haut pour faire en sorte que la salle dessine l’attention de l’utilisateur sur la dernière arrivée. Toutefois, si un utilisateur a fait défiler jusqu’à afficher les réponses précédentes, l’arrivée d’un nouveau message ne doit pas provoquer un décalage visuel qui perturberait son focus.

Application de conversation avec liste inversée

Créer une liste inversée

Pour créer une liste inversée, utilisez un affichage de liste avec un ItemsStackPanel comme panneau Éléments. Sur ItemsStackPanel, définissez ItemsUpdatingScrollMode sur KeepLastItemInView.

Important

La valeur enum KeepLastItemInView est disponible à partir de Windows 10, version 1607. Vous ne pouvez pas utiliser cette valeur lorsque votre application s’exécute sur des versions antérieures de Windows 10.

Cet exemple montre comment aligner les éléments de l’affichage de liste en bas et indiquer qu’en cas de modification des éléments dont le dernier élément doit rester affiché.

XAML

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

Recommandations

  • Alignez les messages de l’expéditeur/du destinataire sur les côtés opposés pour que le flux de conversation soit clair pour les utilisateurs.
  • Animer les messages existants hors du moyen d’afficher le dernier message si l’utilisateur est déjà à la fin de la conversation en attente du message suivant.
  • N’interrompez pas le focus des utilisateurs en déplaçant des éléments s’ils ne lisent pas la fin de la conversation.

Obtenir l’exemple de code