Sdílet prostřednictvím

Shrnutí kapitoly 19. Zobrazení kolekcí

  • Článek

Poznámka:

Tato kniha byla publikována na jaře roku 2016 a od té doby nebyla aktualizována. Existuje mnoho v knize, která zůstává cenná, ale některé materiály jsou zastaralé a některá témata už nejsou zcela správná nebo úplná.

Xamarin.Forms definuje tři zobrazení, která udržují kolekce a zobrazují jejich prvky:

  • Picker je relativně krátký seznam řetězcových položek, které uživateli umožňují vybrat jednu položku.
  • ListView je často dlouhý seznam položek, které mají obvykle stejný typ a formátování, což také uživateli umožňuje zvolit jeden z nich.
  • TableView je kolekce buněk (obvykle různých typů a vzhledu) k zobrazení dat nebo správě uživatelských vstupů.

U aplikací MVVM se běžně používá ListView k zobrazení vybratelné kolekce objektů.

Možnosti programu s nástrojem Pro výběr

Je Picker to dobrá volba, když potřebujete uživateli povolit, aby si vybral možnost z relativně krátkého string seznamu položek.

Výběr a zpracování událostí

Ukázka PickerDemo ukazuje použití XAML k nastavení Title Picker vlastnosti a přidání string položek do Items kolekce. Když uživatel vybere Pickerpoložku , zobrazí položky v Items kolekci způsobem závislým na platformě.

Událost SelectedIndexChanged označuje, kdy uživatel vybral položku. Vlastnost založená na SelectedIndex nule pak označuje vybranou položku. Pokud není vybrána žádná položka, SelectedIndex rovná se –1.

Můžete také použít SelectedIndex k inicializaci vybrané položky, ale musí být nastavena po Items vyplnění kolekce. V jazyce XAML to znamená, že pravděpodobně použijete element vlastnosti k nastavení SelectedIndex.

Datová vazba pro výběr

Vlastnost SelectedIndex je zajištěna vlastností s možností vázání, ale Items není, takže použití datové vazby s určitou Picker vlastností je obtížné. Jedním zřešeních Picker ObjectToIndexConverter Xamarin.Forms PickerBinding ukazuje, jak to funguje.

Poznámka:

Teď Xamarin.FormsPicker obsahuje ItemsSource vlastnosti SelectedItem , které podporují datové vazby. Viz Výběr.

Vykreslování dat pomocí ListView

Je ListView jedinou třídou, která je odvozena z toho, ze ItemsView<TVisual> které dědí ItemsSource a ItemTemplate vlastnosti.

ItemsSource je typu IEnumerable , ale ve výchozím nastavení musí null být explicitně inicializován nebo (častěji) nastaven na kolekci prostřednictvím datové vazby. Položky v této kolekci můžou být libovolného typu.

ListViewSelectedItem definuje vlastnost, která je buď nastavena na jednu z položek v ItemsSource kolekci, nebo null pokud není vybrána žádná položka. ListViewItemSelected aktivuje událost, když je vybrána nová položka.

Kolekce a výběry

Ukázka ListViewList vyplní ListView 17 Color hodnot v kolekci List<Color> . Položky se dají vybrat, ale ve výchozím nastavení se zobrazí s jejich neattraktivními ToString reprezentacemi. Několikpříkladůch

Oddělovač řádků

Na displejích s iOSem a Androidem odděluje tenká čára řádky. Můžete to řídit pomocí SeparatorVisibility vlastností a SeparatorColor vlastností. SeparatorVisibility vlastnost je typu SeparatorVisibility, výčet se dvěma členy:

Datová vazba vybrané položky

Vlastnost SelectedItem je zajištěna vlastností s možností vázání, takže může být zdrojem nebo cílem datové vazby. BindingMode Výchozí hodnota je OneWayToSource, ale obecně se jedná o cíl obousměrné datové vazby, zejména ve scénářích MVVM. Ukázka ListViewArray ukazuje tento typ vazby.

Rozdíl ObservableCollection

Ukázka ListViewLogger nastaví ItemsSource vlastnost ListView kolekce List<DateTime> a pak postupně přidá nový DateTime objekt do kolekce každou sekundu pomocí časovače.

Automaticky se ale neaktualizuje, protože List<T> kolekce nemá mechanismus oznámení, který indikuje, ListView kdy jsou položky přidány do kolekce nebo odebrány z kolekce.

Mnohem lepší třída pro použití v takových scénářích je ObservableCollection<T> definována System.Collections.ObjectModel v oboru názvů. Tato třída implementuje INotifyCollectionChanged rozhraní a následně aktivuje CollectionChanged událost při přidání nebo odebrání položek z kolekce nebo při jejich nahrazení nebo přesunutí v kolekci. ListView Když interně zjistí, že implementace INotifyCollectionChanged třídy byla nastavena na její ItemsSource vlastnost, připojí obslužnou rutinu CollectionChanged k události a aktualizuje její zobrazení při změně kolekce.

Ukázka ObservableLogger ukazuje použití ObservableCollection.

Šablony a buňky

Ve výchozím nastavení ListView se položky v kolekci zobrazují pomocí metody jednotlivých položek ToString . Lepší přístup zahrnuje definování šablony pro zobrazení položek.

K experimentování s touto funkcí můžete použít NamedColor třídu v knihovně Xamarin.FormsBook.Toolkit. Tato třída definuje statickou All vlastnost typu IList<NamedColor> , která obsahuje 141 NamedColor objektů odpovídajících veřejným polím Color struktury.

Ukázka NaiveNamedColorList nastaví ListView ItemsSource na tuto NamedColor.All vlastnost, ale zobrazí se pouze plně kvalifikované názvy NamedColor tříd objektů.

ListView potřebuje šablonu k zobrazení těchto položek. V kódu můžete nastavit ItemTemplate vlastnost definovanou ItemsView<TVisual> DataTemplate na objekt pomocí konstruktoruDataTemplate, který odkazuje na derivát Cell třídy. Cell má pět derivátů:

  • TextCell – obsahuje dvě Label zobrazení (koncepčně řečeno)
  • ImageCell — přidá Image zobrazení do TextCell
  • EntryCell — obsahuje Entry zobrazení s Label
  • SwitchCell— obsahuje SwitchLabel
  • ViewCell — může být jakýkoli View (pravděpodobně u dětí)

Potom zavolejte a na DataTemplate objekt přidružte Cell hodnoty k vlastnostem nebo k nastavení datových vazeb na Cell vlastnosti odkazující na vlastnosti položek v kolekciItemsSource.SetBinding SetValue To je demonstrováno v ukázce TextCellListCode .

Vzhledem k tomu, že každá položka je zobrazena ListView, malý vizuální strom je vytvořen ze šablony a datové vazby jsou vytvořeny mezi položkou a vlastnostmi prvků v tomto vizuálním stromu. O tomto procesu můžete získat představu instalací obslužných rutin pro ItemAppearing ItemDisappearing události objektu ListView, nebo pomocí alternativního DataTemplate konstruktoru , který používá funkci, která se volá při každém vytvoření vizuálního stromu položky.

TextCellListXaml zobrazuje funkčně identický program zcela v XAML. Značka DataTemplate je nastavena na ItemTemplate vlastnost ListViewa pak TextCell je nastavena DataTemplatena hodnotu . Vazby na vlastnosti položek v kolekci jsou nastaveny přímo na Text vlastnosti a Detail vlastnosti objektu TextCell.

Vlastní buňky

V XAML je možné nastavit ViewCell na a DataTemplate pak definovat vlastní strom vizuálu View jako vlastnost ViewCell. (View je vlastnost ViewCell obsahu, takže ViewCell.View značky nejsou povinné.) Ukázka CustomNamedColorList ukazuje tuto techniku:

Trojitý snímek obrazovky se seznamem vlastních pojmenovaných barev

Správné nastavení velikosti pro všechny platformy může být složité. Vlastnost RowHeight je užitečná, ale v některých případech se budete chtít uchylovat k HasUnevenRows vlastnosti, což je méně efektivní, ale vynutí ListView velikost řádků. Pro iOS a Android musíte použít jednu z těchto dvou vlastností, abyste získali správnou velikost řádků.

Seskupení položek ListView

ListView podporuje seskupení položek a navigaci mezi těmito skupinami. Vlastnost ItemsSource musí být nastavena na kolekci kolekcí: Objekt, který ItemsSource je nastaven na musí implementovat IEnumerable, a každá položka v kolekci musí také implementovat IEnumerable. Každá skupina by měla obsahovat dvě vlastnosti: textový popis skupiny a zkratku se třemi písmeny.

Třída NamedColorGroup v knihovně Xamarin.FormsBook.Toolkit vytvoří sedm skupin NamedColor objektů. Ukázka ColorGroupList ukazuje, jak tyto skupiny používat s IsGroupingEnabled vlastností nastavenou ListView na truea GroupDisplayBinding vlastnosti svázané GroupShortNameBinding s vlastnostmi v každé skupině.

Vlastní záhlaví skupin

Vlastní hlavičky pro ListView skupiny je možné vytvořit nahrazením GroupDisplayBinding vlastnosti definováním GroupHeaderTemplate šablony pro záhlaví.

ListView a interaktivita

Obecně aplikace získá interakci uživatele s obslužnou rutinou ListView k ItemSelected události nebo ItemTapped nastavením datové vazby na SelectedItem vlastnost. Některé typy buněk (EntryCell a SwitchCell) ale umožňují interakci uživatelů a je také možné vytvořit vlastní buňky, které samy pracují s uživatelem. InteractiveListView vytvoří 100 instancí ColorViewModel a umožňuje uživateli změnit každou barvu pomocí trojice Slider prvků. Program také využívá ColorToContrastColorConverter Xamarin.Formssadu Book.Toolkit.

ListView a MVVM

ListView hraje velkou roli ve scénářích MVVM. Vždy, IEnumerable když kolekce existuje v modelu ViewModel, je často vázána na .ListView Položky v kolekci se také často implementují INotifyPropertyChanged tak, aby se svážely s vlastnostmi v šabloně.

Kolekce modelů ViewModels

Pro prozkoumání vytvoří knihovna SchoolOfFineArts několik tříd založených na datovém souboru XML a obrázcích fiktivních studentů v této fiktivní škole.

Třída Student je odvozena z ViewModelBase. Třída StudentBody je kolekce Student objektů a také je odvozena z ViewModelBase. Stáhne SchoolViewModel soubor XML a sestaví všechny objekty.

Program StudentList používá ImageCell k zobrazení studentů a jejich obrázků v ListView:

Trojitý snímek obrazovky se seznamem studentů

Ukázka ListViewHeader přidá Header vlastnost, ale zobrazí se pouze v Androidu.

Výběr a kontext vazby

SelectedStudentDetail program sváže BindingContext s StackLayout SelectedItem vlastností .ListView To umožňuje programu zobrazit podrobné informace o vybraném studentu.

Místní nabídky

Buňka může definovat místní nabídku implementovanou určitým způsobem. Chcete-li vytvořit tuto nabídku, přidejte MenuItem objekty do ContextActions vlastnosti objektu Cell.

MenuItem definuje pět vlastností:

Z vlastností Command CommandParameter vyplývá, že Model ViewModel pro každou položku obsahuje metody pro provedení požadovaných příkazů nabídky. Ve scénářích, které nejsou MVVM, MenuItem také definuje Clicked událost.

CellContextMenu ukazuje tuto techniku. Vlastnost Command každého MenuItem je vázána na vlastnost typu ICommand ve Student třídě. IsDestructive Nastavte vlastnost pro true MenuItem objekt, který odebere nebo odstraní vybraný objekt.

Různé vizuály

Někdy budete chtít mírné variace ve vizuálech položek v ListView závislosti na vlastnosti. Když například průměr známek studenta klesne pod 2,0, zobrazí se v ukázce ColorCodedStudents jméno studenta červeně. Toho se dosahuje pomocí převaděče hodnot vazby v ThresholdToObjectConverterknihovně Xamarin.FormsBook.Toolkit.

Aktualizace obsahu

Podporuje ListView gesto stažení pro aktualizaci dat. Program musí nastavit IsPullToRefresh vlastnost tak, aby true ji povolil. Reaguje ListView na gesto přetažení nastavením jeho IsRefreshing vlastnosti truea vyvoláním Refreshing události a (pro scénáře MVVM) volání Execute metody jeho RefreshCommand vlastnosti.

Kód zpracovávající Refresh událost nebo RefreshCommand pak případně aktualizuje data zobrazená sadou ListView IsRefreshing zpět .false

Ukázka RssFeed ukazuje použitíRssFeedViewModel, která implementuje a IsRefreshing vlastnosti datové vazbyRefreshCommand.

TableView a jeho záměry

Obecně se ListView sice zobrazuje více instancí stejného typu, ale TableView obecně se zaměřuje na poskytování uživatelského rozhraní pro více vlastností různých typů. Každá položka je přidružena k vlastním Cell derivátům pro zobrazení vlastnosti nebo poskytnutí uživatelského rozhraní.

Vlastnosti a hierarchie

TableView definuje pouze čtyři vlastnosti:

Výčet TableIntent indikuje, jak máte v úmyslu TableViewpoužít:

Tito členové také navrhují některé použití pro TableView.

Definování tabulky se týká několika dalších tříd:

  • TableSectionBase je abstraktní třída, která je odvozena a BindableObject definuje Title vlastnost.

  • TableSectionBase<T> je abstraktní třída, která je odvozena od TableSectionBase a implementuje IList<T> a INotifyCollectionChanged

  • TableSection odvozuje z TableSectionBase<Cell>

  • TableRoot odvozuje z TableSectionBase<TableSection>

Stručně řečeno, má vlastnost, TableView kterou jste nastavili na TableRoot objekt, což je kolekce TableSection objektů, z nichž každý je kolekce Cell Root objektů. Tabulka obsahuje více oddílů a každý oddíl má více buněk. Samotná tabulka může mít název a každý oddíl může mít název. I když TableView používá deriváty, nevyužívá Cell DataTemplate.

Prosaický formulář

EntryForm ukázka definuje PersonalInformation model zobrazení, instanci, z níž se stane .BindingContext TableView Každý Cell derivát v jeho TableSection pak může mít vazby na vlastnosti PersonalInformation třídy.

Vlastní buňky

The ConditionalCells sample expands on EntryForm. Třída ProgrammerInformation obsahuje logickou vlastnost, která řídí použitelnost dvou dalších vlastností. Pro tyto dvě další vlastnosti program používá vlastní PickerCell založené na PickerCell.xaml a PickerCell.xaml.cs v knihovněXamarin.Forms Book.Toolkit.

IsEnabled I když vlastnosti těchto dvou PickerCell prvků jsou vázány na logickou vlastnost v ProgrammerInformation, tato technika zdánlivě nefunguje, což vyzve další ukázku.

Podmíněné oddíly

Ukázka PodmíněnéSection umístí dvě položky, které jsou podmíněné na výběr logické položky v samostatné TableSection. Soubor kódu odebere tento oddíl z oddílu TableView nebo ho přidá zpět na základě logické vlastnosti.

Nabídka A TableView

Dalším použitím TableView nabídky je nabídka. Ukázka MenuCommands ukazuje nabídku, která vám umožní pohybovat se trochu BoxView po obrazovce.