Listas invertidas

Puede usar una vista de lista para presentar una conversación en una experiencia de chat con elementos que son visualmente distintos para representar al remitente o receptor. El uso de diferentes colores y alineación horizontal para separar los mensajes del remitente o receptor ayuda al usuario a orientarse rápidamente en una conversación.

API importantes: clase ListView, clase ItemsStackPanel, propiedad ItemsUpdatingScrollMode

Normalmente, tendrá que presentar la lista para que parezca crecer desde la parte inferior hacia arriba en lugar de desde la parte superior hacia abajo. Cuando llega un nuevo mensaje y se agrega al final, los mensajes anteriores se deslizan hacia arriba para que la sala dibujo la atención del usuario a la última llegada. Sin embargo, si un usuario se ha desplazado hacia arriba para ver las respuestas anteriores, la llegada de un nuevo mensaje no debe provocar un cambio visual que interrumpiría su enfoque.

Crear una lista invertida

Para crear una lista invertida, usa una vista de lista con una clase ItemsStackPanel como panel de elementos. En la clase ItemsStackPanel, establece ItemsUpdatingScrollMode en KeepLastItemInView.

Importante

El valor de enumeración KeepLastItemInView está disponible a partir de Windows 10, versión 1607. No puedes usar este valor cuando la aplicación se ejecuta en versiones anteriores de Windows 10.

En este ejemplo se muestra cómo alinear los elementos de la vista de lista a la parte inferior e indicar que cuando hay un cambio en los elementos que el último elemento debe permanecer en la vista.

XAML

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

Recomendaciones

• Alinee los mensajes del remitente o receptor en lados opuestos para que el flujo de conversación sea claro para los usuarios.
• Anima los mensajes existentes fuera de la forma de mostrar el mensaje más reciente si el usuario ya está al final de la conversación esperando el siguiente mensaje.
• No interrumpa el foco de los usuarios moviendo elementos si no leen el final de la conversación.

Obtener el código de ejemplo

• Ejemplo de lista XAML de abajo a arriba