Listas invertidas

Pode usar uma vista de lista para apresentar uma conversa numa experiência de chat com elementos visualmente distintos para representar o remetente/destinatário. Usar cores diferentes e alinhamento horizontal para separar mensagens do remetente/destinatário ajuda o utilizador a orientar-se rapidamente numa conversa.

APIs importantes: classe ListView, classe ItemsStackPanel, propriedade ItemsUpdateScrollMode

Normalmente, terá de apresentar a lista de forma a parecer crescer de baixo para cima em vez de cima para baixo. Quando uma nova mensagem chega e é adicionada ao final, as mensagens anteriores deslizam para cima para dar espaço e chamar a atenção do utilizador para a última chegada. No entanto, se um utilizador fez scroll para ver respostas anteriores, a chegada de uma nova mensagem não deve causar uma alteração visual que perturbe o seu foco.

Criar uma lista invertida

Para criar uma lista invertida, use uma vista de lista com um ItemsStackPanel como painel de itens. No ItemsStackPanel, defina o ItemsUpdatingScrollMode para KeepLastItemInView.

Importante

O valor enum do KeepLastItemInView está disponível a partir do Windows 10, versão 1607. Não pode usar este valor quando a sua aplicação corre em versões anteriores do Windows 10.

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

XAML

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

Recommendations

• Alinhe as mensagens do remetente/recetor em lados opostos para tornar o fluxo da conversa claro para os utilizadores.
• Anime as mensagens existentes para mostrar a mensagem mais recente se o utilizador já estiver no final da conversa à espera da próxima mensagem.
• Não perturbe a concentração do utilizador ao mover itens se não estiver a ler o final da conversa.

Obter o código de exemplo

• Exemplo de lista de baixo para cima de XAML