Freigeben über

Invertierte Listen

  • Artikel

Sie können eine Listenansicht verwenden, um eine Unterhaltung in einer Chaterfahrung mit Elementen darzustellen, die visuell voneinander getrennt sind, um den Absender/Empfänger darzustellen. Die Verwendung unterschiedlicher Farben und horizontaler Ausrichtung zum Trennen von Nachrichten vom Absender/Empfänger hilft dem Benutzer, sich schnell in einer Unterhaltung zu orientieren.

Wichtige APIs: ListView-Klasse, ItemsStackPanel-Klasse, ItemsUpdatingScrollMode-Eigenschaft

Normalerweise müssen Sie die Liste so präsentieren, dass sie von unten nach oben und nicht von oben nach unten wächst. Wenn eine neue Nachricht eingeht und am Ende hinzugefügt wird, gleiten die vorherigen Nachrichten nach oben, um Platz zu schaffen, der die Aufmerksamkeit des Benutzers auf die neueste Ankunft zieht. Wenn ein Benutzer jedoch einen Bildlauf nach oben gescrollt hat, um vorherige Antworten anzuzeigen, darf die Ankunft einer neuen Nachricht keine visuelle Schicht verursachen, die den Fokus stören würde.

Chat-App mit invertierter Liste

Erstellen einer invertierten Liste

Verwenden Sie zum Erstellen einer invertierten Liste eine Listenansicht mit einem ItemsStackPanel als Elementpanel. Legen Sie bei ItemsStackPanel die ItemsUpdatingScrollMode-Eigenschaft auf KeepLastItemInView fest.

Wichtig

Der Enumerationswert "KeepLastItemInView " ist ab Windows 10, Version 1607, verfügbar. Sie können diesen Wert nicht verwenden, wenn Ihre App in früheren Versionen von Windows 10 ausgeführt wird.

In diesem Beispiel wird gezeigt, wie sie die Elemente der Listenansicht unten ausrichten und angeben, dass bei einer Änderung an den Elementen das letzte Element in der Ansicht verbleiben soll.

XAML

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

Empfehlungen

  • Richten Sie Nachrichten vom Absender/Empfänger auf gegenüberliegenden Seiten aus, um den Unterhaltungsfluss für Benutzer klar zu machen.
  • Animieren Sie die vorhandenen Nachrichten weg, um die neueste Nachricht anzuzeigen, wenn sich der Benutzer bereits am Ende der Unterhaltung befindet, auf die die nächste Nachricht wartet.
  • Unterbrechen Sie den Fokus der Benutzer nicht, indem Sie Elemente verschieben, wenn sie das Ende der Unterhaltung nicht lesen.

Beispielcode herunterladen