Bagikan melalui

Ringkasan Bab 19. Tampilan koleksi

  • Artikel

Catatan

Buku ini diterbitkan pada musim semi 2016, dan belum diperbarui sejak saat itu. Ada banyak dalam buku yang tetap berharga, tetapi beberapa materi sudah kedaluarsa, dan beberapa topik tidak lagi sepenuhnya benar atau lengkap.

Xamarin.Forms menentukan tiga tampilan yang mempertahankan koleksi dan menampilkan elemennya:

  • Picker adalah daftar item string yang relatif singkat yang memungkinkan pengguna untuk memilihnya
  • ListView sering kali merupakan daftar panjang item biasanya dengan jenis dan pemformatan yang sama, juga memungkinkan pengguna untuk memilih satu
  • TableView adalah kumpulan sel (biasanya dari berbagai jenis dan tampilan) untuk menampilkan data atau mengelola input pengguna

Adalah umum bagi aplikasi MVVM untuk menggunakan ListView untuk menampilkan koleksi objek yang dapat dipilih.

Opsi program dengan Pemilih

Picker adalah pilihan yang baik ketika Anda perlu mengizinkan pengguna untuk memilih opsi dari antara daftar string item yang relatif singkat.

Pemilih dan penanganan peristiwa

Sampel PickerDemo menunjukkan cara menggunakan XAML untuk mengaturTitlePickerproperti dan menambahkan string item ke Items koleksi. Saat pengguna memilih Picker, pengguna menampilkan item dalam Items koleksi dengan cara yang bergantung pada platform.

Peristiwa menunjukkan SelectedIndexChanged kapan pengguna telah memilih item. Properti berbasis SelectedIndex nol kemudian menunjukkan item yang dipilih. Jika tidak ada item yang dipilih, SelectedIndex sama dengan –1.

Anda juga dapat menggunakan SelectedIndex untuk menginisialisasi item yang dipilih, tetapi harus diatur setelah Items koleksi diisi. Di XAML, ini berarti Anda mungkin akan menggunakan elemen properti untuk mengatur SelectedIndex.

Data yang mengikat Pemilih

Properti SelectedIndex didukung oleh properti yang dapat diikat tetapi Items tidak, jadi menggunakan pengikatan data dengan Picker sulit. Salah satu solusinya adalah menggunakan Picker dalam kombinasi dengan ObjectToIndexConverter yang ada di Xamarin.Formspustaka Book.Toolkit. PickerBinding menunjukkan cara kerjanya.

Catatan

Sekarang Xamarin.FormsPicker termasuk ItemsSource properti dan SelectedItem yang mendukung pengikatan data. Lihat Pemilih.

Merender data dengan ListView

adalah ListView satu-satunya kelas yang berasal dari ItemsView<TVisual> mana ia mewarisi ItemsSource properti dan ItemTemplate .

ItemsSource berjenis IEnumerable tetapi null secara default dan harus diinisialisasi secara eksplisit atau (lebih umum) diatur ke koleksi melalui pengikatan data. Item dalam koleksi ini bisa dari jenis apa pun.

ListViewSelectedItem menentukan properti yang diatur ke salah satu item dalam ItemsSource koleksi atau null jika tidak ada item yang dipilih. ListViewItemSelected mengaktifkan peristiwa saat item baru dipilih.

Koleksi dan pilihan

Sampel ListViewList mengisi ListView dengan 17 Color nilai dalam koleksi List<Color> . Item dapat dipilih tetapi secara default ditampilkan dengan representasi yang tidak ToString menarik. Beberapa contoh dalam bab ini menunjukkan cara memperbaiki tampilan tersebut dan membuatnya sesering yang diinginkan.

Pemisah baris

Di tampilan iOS dan Android, garis tipis memisahkan baris. Anda dapat mengontrol ini dengan SeparatorVisibility properti dan SeparatorColor . SeparatorVisibility properti berjenis SeparatorVisibility, enumerasi dengan dua anggota:

Data yang mengikat item terpilih

Properti SelectedItem didukung oleh properti yang dapat diikat, sehingga dapat menjadi sumber atau target pengikatan data. Defaultnya BindingMode adalah OneWayToSource, tetapi umumnya adalah target pengikatan data dua arah, terutama dalam skenario MVVM. Sampel ListViewArray menunjukkan jenis pengikatan ini.

Perbedaan ObservableCollection

Sampel ListViewLogger mengatur ItemsSource properti dari ke ListViewList<DateTime> koleksi dan kemudian secara progresif menambahkan objek baru DateTime ke koleksi setiap detik menggunakan timer.

Namun, ListView tidak secara otomatis memperbarui dirinya sendiri karena List<T> koleksi tidak memiliki mekanisme pemberitahuan untuk menunjukkan kapan item ditambahkan atau dihapus dari koleksi.

Kelas yang jauh lebih baik untuk digunakan dalam skenario ObservableCollection<T> tersebut System.Collections.ObjectModel didefinisikan dalam namespace layanan. Kelas ini mengimplementasikan INotifyCollectionChanged antarmuka dan akibatnya mengaktifkan CollectionChanged peristiwa ketika item ditambahkan ke atau dihapus dari koleksi, atau ketika diganti atau dipindahkan dalam koleksi. ListView Ketika secara internal mendeteksi bahwa penerapan INotifyCollectionChanged kelas telah diatur ke propertinyaItemsSource, kelas melampirkan handler ke CollectionChanged peristiwa dan memperbarui tampilannya saat koleksi berubah.

Sampel ObservableLogger menunjukkan penggunaan ObservableCollection.

Templat dan sel

Secara default, menampilkan ListView item dalam koleksinya menggunakan metode setiap item ToString . Pendekatan yang lebih baik melibatkan menentukan templat untuk menampilkan item.

Untuk bereksperimen dengan fitur ini, Anda dapat menggunakan NamedColor kelas di Xamarin.Formspustaka Book.Toolkit. Kelas ini mendefinisikan properti statis All jenis IList<NamedColor> yang berisi 141 NamedColor objek yang sesuai dengan bidang Color publik struktur.

Sampel NaiveNamedColorList mengatur ItemsSource properti ListView ini, NamedColor.All tetapi hanya nama NamedColor kelas objek yang sepenuhnya memenuhi syarat yang ditampilkan.

ListView membutuhkan templat untuk menampilkan item ini. Dalam kode, Anda dapat mengatur properti yang ItemTemplate ditentukan oleh ItemsView<TVisual> ke objek menggunakanDataTemplatekonstruktor yang mereferensikan turunan kelasCell.DataTemplate Cell memiliki lima turunan:

  • TextCell — berisi dua Label tampilan (secara konseptual)
  • ImageCell — menambahkan Image tampilan ke TextCell
  • EntryCell — berisi Entry tampilan dengan Label
  • SwitchCell — berisi Switch dengan Label
  • ViewCell — dapat berupa apa pun View (kemungkinan dengan anak-anak)

Kemudian panggil SetValue dan SetBinding pada DataTemplate objek untuk mengaitkan nilai dengan Cell properti, atau untuk mengatur pengikatan data pada Cell properti yang mereferensikan properti item dalam ItemsSource koleksi. Ini ditunjukkan dalam sampel TextCellListCode.

Karena setiap item ditampilkan oleh ListView, pohon visual kecil dibangun dari templat, dan pengikatan data dibuat antara item dan properti elemen di pohon visual ini. Anda bisa mendapatkan gambaran tentang proses ini dengan menginstal handler untuk ItemAppearing peristiwa ListViewdan ItemDisappearing , atau dengan menggunakan konstruktor alternatifDataTemplateyang menggunakan fungsi yang disebut setiap kali pohon visual item harus dibuat.

TextCellListXaml menunjukkan program yang identik secara fungsional sepenuhnya di XAML. Tag DataTemplate diatur ke ItemTemplate properti ListView, dan kemudian TextCell diatur ke DataTemplate. Pengikatan ke properti item dalam koleksi diatur langsung pada Text properti dan Detail dari TextCell.

Sel kustom

Di XAML dimungkinkan ViewCell untuk mengatur ke DataTemplate dan kemudian menentukan pohon visual kustom sebagai View properti .ViewCell (View adalah properti ViewCell konten sehingga ViewCell.View tag tidak diperlukan.) Sampel CustomNamedColorList menunjukkan teknik ini:

Cuplikan layar tiga kali dari Daftar Warna Bernama Kustom

Mendapatkan ukuran yang tepat untuk semua platform bisa sulit. Properti RowHeight ini berguna tetapi dalam beberapa kasus Anda ingin menggunakan HasUnevenRows properti , yang kurang efisien tetapi memaksa ListView untuk mengukur baris. Untuk iOS dan Android, Anda harus menggunakan salah satu dari dua properti ini untuk mendapatkan ukuran baris yang tepat.

Mengelompokkan item ListView

ListView mendukung pengelompokan item dan menavigasi di antara grup tersebut. Properti ItemsSource harus diatur ke kumpulan koleksi: Objek yang ItemsSource diatur ke harus mengimplementasikan IEnumerable, dan setiap item dalam koleksi juga harus mengimplementasikan IEnumerable. Setiap grup harus menyertakan dua properti: deskripsi teks grup dan singkatan tiga huruf.

Kelas NamedColorGroup di Xamarin.Formspustaka Book.Toolkit membuat tujuh grup NamedColor objek. Sampel ColorGroupList menunjukkan cara menggunakan grup ini dengan IsGroupingEnabled properti ListView diatur ke true, dan properti dan GroupShortNameBinding terikat GroupDisplayBinding ke properti di setiap grup.

Header grup kustom

Anda dapat membuat header kustom untuk ListView grup dengan mengganti GroupDisplayBinding properti dengan GroupHeaderTemplate menentukan templat untuk header.

ListView dan interaktivitas

Umumnya aplikasi mendapatkan interaksi pengguna dengan ListView dengan melampirkan handler ke ItemSelected atau ItemTapped peristiwa, atau dengan mengatur pengikatan data pada SelectedItem properti. Tetapi beberapa jenis sel (EntryCell dan SwitchCell) memungkinkan interaksi pengguna, dan juga dimungkinkan untuk membuat sel kustom yang berinteraksi sendiri dengan pengguna. InteractiveListView membuat 100 instans ColorViewModel dan memungkinkan pengguna untuk mengubah setiap warna menggunakan trio Slider elemen. Program ini juga menggunakan ColorToContrastColorConverter dalam Xamarin.FormsBook.Toolkit.

ListView dan MVVM

ListView memainkan peran besar dalam skenario MVVM. IEnumerable Setiap kali koleksi ada di ViewModel, koleksi sering terikat ke ListView. Selain itu, item dalam koleksi sering diterapkan INotifyPropertyChanged untuk mengikat dengan properti dalam templat.

Kumpulan ViewModels

Untuk menjelajahi ini, pustaka SchoolOfFineArts membuat beberapa kelas berdasarkan file data XML dan gambar siswa fiktif di sekolah fiktif ini.

Kelas Student ini berasal dari ViewModelBase. Kelas StudentBody adalah kumpulan Student objek dan juga berasal dari ViewModelBase. Mengunduh SchoolViewModel file XML dan menyusun semua objek.

Program StudentList menggunakan ImageCell untuk menampilkan siswa dan gambar mereka dalam :ListView

Cuplikan layar tiga kali dari Daftar Siswa

Sampel ListViewHeader menambahkan Header properti tetapi hanya muncul di Android.

Pilihan dan konteks pengikatan

Program SelectedStudentDetail mengikat BindingContext properti ListViewdari properti StackLayoutSelectedItem . Ini memungkinkan program untuk menampilkan informasi terperinci tentang siswa yang dipilih.

Menu konteks

Sel dapat menentukan menu konteks yang diimplementasikan dengan cara khusus platform. Untuk membuat menu ini, tambahkan MenuItem objek ke ContextActions properti .Cell

MenuItem menentukan lima properti:

Properti Command dan CommandParameter menyiratkan bahwa ViewModel untuk setiap item berisi metode untuk melakukan perintah menu yang diinginkan. Dalam skenario non-MVVM, MenuItem juga mendefinisikan Clicked peristiwa.

CellContextMenu menunjukkan teknik ini. Properti Command masing-masing MenuItem terikat ke properti jenis ICommand di Student kelas . Atur IsDestructive properti ke true untuk MenuItem yang menghapus atau menghapus objek yang dipilih.

Memvariasi visual

Terkadang Anda akan menginginkan sedikit variasi dalam visual item di ListView berdasarkan properti . Misalnya, ketika rata-rata nilai siswa berada di bawah 2,0, sampel ColorCodedStudents menampilkan nama siswa tersebut dengan warna merah. Ini dicapai melalui penggunaan pengonversi nilai pengikatan, ThresholdToObjectConverter, di Xamarin.Formspustaka Book.Toolkit.

Menyegarkan konten

Mendukung ListView gerakan tarik-turun untuk menyegarkan datanya. Program harus menyetel IsPullToRefresh properti untuk true memfungsikan ini. ListView merespons gerakan tarik-turun dengan mengatur propertinya IsRefreshing ke true, dan dengan menaikkan Refreshing peristiwa dan (untuk skenario MVVM) memanggil Execute metode propertinyaRefreshCommand.

Kode yang Refresh menangani peristiwa atau RefreshCommand kemudian mungkin memperbarui data yang ditampilkan oleh ListView dan diatur IsRefreshing kembali ke false.

Sampel RssFeed menunjukkan penggunaan yang RssFeedViewModel mengimplementasikan RefreshCommand dan IsRefreshing properti untuk pengikatan data.

TableView dan niatnya

ListView Meskipun umumnya menampilkan beberapa instans dengan jenis yang sama, TableView umumnya berfokus pada penyediaan antarmuka pengguna untuk beberapa properti dari berbagai jenis. Setiap item dikaitkan dengan turunannya sendiri Cell untuk menampilkan properti atau menyediakan antarmuka pengguna untuk item tersebut.

Properti dan hierarki

TableView hanya mendefinisikan empat properti:

Enumerasi TableIntent menunjukkan bagaimana Anda ingin menggunakan TableView:

Anggota ini juga menyarankan beberapa kegunaan untuk TableView.

Beberapa kelas lain terlibat dalam menentukan tabel:

  • TableSectionBase adalah kelas abstrak yang berasal dari BindableObject dan mendefinisikan Title properti

  • TableSectionBase<T> merupakan kelas abstrak yang berasal dari TableSectionBase dan mengimplementasikan IList<T> dan INotifyCollectionChanged

  • TableSection berasal dari TableSectionBase<Cell>

  • TableRoot berasal dari TableSectionBase<TableSection>

Singkatnya, TableView memiliki Root properti yang Anda atur ke TableRoot objek, yang merupakan kumpulan TableSection objek, yang masing-masing adalah kumpulan Cell objek. Tabel memiliki beberapa bagian, dan setiap bagian memiliki beberapa sel. Tabel itu sendiri dapat memiliki judul, dan setiap bagian dapat memiliki judul. Meskipun TableView menggunakan turunan Cell , itu tidak menggunakan DataTemplate.

Formulir prosaik

Sampel EntryForm mendefinisikan PersonalInformation model tampilan, instans BindingContext yang menjadi dari TableView. Setiap Cell turunan dalamnya TableSection kemudian dapat memiliki pengikatan ke properti PersonalInformation kelas.

Sel kustom

Sampel ConditionalCells diperluas pada EntryForm. Kelas ini ProgrammerInformation mencakup properti Boolean yang mengatur penerapan dua properti tambahan. Untuk dua properti tambahan ini, program ini menggunakan kustom PickerCell berdasarkan PickerCell.xaml dan PickerCell.xaml.cs diXamarin.Forms pustaka Book.Toolkit.

IsEnabled Meskipun properti dari dua PickerCell elemen terikat ke properti Boolean di ProgrammerInformation, teknik ini tampaknya tidak berfungsi, yang meminta sampel berikutnya.

Bagian bersyarah

Sampel ConditionalSection menempatkan dua item yang bersyarat pada pemilihan item Boolean dalam terpisah TableSection. File code-behind menghapus bagian ini dari TableView atau menambahkannya kembali berdasarkan properti Boolean.

Menu TableView

Penggunaan lain dari adalah TableView menu. Sampel MenuCommands menunjukkan menu yang memungkinkan Anda bergerak sedikit BoxView di sekitar layar.