Odwrócone listy

Możesz użyć widoku listy, aby przedstawić konwersację w środowisku czatu z elementami, które są wizualnie odrębne w celu reprezentowania nadawcy/odbiorcy. Używanie różnych kolorów i wyrównania w poziomie w celu oddzielenia komunikatów od nadawcy/odbiorcy pomaga użytkownikowi szybko orientować się w konwersacji.

Ważne interfejsy API: klasa ListView, klasa ItemsStackPanel, właściwość ItemsUpdatingScrollMode

Zazwyczaj trzeba będzie przedstawić listę, tak aby wyglądała na wzrost od dołu do góry zamiast od góry do dołu. Gdy pojawi się nowa wiadomość i zostanie dodana na końcu, poprzednie wiadomości przesuną się w górę, aby zwrócić uwagę użytkownika na najnowszą wiadomość. Jeśli jednak użytkownik przewinął w górę, aby wyświetlić poprzednie odpowiedzi, przybycie nowej wiadomości nie może spowodować zmiany wizualnej, która zakłóciłaby fokus.

Tworzenie odwróconej listy

Aby utworzyć odwróconą listę, użyj widoku listy z panelem ItemsStackPanel jako panel elementów. W okienku ItemsStackPanel ustaw wartość ItemsUpdatingScrollMode na KeepLastItemInView.

W tym przykładzie pokazano, jak wyrównać elementy widoku listy do dołu i wskazać, że w przypadku zmiany elementów ostatni element powinien pozostać w widoku.

XAML

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

Rekomendacje

• Ustaw wiadomości od nadawcy i odbiorcy po przeciwnych stronach, aby przepływ konwersacji był przejrzysty dla użytkowników.
• Animowanie istniejących wiadomości i usuwanie ich z widoku, aby wyświetlić najnowszą wiadomość, jeśli użytkownik jest już na końcu konwersacji i oczekuje na następną wiadomość.
• Nie zakłócaj koncentracji uwagi użytkowników, przenosząc elementy, jeśli nie czytają końca konwersacji.

Pobieranie przykładowego kodu

• Przykład listy od dołu w XAML