Aracılığıyla paylaş

Bölüm 19'un özeti. Koleksiyon görünümleri

Not

Bu kitap 2016 baharında yayımlanmıştır ve o zamandan beri güncellenmemiştir. Kitapta değerli kalan çok şey vardır, ancak bazı malzemeler eskidir ve bazı konular artık tamamen doğru veya eksiksiz değildir.

Xamarin.Forms koleksiyonları koruyan ve öğelerini görüntüleyen üç görünüm tanımlar:

  • Picker , kullanıcının bir dize öğesi seçmesine olanak tanıyan nispeten kısa bir dize öğesi listesidir
  • ListView genellikle aynı türde ve biçimlendirmeye sahip öğelerin uzun bir listesidir ve kullanıcının bir öğe seçmesine de olanak tanır
  • TableViewverileri görüntülemek veya kullanıcı girişini yönetmek için bir hücre koleksiyonudur (genellikle çeşitli türlerde ve görünümlerde)

MVVM uygulamalarının, seçilebilir bir nesne koleksiyonunu görüntülemek için uygulamasını kullanması ListView yaygındır.

Seçici ile program seçenekleri

Picker, kullanıcının görece kısa bir öğe listesinden bir seçenek belirlemesine izin vermeniz gerektiğinde iyi bir seçimdirstring.

Seçici ve olay işleme

PickerDemo örneği, özelliği ayarlamak Picker Title ve koleksiyona öğe eklemek string için XAML'nin Items nasıl kullanılacağını gösterir. Kullanıcı öğesini seçtiğinde Picker, koleksiyondaki Items öğeleri platforma bağımlı bir şekilde görüntüler.

Olay, SelectedIndexChanged kullanıcının bir öğeyi ne zaman seçtiğini gösterir. Sıfır tabanlı SelectedIndex özellik, seçili öğeyi gösterir. Seçili öğe yoksa – SelectedIndex 1'e eşittir.

Seçili öğeyi başlatmak için de kullanabilirsiniz SelectedIndex , ancak koleksiyon doldurulduktan sonra Items ayarlanması gerekir. XAML'de bu, ayarlamak için SelectedIndexbüyük olasılıkla bir özellik öğesi kullanacağınız anlamına gelir.

Seçiciyi bağlayan veriler

SelectedIndex özelliği bağlanabilir bir özellik tarafından desteklenir, ancak Items desteklenmez, bu nedenle ile Picker veri bağlama kullanmak zordur. Çözümlerden biri, bunu Book.Toolkit kitaplığındaki Xamarin.Formsgibi bir ObjectToIndexConverter ile birlikte kullanmaktırPicker. PickerBinding bunun nasıl çalıştığını gösterir.

Not

Şimdi Xamarin.FormsPicker veri bağlamayı destekleyen ve SelectedItem özelliklerini içerirItemsSource. Bkz. Seçici.

ListView ile veri işleme

ListView, ve ItemTemplate özelliklerini devraldığı ItemsSource tek sınıftırItemsView<TVisual>.

ItemsSource türündedir IEnumerable , ancak varsayılan olarak açıktır null ve açıkça başlatılmalıdır veya (daha yaygın olarak) bir veri bağlaması aracılığıyla bir koleksiyona ayarlanmalıdır. Bu koleksiyondaki öğeler herhangi bir türde olabilir.

ListViewSelectedItem koleksiyondaki ItemsSource öğelerden birine ayarlanmış veya null hiçbir öğe seçilmemiş bir özelliği tanımlar. ListView yeni bir öğe seçildiğinde olayı tetikler ItemSelected .

Koleksiyonlar ve seçimler

ListViewList örneği bir ListView koleksiyondaki List<Color> 17 Color değerle doldurur. Öğeler seçilebilir ancak varsayılan olarak çekici ToString olmayan gösterimleriyle görüntülenir. Bu bölümdeki birkaç örnek, bu görünümün nasıl düzeltileceğini ve istendiği kadar çekici hale getirileceğini gösterir.

Satır ayırıcısı

iOS ve Android ekranlarda ince bir çizgi satırları ayırır. Bunu ve SeparatorColor özellikleriyle SeparatorVisibility denetleyebilirsiniz. SeparatorVisibility özelliği türündedir SeparatorVisibilityve iki üyeli bir numaralandırmadır:

Seçili öğeyi bağlayan veriler

SelectedItem özelliği bağlanabilir bir özellik tarafından desteklenir, bu nedenle veri bağlamanın kaynağı veya hedefi olabilir. Varsayılan değeridir BindingMode OneWayToSource, ancak genellikle özellikle MVVM senaryolarında iki yönlü veri bağlamanın hedefidir. ListViewArray örneği bu bağlama türünü gösterir.

ObservableCollection farkı

ListViewLogger örneği, öğesinin ItemsSource ListView özelliğini bir List<DateTime> koleksiyona ayarlar ve ardından zamanlayıcı kullanarak her saniye koleksiyona aşamalı olarak yeni DateTime bir nesne ekler.

Ancak, koleksiyonunda ListView öğelerin koleksiyona ne zaman eklendiğini veya koleksiyondan kaldırıldığını belirten bir bildirim mekanizması olmadığından, öğesinin kendisi List<T> otomatik olarak güncelleştirilmez.

Bu tür senaryolarda kullanmak için çok daha iyi bir ObservableCollection<T> sınıf ad alanında System.Collections.ObjectModel tanımlanır. Bu sınıf arabirimini INotifyCollectionChanged uygular ve sonuç olarak öğeler koleksiyona eklendiğinde veya koleksiyondan kaldırıldığında ya da koleksiyon içinde değiştirildiğinde veya taşındığında bir CollectionChanged olay başlatır. ListView şirket içinde uygulayan INotifyCollectionChanged bir sınıfın özelliğine ItemsSource ayarlandığını algıladığında, olaya bir işleyici CollectionChanged ekler ve koleksiyon değiştiğinde görünümünü güncelleştirir.

ObservableLogger örneği, kullanımını ObservableCollectiongösterir.

Şablonlar ve hücreler

Varsayılan olarak, her ListView öğenin ToString yöntemini kullanarak koleksiyonundaki öğeleri görüntüler. Daha iyi bir yaklaşım, öğeleri görüntülemek için şablon tanımlamayı içerir.

Bu özelliği denemek için Book.Toolkit kitaplığındaki Xamarin.Formssınıfını kullanabilirsiniz.NamedColor Bu sınıf, yapının ortak alanlarına Color karşılık gelen 141 NamedColor nesne içeren türündeki IList<NamedColor> statik All bir özelliği tanımlar.

NaiveNamedColorList örneği, öğesinin ListView değerini bu NamedColor.All özelliğe ayarlarItemsSource, ancak nesnelerin yalnızca tam sınıf adları NamedColor görüntülenir.

ListView bu öğeleri görüntülemek için bir şablona ihtiyaç duyar. Kodda, sınıfın bir türevine ItemTemplate başvuran oluşturucuyu DataTemplate kullanarak tarafından ItemsView<TVisual> tanımlanan özelliğini bir DataTemplate nesnesine Cell ayarlayabilirsiniz. Cell beş türevi vardır:

  • TextCell — iki Label görünüm (kavramsal olarak konuşmak) içerir
  • ImageCell — bir Image görünüm ekler TextCell
  • EntryCell — ile bir Entry görünüm içerir Label
  • SwitchCell— ile SwitchLabel
  • ViewCell — herhangi bir View (büyük olasılıkla çocuklarla) olabilir

Ardından, değerleri özelliklerle ilişkilendirmek veya koleksiyondaki öğelerin özelliklerine başvuran özelliklerde Cell veri bağlamaları ayarlamak için nesnesini çağırın SetValue ItemsSource SetBinding DataTemplate.Cell Bu, TextCellListCode örneğinde gösterilmiştir .

Her öğe tarafından görüntülendiğinden ListView, şablondan küçük bir görsel ağaç oluşturulur ve öğe ile bu görsel ağaçtaki öğelerin özellikleri arasında veri bağlamaları oluşturulur. ve olayları için ItemAppearing işleyiciler yükleyerek veya bir öğenin görsel ağacının her oluşturulması gerektiğinde çağrılan bir işlev kullanan alternatif DataTemplate bir oluşturucu kullanarak bu işlem hakkında bir fikir edinebilirsiniz.ItemDisappearing ListView

TextCellListXaml, XAML'de tamamen aynı işlevsel bir programı gösterir. Bir DataTemplate etiket, öğesinin ItemTemplate özelliğine ListViewayarlanır ve ardından TextCell değerine ayarlanır DataTemplate. Koleksiyondaki öğelerin özelliklerine bağlamalar doğrudan ve Detail özellikleri TextCellüzerinde Text ayarlanır.

Özel hücreler

XAML'de öğesine ayarlamak ViewCell DataTemplate ve ardından özelliği olarak View ViewCellözel bir görsel ağaç tanımlamak mümkündür. (View etiketlerin gerekli olmadığından içerik özelliğidir ViewCell.View ViewCell.) CustomNamedColorList örneği şu tekniği gösterir:

Özel Adlandırılmış Renk Listesi'nin üçlü ekran görüntüsü

Tüm platformlar için boyutlandırmayı doğru şekilde almak karmaşık olabilir. RowHeight Özelliği kullanışlıdır, ancak bazı durumlarda daha az verimli olan ancak satırları boyutlandırmaya HasUnevenRows zorlayan özelliğine başvurmak ListView istersiniz. iOS ve Android için, düzgün satır boyutlandırması almak için bu iki özelliklerden birini kullanmanız gerekir.

ListView öğelerini gruplandırma

ListView öğeleri gruplandırma ve bu gruplar arasında gezinmeyi destekler. ItemsSource özelliği bir koleksiyon koleksiyonuna ayarlanmalıdır: olarak ayarlanan nesnenin ItemsSource uygulamasının IEnumerableve koleksiyondaki her öğenin de uygulaması IEnumerablegerekir. Her grup iki özellik içermelidir: grubun metin açıklaması ve üç harfli kısaltma.

Book.Toolkit kitaplığındakiXamarin.Forms sınıf yedi nesne grubu NamedColor oluşturur. NamedColorGroup ColorGroupList örneği, bu grupların için ayarlanmış trueözelliğiyle ListView ve her gruptaki GroupDisplayBinding özelliklere bağlı ve GroupShortNameBinding özellikleriyle IsGroupingEnabled nasıl kullanılacağını gösterir.

Özel grup üst bilgileri

özelliğini üst bilgiler için ListView bir şablon tanımlama ile GroupHeaderTemplate değiştirerek GroupDisplayBinding gruplar için özel üst bilgiler oluşturmak mümkündür.

ListView ve etkileşim

Genellikle bir uygulama, veya ItemTapped olayına ItemSelected bir işleyici ekleyerek veya özelliğinde bir veri bağlaması ayarlayarak ile kullanıcı etkileşimini ListView SelectedItem alır. Ancak bazı hücre türleri (EntryCell ve SwitchCell) kullanıcı etkileşimine izin verir ve kendileriyle kullanıcıyla etkileşim kuran özel hücreler oluşturmak da mümkündür. InteractiveListView 100 örneği ColorViewModel oluşturur ve kullanıcının bir üç öğe kullanarak her rengi değiştirmesine Slider olanak tanır. Program ayrıca Book.Toolkit dosyasından Xamarin.Formsda yararlanıyor.ColorToContrastColorConverter

ListView ve MVVM

ListView MVVM senaryolarında büyük rol oynar. Bir ViewModel'de bir IEnumerable koleksiyon her bulunduğunda, genellikle öğesine ListViewbağlıdır. Ayrıca, koleksiyondaki öğeler genellikle bir şablondaki özelliklerle bağlamak için uygulanır INotifyPropertyChanged .

ViewModels koleksiyonu

Bunu keşfetmek için SchoolOfFineArts kitaplığı, bir XML veri dosyasını ve bu kurgusal okuldaki kurgusal öğrencilerin görüntülerini temel alan çeşitli sınıflar oluşturur.

Student sınıfı öğesinden ViewModelBasetüretilir. StudentBody sınıfı bir nesne koleksiyonudur Student ve öğesinden ViewModelBasede türetilir. XML SchoolViewModel dosyasını indirir ve tüm nesneleri bir araya yükler.

StudentList programıImageCell, öğrencileri ve görüntülerini bir içinde görüntülemek için kullanır:ListView

Öğrenci Listesi'nin üçlü ekran görüntüsü

ListViewHeader örneği bir Header özellik ekler, ancak yalnızca Android'de gösterilir.

Seçim ve bağlama bağlamı

SelectedStudentDetail programı, öğesinin StackLayout öğesini öğesinin özelliğine SelectedItem ListViewbağlarBindingContext. Bu, programın seçilen öğrenci hakkında ayrıntılı bilgi görüntülemesine olanak tanır.

Bağlam menüleri

Bir hücre, platforma özgü bir şekilde uygulanan bir bağlam menüsü tanımlayabilir. Bu menüyü oluşturmak için özelliğine ContextActions Cellnesneler ekleyinMenuItem.

MenuItem beş özelliği tanımlar:

Command ve CommandParameter özellikleri, her öğe için ViewModel'in istenen menü komutlarını gerçekleştirmek için yöntemler içerdiğini gösterir. MVVM olmayan senaryolarda MenuItem da bir Clicked olay tanımlar.

CellContextMenu bu tekniği gösterir. Command Her MenuItem birinin özelliği, sınıfındaki Student türündeki ICommand bir özelliğe bağlıdır. IsDestructive Seçili nesneyi kaldıran veya silecek bir MenuItem için özelliğini true olarak ayarlayın.

Görselleri çeşitlendirme

Bazen içindeki öğelerin ListView görsellerinde bir özelliğe göre küçük çeşitlemeler olmasını istersiniz. Örneğin, öğrencinin not ortalaması 2,0'ın altına düştüğünde ColorCodedStudents örneği bu öğrencinin adını kırmızı olarak görüntüler. Bu, Book.Toolkit kitaplığındaXamarin.Forms bağlama değeri dönüştürücüsü ThresholdToObjectConverterkullanarak gerçekleştirilir.

İçeriği yenileme

, ListView verilerini yenilemek için aşağı çekme hareketini destekler. Programın bunu etkinleştirmek için özelliğini olarak true ayarlaması IsPullToRefresh gerekir. , ListView özelliğini olarak ayarlayarak IsRefreshing ve olayını trueve (MVVM senaryoları için) özelliğinin Refreshing Execute yöntemini çağırarak aşağı çekme hareketine yanıt verir RefreshCommand .

Olayı işleyen Refresh kod veya RefreshCommand büyük olasılıkla tarafından görüntülenen ListView verileri güncelleştirir ve olarak falseyeniden ayarlarIsRefreshing.

RssFeed örneği, veri bağlama için ve IsRefreshing özelliklerini uygulayan RefreshCommand bir RssFeedViewModel kullanmayı gösterir.

TableView ve amaçları

ListView genellikle aynı türdeki birden çok örneği görüntülerken, TableView genellikle çeşitli türlerin birden çok özelliği için bir kullanıcı arabirimi sağlamaya odaklanır. Her öğe, özelliği görüntülemek veya ona bir kullanıcı arabirimi sağlamak için kendi Cell türeviyle ilişkilendirilir.

Özellikler ve hiyerarşiler

TableView yalnızca dört özelliği tanımlar:

Numaralandırma, TableIntent 'yi nasıl kullanmayı TableViewplanladığınızı gösterir:

Bu üyeler ayrıca için bazı kullanımlar TableViewönerir.

Tablo tanımlamaya birkaç sınıf daha dahil edilir:

  • TableSectionBase bir özelliğinden BindableObject türetilen ve tanımlayan soyut bir Title sınıftır

  • TableSectionBase<T>ve'den TableSectionBase türetilen ve uygulayan bir soyut sınıftır IList<T>INotifyCollectionChanged

  • TableSection Türetildiği TableSectionBase<Cell>

  • TableRoot Türetildiği TableSectionBase<TableSection>

Kısacası, TableView Root her biri bir TableRoot nesne koleksiyonu olan bir nesne koleksiyonu TableSection olan bir nesneye ayarladığınız bir Cell özelliği vardır. Bir tabloda birden çok bölüm vardır ve her bölümde birden çok hücre vardır. Tablonun kendi başlığı olabilir ve her bölümün başlığı olabilir. Türevleri kullansa TableView da, kullanmazDataTemplate.Cell

Bir prosaic form

EntryForm örneği, örneğinin BindingContext TableViewolduğu bir PersonalInformation görünüm modeli tanımlar. Bundan sonra içindeki TableSection her Cell türev, sınıfın PersonalInformation özelliklerine bağlamalara sahip olabilir.

Özel hücreler

ConditionalCells örneği EntryForm'da genişler. sınıfı, ProgrammerInformation iki ek özelliğin uygulanabilirliğini yöneten bir Boole özelliği içerir. Bu iki ek özellik için program, PickerCell.xaml tabanlı özel bir PickerCell özellik kullanır ve Book.Toolkit kitaplığında Xamarin.FormsPickerCell.xaml.cs.

İki PickerCell öğesinin IsEnabled özellikleri içindeki Boole özelliğine bağlı olsa daProgrammerInformation, bu teknik işe yaramaz ve bu da sonraki örneği ister.

Koşullu bölümler

ConditionalSection örneği, Boole öğesinin seçimine koşullu olan iki öğeyi ayrı TableSectionbir içine yerleştirir. Arka planda kod dosyası bu bölümü içinden TableView kaldırır veya Boole özelliğine göre geri ekler.

TableView menüsü

Bir diğer kullanım alanı TableView ise menüdür. MenuCommands örneği, ekranda biraz BoxView hareket etmenizi sağlayan bir menü gösterir.

  • Last updated on