Listas invertidas

Você pode usar um modo de exibição de lista para apresentar uma conversa em uma experiência de chat com itens visualmente distintos para representar o remetente/destinatário. O uso de cores diferentes e alinhamento horizontal para separar as mensagens do remetente/destinatário ajuda o usuário a se orientar rapidamente em uma conversa.

APIs importantes: classe ListView, classe ItemsStackPanel, propriedade ItemsUpdatingScrollMode

Normalmente, você precisará apresentar a lista de forma que ela pareça crescer de baixo para cima, em vez de de cima para baixo. Quando uma nova mensagem chega e é adicionada ao final, as mensagens anteriores deslizam para cima para abrir espaço chamando a atenção do usuário para a última chegada. No entanto, se um usuário rolou para cima para ver as respostas anteriores, a chegada de uma nova mensagem não deve causar uma mudança visual que interrompa seu foco.

Criar uma lista invertida

Para criar uma lista invertida, use uma exibição de lista com um ItemsStackPanel como seu painel de itens. No ItemsStackPanel, defina o ItemsUpdatingScrollMode como KeepLastItemInView.

Importante

O valor de enumeração KeepLastItemInView está disponível a partir do Windows 10, versão 1607. Você não pode usar esse valor quando seu aplicativo é executado em versões anteriores do Windows 10.

Este exemplo mostra como alinhar os itens do modo de exibição de lista à parte inferior e indicar que, quando houver uma alteração nos itens, o último item deve permanecer no modo de exibição.

XAML

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

Recomendações

• Alinhe as mensagens do remetente/destinatário em lados opostos para tornar o fluxo da conversa claro para os usuários.
• Anime as mensagens existentes para exibir a mensagem mais recente se o usuário já estiver no final da conversa aguardando a próxima mensagem.
• Não interrompa o foco dos usuários movendo itens se eles não estiverem lendo o final da conversa.

Obter o código de exemplo

• Exemplo de lista de baixo para cima XAML