Ters listeler

Göndereni/alıcıyı temsil etmek için görsel olarak ayrı öğelerle sohbet deneyiminde konuşma sunmak için liste görünümünü kullanabilirsiniz. İletileri gönderenden/alıcıdan ayırmak için farklı renkler ve yatay hizalama kullanmak, kullanıcının kendisini bir konuşmaya hızla yönlendirmesine yardımcı olur.

Önemli API'ler: ListView sınıfı, ItemsStackPanel sınıfı, ItemsUpdatingScrollMode özelliği

Listeyi genellikle yukarıdan aşağıya değil, aşağıdan yukarıya doğru büyüyecek şekilde sunmanız gerekir. Yeni bir ileti geldiğinde ve sonuna eklendiğinde, önceki iletiler kullanıcının dikkatini en son gelene çekerek yer açmak için yukarı kaydırılır. Ancak, bir kullanıcı önceki yanıtları görüntülemek için yukarı kaydırdıysa, yeni bir iletinin gelmesi, odağı kesintiye uğratacak bir görsel kaydırmaya neden olmamalıdır.

Ters liste oluşturma

Ters liste oluşturmak için, öğeler paneli olarak ItemsStackPanel içeren bir liste görünümü kullanın. ItemsStackPanel'de ItemsUpdatingScrollMode değerini KeepLastItemInView olarak ayarlayın.

Önemli

KeepLastItemInView sabit listesi değeri Windows 10, sürüm 1607'den itibaren kullanılabilir. Uygulamanız Windows 10'un önceki sürümlerinde çalıştırıldığında bu değeri kullanamazsınız.

Bu örnek, liste görünümünün öğelerini en alta hizalamayı ve öğelerde değişiklik olduğunda son öğenin görünümde kalması gerektiğini belirtmeyi gösterir.

XAML

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

Recommendations

• Konuşma akışını kullanıcılara açık hale getirmek için gönderenden/alıcıdan gelen iletileri karşı taraflara hizalayın.
• Kullanıcı zaten konuşmanın sonunda bir sonraki iletiyi bekliyorsa, mevcut iletilere en son iletiyi görüntüleme yolu dışında animasyon ekleyin.
• Konuşmanın sonunu okumuyorlarsa, öğeleri hareket ettirerek kullanıcıların odaklanmasını kesintiye uğratmayın.

Örnek kodunu alma

• XAML Aşağıdan yukarı liste örneği