Pola daftar/detail

  • Artikel

Pola daftar/detail memiliki panel daftar (biasanya dengan tampilan daftar) dan panel detail untuk konten. Saat item dalam daftar dipilih, panel detail diperbarui. Pola ini sering digunakan untuk email dan buku alamat.

API penting: kelas ListView, kelas SplitView

Contoh pola detail daftar

Tip

Jika Anda ingin menggunakan kontrol XAML yang mengimplementasikan pola ini untuk Anda, kami merekomendasikan Kontrol XAML ListDetailsView dari Toolkit Komunitas Windows.

Apakah ini pola yang tepat?

Pola daftar/detail berfungsi dengan baik jika Anda ingin:

  • Buat aplikasi email, buku alamat, atau aplikasi apa pun yang didasarkan pada tata letak detail daftar.
  • Temukan dan prioritaskan kumpulan konten yang besar.
  • Izinkan penambahan cepat dan penghapusan item dari daftar saat bekerja bolak-balik antar konteks.

Pilih gaya yang tepat

Saat menerapkan pola daftar/detail, kami sarankan Anda menggunakan gaya bertumpuk atau gaya berdampingan, berdasarkan jumlah ruang layar yang tersedia.

Lebar jendela yang tersedia Gaya yang direkomendasikan
320 epx-640 epx Ditumpuk
641 epx atau lebih lebar Berdampingan

Gaya bertumpuk

Dalam gaya bertumpuk, hanya satu panel yang terlihat pada satu waktu: daftar atau detailnya.

Detail daftar dalam mode bertumpuk

Pengguna mulai di panel daftar dan "telusuri paling detail" ke panel detail dengan memilih item dalam daftar. Bagi pengguna, tampilan tersebut muncul seolah-olah tampilan daftar dan detail ada di dua halaman terpisah.

Membuat pola daftar/detail bertumpuk

Salah satu cara untuk membuat pola daftar/detail bertumpuk adalah dengan menggunakan halaman terpisah untuk panel daftar dan panel detail. Tempatkan tampilan daftar pada satu halaman, dan panel detail di halaman terpisah.

Bagian untuk detail daftar gaya bertumpuk

Untuk halaman tampilan daftar, kontrol tampilan daftar berfungsi dengan baik untuk menyajikan daftar yang bisa berisi gambar dan teks.

Untuk halaman tampilan detail, gunakan elemen konten yang paling masuk akal. Jika Anda memiliki banyak bidang terpisah, pertimbangkan untuk menggunakan tata letak Kisi untuk menyusun elemen ke dalam formulir.

Untuk navigasi antar halaman, lihat riwayat navigasi dan navigasi mundur untuk aplikasi Windows.

Gaya berdampingan

Dalam gaya berdampingan, panel daftar dan panel detail terlihat secara bersamaan.

Pola daftar/detail

Daftar di panel daftar memiliki visual pilihan untuk menunjukkan item yang saat ini dipilih. Memilih item baru dalam daftar memperbarui panel detail.

Membuat pola daftar/detail berdampingan

Salah satu cara untuk membuat pola daftar/detail berdampingan adalah dengan menggunakan kontrol tampilan terpisah . Tempatkan tampilan daftar di panel tampilan terpisah, dan tampilan detail dalam konten tampilan terpisah.

daftar detail bagian tampilan terpisah

Untuk panel daftar, kontrol tampilan daftar berfungsi dengan baik untuk menyajikan daftar yang bisa berisi gambar dan teks.

Untuk konten detail, gunakan elemen konten yang paling masuk akal. Jika Anda memiliki banyak bidang terpisah, pertimbangkan untuk menggunakan tata letak Kisi untuk menyusun elemen ke dalam formulir.

Tata letak adaptif

Untuk menerapkan pola daftar/detail untuk ukuran layar apa pun, buat UI responsif dengan tata letak adaptif.

tata letak detail daftar adaptif

Membuat pola daftar/detail adaptif

Untuk membuat tata letak adaptif, tentukan VisualStates yang berbeda untuk UI Anda, dan nyatakan titik henti untuk berbagai status dengan AdaptiveTriggers.

Dapatkan kode sampel

Sampel berikut mengimplementasikan pola daftar/detail dengan tata letak adaptif dan menunjukkan pengikatan data ke sumber daya statis, database, dan online:

Tip

Jika Anda ingin menggunakan kontrol XAML yang mengimplementasikan pola ini untuk Anda, kami merekomendasikan Kontrol XAML ListDetailsView dari Toolkit Komunitas Windows.