Listas invertidas

Você pode usar uma exibição de lista para apresentar uma conversa em uma experiência de chat com itens visualmente distintos para representar o remetente/receptor. Usar cores diferentes e alinhamento horizontal para separar mensagens do remetente/receptor 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 modo 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 chegada mais recente. No entanto, se um usuário tiver rolado para cima para exibir as respostas anteriores, a chegada de uma nova mensagem não deverá causar uma mudança visual que interromperia o 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.

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

XAML

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

Recommendations

• Alinhe mensagens do remetente/receptor em lados opostos para tornar o fluxo de conversa claro para os usuários.
• Mova as mensagens existentes para fora do caminho 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

• Lista de Exemplo de baixo para cima em XAML