Daftar terbalik

Anda dapat menggunakan tampilan daftar untuk menyajikan percakapan dalam pengalaman obrolan dengan item yang secara visual berbeda untuk mewakili pengirim/penerima. Menggunakan warna dan perataan horizontal yang berbeda untuk memisahkan pesan dari pengirim/penerima membantu pengguna dengan cepat mengorientasikan diri mereka dalam percakapan.

API Penting: kelas ListView, kelas ItemsStackPanel, properti ItemsUpdatingScrollMode

Anda biasanya perlu menyajikan daftar sehingga tampaknya tumbuh dari bawah ke atas alih-alih dari atas ke bawah. Ketika pesan baru tiba dan ditambahkan ke akhir, pesan sebelumnya meluncur ke atas untuk membuat ruang menarik perhatian pengguna ke kedatangan terbaru. Namun, jika pengguna telah menggulir ke atas untuk melihat balasan sebelumnya, kedatangan pesan baru tidak boleh menyebabkan pergeseran visual yang akan mengganggu fokus mereka.

Membuat daftar terbalik

Untuk membuat daftar terbalik, gunakan tampilan daftar dengan ItemsStackPanel sebagai panel itemnya. Pada ItemsStackPanel, atur ItemsUpdatingScrollMode ke KeepLastItemInView.

Contoh ini memperlihatkan cara meratakan item tampilan daftar ke bagian bawah dan menunjukkan bahwa ketika ada perubahan pada item, item terakhir harus tetap terlihat.

XAML

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

Recommendations

• Sejajarkan pesan dari pengirim/penerima di sisi yang berlawanan untuk membuat alur percakapan menjadi jelas bagi pengguna.
• Animasikan pesan yang ada agar tidak menghalangi untuk menampilkan pesan terbaru jika pengguna sudah berada di akhir percakapan dan sedang menunggu pesan berikutnya.
• Jangan mengganggu fokus pengguna dengan memindahkan item jika mereka tidak membaca akhir percakapan.

Dapatkan kode contoh

Buka aplikasi Galeri WinUI 3 dan lihat ListView beraksi

Aplikasi Galeri WinUI 3 mencakup contoh interaktif kontrol dan fitur WinUI. Dapatkan aplikasi dari Microsoft Store atau telusuri kode sumber pada GitHub.