Koleksi dan daftar
Koleksi dan daftar keduanya merujuk ke representasi beberapa item data terkait yang muncul bersama-sama. Koleksi dapat diwakili dalam berbagai cara, dengan kontrol koleksi yang berbeda (juga dapat disebut sebagai tampilan koleksi). Kontrol koleksi menampilkan dan mengaktifkan interaksi dengan konten berbasis koleksi, seperti daftar kontak, daftar tanggal, kumpulan gambar, dan sebagainya.
API Penting: ItemView, kelas ListView, kelas GridView, kelas FlipView, kelas TreeView, kelas ItemsRepeater
Kontrol yang tercakup dalam artikel ini meliputi:
| Menguasai | Penggunaan utama |
|---|---|
| ItemTampilan | untuk menampilkan koleksi menggunakan sistem tata letak fleksibel |
| ListView | untuk menampilkan koleksi konten teks-berat |
| GridView | untuk menampilkan koleksi konten berat gambar |
| FlipView | untuk menampilkan koleksi konten berat gambar yang memerlukan tepat satu item untuk difokuskan pada satu waktu |
| Treeview | untuk menampilkan koleksi konten teks-berat dalam hierarki tertentu |
| ItemRepeater | sebagai blok penyusun yang dapat disesuaikan untuk membuat kontrol koleksi kustom |
Panduan desain, fitur, dan contoh diberikan di bawah ini untuk setiap kontrol.
Masing-masing kontrol ini (dengan pengecualian ItemsRepeater) menyediakan gaya dan interaksi bawaan. Namun, untuk lebih menyesuaikan tampilan visual tampilan koleksi Anda dan item di dalamnya, DataTemplate digunakan. Informasi terperinci tentang templat data dan menyesuaikan tampilan tampilan koleksi dapat ditemukan di halaman Kontainer item dan templat .
Masing-masing kontrol ini (dengan pengecualian ItemsRepeater) juga memiliki perilaku bawaan untuk memungkinkan pemilihan item tunggal atau beberapa. Lihat Gambaran umum mode pilihan untuk mempelajari selengkapnya.
Salah satu skenario yang tidak tercakup dalam artikel ini adalah menampilkan koleksi dalam tabel atau di beberapa kolom. Jika Anda ingin menampilkan koleksi dalam format ini, pertimbangkan untuk menggunakan kontrol DataGrid dari Windows Community Toolkit.
Contoh
| Galeri WinUI 2 | |
|---|---|
 |
Jika Anda menginstal aplikasi Galeri WinUI 2, lihat tindakan ListView, GridView, FlipView, TreeView, dan ItemsRepeater . |
Tampilan item
Anda dapat menggunakan tampilan item untuk menampilkan item data teks atau berat gambar dalam berbagai tata letak fleksibel yang dapat ditukar pada run-time.
Apakah ini kontrol yang tepat?
Gunakan tampilan item untuk:
- Tampilkan koleksi yang terutama terdiri dari item berbasis teks, di mana semua item harus memiliki perilaku visual dan interaksi yang sama.
- Tampilkan kumpulan konten di mana titik fokus setiap item adalah gambar, dan setiap item harus memiliki perilaku visual dan interaksi yang sama.
- Tampilkan pustaka isi.
- Mengakomodasi berbagai kasus penggunaan, termasuk kasus umum berikut:
- Buat daftar kontak.
- Antarmuka pengguna jenis etalase (yaitu aplikasi penjelajahan, lagu, produk)
- Pustaka foto interaktif
Contoh
Berikut adalah tampilan item yang memperlihatkan kumpulan foto dalam tata letak kisi seragam.
Ini adalah koleksi yang sama yang ditampilkan dalam tata letak tumpukan. Fokus di sini adalah pada teks daripada pada foto.
Artikel terkait
| Topik | Deskripsi |
|---|---|
| Tampilan item | Pelajari hal-hal penting dalam menggunakan tampilan item di aplikasi Anda. |
| Kontainer dan templat item | Item yang Anda tampilkan dalam daftar atau kisi dapat memainkan peran utama dalam tampilan keseluruhan aplikasi Anda. Buat aplikasi Anda terlihat hebat dengan menyesuaikan tampilan item koleksi Anda melalui memodifikasi templat kontrol dan templat data. |
Tampilan daftar
Tampilan daftar mewakili item teks-berat, biasanya dalam tata letak satu kolom yang ditumpuk secara vertikal. Mereka memungkinkan Anda mengategorikan item dan menetapkan header grup, menyeret dan meletakkan item, mengumpulkan konten, dan menyusun ulang item.
Apakah ini kontrol yang tepat?
Gunakan tampilan daftar untuk:
- Tampilkan koleksi yang terutama terdiri dari item berbasis teks, di mana semua item harus memiliki perilaku visual dan interaksi yang sama.
- Mewakili kumpulan konten tunggal atau yang dikategorikan.
- Mengakomodasi berbagai kasus penggunaan, termasuk kasus umum berikut:
- Buat daftar pesan atau log pesan.
- Buat daftar kontak.
- Buat panel daftar dalam pola daftar/detail. Pola daftar/detail sering digunakan dalam aplikasi email, di mana satu panel memiliki daftar item yang dapat dipilih sementara panel lain (detail) memiliki tampilan terperinci dari item yang dipilih.
Catatan
Jika Anda perlu menangani peristiwa penunjuk untuk UIElement dalam tampilan yang dapat digulir (seperti ScrollViewer atau ListView), Anda harus secara eksplisit menonaktifkan dukungan untuk peristiwa manipulasi pada elemen dalam tampilan dengan memanggil UIElement.CancelDirectmanipulation. Untuk mengaktifkan kembali peristiwa manipulasi dalam tampilan, panggil UIElement.TryStartDirectManipulation.
Contoh
Berikut adalah tampilan daftar sederhana yang memperlihatkan daftar kontak, dan mengelompokkan item data menurut abjad. Header grup (setiap huruf alfabet dalam contoh ini) juga dapat disesuaikan agar tetap "lengket", seperti di dalamnya akan selalu muncul di bagian atas ListView saat menggulir.
Ini adalah ListView yang telah dibalik untuk menampilkan log pesan, dengan pesan terbaru muncul di bagian bawah. Dengan ListView terbalik, item muncul di bagian bawah layar dengan animasi bawaan.
Artikel terkait
| Topik | Deskripsi |
|---|---|
| Tampilan daftar dan tampilan kisi | Pelajari hal-hal penting dalam menggunakan tampilan daftar atau tampilan kisi di aplikasi Anda. |
| Kontainer dan templat item | Item yang Anda tampilkan dalam tampilan daftar atau kisi dapat memainkan peran utama dalam tampilan keseluruhan aplikasi Anda. Buat aplikasi Anda terlihat hebat dengan menyesuaikan tampilan item koleksi Anda melalui memodifikasi templat kontrol dan templat data. |
| Templat item untuk tampilan daftar | Gunakan contoh templat item ini untuk ListView untuk mendapatkan tampilan jenis aplikasi umum. |
| Daftar terbalik | Daftar terbalik memiliki item baru yang ditambahkan di bagian bawah, seperti di aplikasi obrolan. Ikuti panduan artikel ini untuk menggunakan daftar terbalik di aplikasi Anda. |
| Pull-to-refresh | Mekanisme pull-to-refresh memungkinkan pengguna menarik ke bawah pada daftar data menggunakan sentuhan untuk mengambil lebih banyak data. Gunakan artikel ini untuk menerapkan pull-to-refresh dalam tampilan daftar Anda. |
| UI berlapis | UI berlapis adalah antarmuka pengguna (UI) yang mengekspos kontrol yang dapat ditindaklanjuti yang diapit di dalam kontainer tempat pengguna juga dapat mengambil tindakan. Misalnya, Anda mungkin memiliki item tampilan daftar yang berisi tombol, dan pengguna dapat memilih item daftar, atau menekan tombol yang ditumpuk di dalamnya. Ikuti praktik terbaik ini untuk memberikan pengalaman UI berlapis terbaik bagi pengguna Anda. |
Tampilan kisi
Tampilan kisi cocok untuk mengatur dan menelusuri koleksi konten berbasis gambar. Tata letak tampilan kisi menggulir secara vertikal dan menggeser secara horizontal. Item berada dalam tata letak yang dibungkus, seperti yang muncul di urutan baca kiri-ke-kanan, lalu atas-ke-bawah.
Apakah ini kontrol yang tepat?
Gunakan tampilan kisi untuk:
- Tampilkan kumpulan konten di mana titik fokus setiap item adalah gambar, dan setiap item harus memiliki perilaku visual dan interaksi yang sama.
- Tampilkan pustaka isi.
- Format dua tampilan konten yang terkait dengan zoom semantik.
- Mengakomodasi berbagai kasus penggunaan, termasuk kasus umum berikut:
- Antarmuka pengguna jenis etalase (yaitu aplikasi penjelajahan, lagu, produk)
- Pustaka foto interaktif
Catatan
Jika Anda perlu menangani peristiwa penunjuk untuk UIElement dalam tampilan yang dapat digulir (seperti ScrollViewer atau ListView), Anda harus secara eksplisit menonaktifkan dukungan untuk peristiwa manipulasi pada elemen dalam tampilan dengan memanggil UIElement.CancelDirectmanipulation(). Untuk mengaktifkan kembali peristiwa manipulasi dalam tampilan, panggil UIElement.TryStartDirectManipulation().
Contoh
Contoh ini menunjukkan tata letak tampilan kisi umum, dalam hal ini untuk menelusuri aplikasi. Metadata untuk item tampilan kisi biasanya dibatasi untuk beberapa baris teks dan peringkat item.
Tampilan kisi adalah solusi ideal untuk pustaka konten, yang sering digunakan untuk menyajikan media seperti gambar dan video. Di pustaka konten, pengguna berharap dapat mengetuk item untuk memanggil tindakan.
Artikel terkait
| Topik | Deskripsi |
|---|---|
| Tampilan daftar dan tampilan kisi | Pelajari hal-hal penting dalam menggunakan tampilan daftar atau tampilan kisi di aplikasi Anda. |
| Kontainer dan templat item | Item yang Anda tampilkan dalam tampilan daftar atau kisi dapat memainkan peran utama dalam tampilan keseluruhan aplikasi Anda. Buat aplikasi Anda terlihat hebat dengan menyesuaikan tampilan item koleksi Anda melalui memodifikasi templat kontrol dan templat data. |
| Templat item untuk tampilan kisi | Gunakan contoh templat item ini untuk ListView untuk mendapatkan tampilan jenis aplikasi umum. |
| UI berlapis | UI berlapis adalah antarmuka pengguna (UI) yang mengekspos kontrol yang dapat ditindaklanjuti yang diapit di dalam kontainer tempat pengguna juga dapat mengambil tindakan. Misalnya, Anda mungkin memiliki item tampilan daftar yang berisi tombol, dan pengguna dapat memilih item daftar, atau menekan tombol yang ditumpuk di dalamnya. Ikuti praktik terbaik ini untuk memberikan pengalaman UI berlapis terbaik bagi pengguna Anda. |
Balikkan tampilan
Tampilan balik cocok untuk menelusuri koleksi konten berbasis gambar, khususnya di mana pengalaman yang diinginkan hanya untuk satu gambar yang akan terlihat pada satu waktu. Tampilan balik memungkinkan pengguna untuk memindahkan atau "membalik" melalui item koleksi (baik secara vertikal atau horizontal), meminta setiap item muncul satu per satu setelah interaksi pengguna.
Apakah ini kontrol yang tepat?
Gunakan tampilan balik untuk:
- Tampilkan koleksi kecil hingga sedang (kurang dari 25 item), di mana koleksi terdiri dari gambar dengan sedikit atau tanpa metadata.
- Tampilkan item satu per satu, dan izinkan pengguna akhir untuk membalik item dengan kecepatan mereka sendiri.
- Mengakomodasi berbagai kasus penggunaan, termasuk kasus umum berikut:
- Galeri foto
- Galeri atau showcases produk
Contoh
Dua contoh berikut menunjukkan FlipView yang masing-masing membalik secara horizontal dan vertikal.
Artikel terkait
| Topik | Deskripsi |
|---|---|
| Balikkan tampilan | Pelajari hal-hal penting dalam menggunakan tampilan balik di aplikasi Anda, bersama dengan cara menyesuaikan tampilan item Anda dalam tampilan balik. |
Pemandangan pohon
Tampilan pohon cocok untuk menampilkan koleksi berbasis teks yang memiliki hierarki penting yang perlu dipamerkan. Item tampilan pohon dapat diciutkan/dapat diperluas, ditampilkan dalam hierarki visual, dapat disembunyikan dengan ikon, dan dapat diseret dan dijatuhkan di antara tampilan pohon. Tampilan pohon memungkinkan bersarang tingkat N.
Apakah ini kontrol yang tepat?
Gunakan tampilan pohon untuk:
- Menampilkan kumpulan item berlapis yang konteks dan maknanya bergantung pada hierarki atau rantai organisasi tertentu.
- Mengakomodasi berbagai kasus penggunaan, termasuk kasus umum berikut:
- Browser untuk file
- Bagan organisasi perusahaan
Contoh
Berikut adalah contoh tampilan pohon yang mewakili file explorer, dan menampilkan banyak item berlapis berbeda yang dilengkapi oleh ikon.
Artikel terkait
| Topik | Deskripsi |
|---|---|
| Tampilan pohon | Pelajari hal-hal penting dalam menggunakan tampilan pohon di aplikasi Anda, bersama dengan cara menyesuaikan perilaku tampilan dan interaksi item Anda dalam tampilan pohon. |
ItemRepeater
ItemsRepeater berbeda dari kontrol koleksi lainnya yang ditunjukkan di halaman ini karena tidak menyediakan gaya atau interaksi apa pun di luar kotak, yaitu ketika hanya ditempatkan pada halaman tanpa menentukan properti apa pun. ItemsRepeater adalah blok penyusun yang dapat Anda gunakan sebagai pengembang untuk membuat kontrol koleksi kustom Anda sendiri, khususnya yang tidak dapat dicapai dengan menggunakan kontrol lain dalam artikel ini. ItemsRepeater adalah panel berbasis data dan performa tinggi yang dapat disesuaikan agar sesuai dengan kebutuhan Anda.
Tip
Kontrol ItemsView dibangun di atas ItemsRepeater dan memberikan banyak manfaat ItemsRepeater tanpa perlu membuat kontrol koleksi kustom Anda sendiri.
Apakah ini kontrol yang tepat?
Gunakan ItemsRepeater jika:
- Anda memiliki antarmuka pengguna dan pengalaman pengguna tertentu yang tidak dapat dibuat menggunakan kontrol koleksi yang ada.
- Anda memiliki sumber data yang sudah ada untuk item Anda (seperti data yang ditarik dari internet, database, atau koleksi yang sudah ada sebelumnya di kode-belakang Anda).
Contoh
Tiga contoh berikut adalah semua kontrol ItemsRepeater yang terikat ke sumber data yang sama (kumpulan angka). Kumpulan angka diwakili dalam tiga cara, dengan masing-masing ItemsRepeaters di bawah ini menggunakan Tata Letak kustom yang berbeda dan ItemTemplate kustom yang berbeda.
Artikel terkait
| Topik | Deskripsi |
|---|---|
| ItemRepeater | Pelajari hal-hal penting dalam menggunakan ItemsRepeater di aplikasi Anda, bersama dengan cara mengimplementasikan semua komponen interaksi dan visual yang diperlukan untuk tampilan koleksi Anda. |
Daftar periksa globalisasi dan pelokalan
- Pembungkusan: Izinkan dua baris untuk label daftar.
- Ekspansi horizontal: Pastikan bidang dapat mengakomodasi ekspansi teks dan dapat digulir.
- Penspasian vertikal: Gunakan karakter non-Latin untuk penspasian vertikal untuk memastikan skrip non-Latin akan ditampilkan dengan benar.
Mendapatkan kode sampel
- Sampel Galeri WinUI - Lihat semua kontrol XAML dalam format interaktif.
Artikel terkait
Panduan Desain dan UX
Referensi API
Windows developer
Saran dan Komentar
Segera hadir: Sepanjang tahun 2024 kami akan menghentikan penggunaan GitHub Issues sebagai mekanisme umpan balik untuk konten dan menggantinya dengan sistem umpan balik baru. Untuk mengetahui informasi selengkapnya, lihat: https://aka.ms/ContentUserFeedback.
Kirim dan lihat umpan balik untuk