Invertierte Listen

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 nach oben gescrollt hat, um vorherige Antworten anzuzeigen, darf die Ankunft einer neuen Nachricht keine visuelle Verschiebung verursachen, die den Fokus stören würde.

Erstellen einer invertierten Liste

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

Von Bedeutung

Der Enum-Wert "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>

Recommendations

• 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, um Platz für die neueste Nachricht zu schaffen, falls sich der Benutzer bereits am Ende der Unterhaltung befindet und auf die nächste Nachricht wartet.
• Unterbrechen Sie den Fokus der Benutzer nicht, indem Sie Elemente verschieben, wenn sie das Ende der Unterhaltung nicht lesen.

Holen Sie sich den Beispielcode

• XAML-Beispiel für bottom-up-Liste