Udostępnij za pośrednictwem

Podsumowanie rozdziału 19. Widoki kolekcji

  • Artykuł

Uwaga

Ta książka została opublikowana wiosną 2016 roku i od tego czasu nie została zaktualizowana. Jest wiele w książce, która pozostaje cenna, ale niektóre materiały są nieaktualne, a niektóre tematy nie są już całkowicie poprawne ani kompletne.

Xamarin.Forms definiuje trzy widoki, które utrzymują kolekcje i wyświetlają swoje elementy:

  • Picker jest stosunkowo krótką listą elementów ciągów, które pozwalają użytkownikowi wybrać jeden
  • ListView jest często długą listą elementów zwykle tego samego typu i formatowania, co pozwala również użytkownikowi wybrać jeden
  • TableView to kolekcja komórek (zwykle różnych typów i wyglądów) do wyświetlania danych lub zarządzania danymi wejściowymi użytkownika

Aplikacje MVVM są często używane ListView do wyświetlania wybranej kolekcji obiektów.

Opcje programu z selektorem

Jest Picker to dobry wybór, gdy musisz zezwolić użytkownikowi na wybór opcji spośród stosunkowo krótkiej string listy elementów.

Selektor i obsługa zdarzeń

W przykładzie PickerDemo pokazano, jak używać języka XAML do ustawiania Title Picker właściwości i dodawania string Items elementów do kolekcji. Gdy użytkownik wybierze Pickerelement , wyświetla elementy w Items kolekcji w sposób zależny od platformy.

Zdarzenie SelectedIndexChanged wskazuje, kiedy użytkownik wybrał element. Następnie właściwość oparta na SelectedIndex zerach wskazuje wybrany element. Jeśli żaden element nie jest zaznaczony, SelectedIndex równa się –1.

Można również użyć SelectedIndex polecenia , aby zainicjować wybrany element, ale należy go ustawić po wypełnieniu Items kolekcji. W języku XAML oznacza to, że prawdopodobnie użyjesz elementu właściwości do ustawienia SelectedIndex.

Powiązanie danych selektora

Właściwość SelectedIndex jest wspierana przez właściwość, którą można powiązać, ale Items nie, więc użycie powiązania danych z elementem Picker jest trudne. Jednym z rozwiązań jest użycie Picker elementu w połączeniu z elementem ObjectToIndexConverter takim jak Xamarin.Formsw bibliotece Book.Toolkit. SelektorBinding pokazuje, jak to działa.

Uwaga

Teraz Xamarin.FormsPicker zawiera ItemsSource właściwości i SelectedItem , które obsługują powiązanie danych. Zobacz Selektor.

Renderowanie danych za pomocą kontrolki ListView

Jest ListView to jedyna klasa, która pochodzi z, z ItemsView<TVisual> której dziedziczy ItemsSource właściwości i ItemTemplate .

ItemsSource jest typu IEnumerable , ale domyślnie null musi być jawnie zainicjowany lub (częściej) ustawiony na kolekcję za pomocą powiązania danych. Elementy w tej kolekcji mogą być dowolnego typu.

ListViewSelectedItem Definiuje właściwość, która jest ustawiona na jeden z elementów w ItemsSource kolekcji lub null jeśli żaden element nie jest zaznaczony. ListView uruchamia zdarzenie po wybraniu ItemSelected nowego elementu.

Kolekcje i wybory

Przykład ListViewList wypełnia ListView 17 Color wartości w List<Color> kolekcji. Elementy można wybierać, ale domyślnie są wyświetlane z ich nieatrakcyjnymi ToString reprezentacjami. Kilka przykładów w tym rozdziale pokazuje, jak naprawić ten wyświetlacz i uczynić go tak atrakcyjnym, jak to konieczne.

Separator wierszy

Na wyświetlaczach systemów iOS i Android linia cienka oddziela wiersze. Możesz to kontrolować za SeparatorVisibility pomocą właściwości i SeparatorColor . SeparatorVisibility właściwość jest typu SeparatorVisibility, wyliczenie z dwoma elementami członkowskimi:

Powiązanie danych wybranego elementu

Właściwość SelectedItem jest wspierana przez właściwość, którą można powiązać, więc może być źródłem lub elementem docelowym powiązania danych. Jego wartością domyślną BindingMode jest OneWayToSource, ale ogólnie jest to element docelowy powiązania danych dwukierunkowego, szczególnie w scenariuszach MVVM. Przykład ListViewArray demonstruje tego typu powiązanie.

Różnica w obserwowalnej kolekcji

Przykład ListViewLogger ustawia ItemsSource właściwość ListView obiektu na List<DateTime> kolekcję, a następnie stopniowo dodaje nowy DateTime obiekt do kolekcji co sekundę przy użyciu czasomierza.

Nie powoduje to jednak automatycznej aktualizacji, ListView ponieważ List<T> kolekcja nie ma mechanizmu powiadamiania wskazującego, kiedy elementy są dodawane do kolekcji lub usuwane z niej.

W przestrzeni nazw zdefiniowano ObservableCollection<T> znacznie lepszą klasę System.Collections.ObjectModel do użycia w takich scenariuszach. Ta klasa implementuje INotifyCollectionChanged interfejs i w związku z tym uruchamia CollectionChanged zdarzenie, gdy elementy są dodawane lub usuwane z kolekcji albo gdy są zastępowane lub przenoszone w kolekcji. ListView Gdy wewnętrznie wykryje, że implementacja INotifyCollectionChanged klasy została ustawiona na jej ItemsSource właściwość, dołącza program obsługi do CollectionChanged zdarzenia i aktualizuje jego wyświetlanie po zmianie kolekcji.

Przykład ObservableLogger demonstruje użycie metody ObservableCollection.

Szablony i komórki

Domyślnie element ListView jest wyświetlany w kolekcji przy użyciu metody każdego elementu ToString . Lepsze podejście polega na zdefiniowaniu szablonu w celu wyświetlenia elementów.

Aby eksperymentować z tą funkcją, możesz użyć NamedColor klasy w bibliotece Xamarin.FormsBook.Toolkit. Ta klasa definiuje statyczną All właściwość typu IList<NamedColor> , która zawiera 141 NamedColor obiektów odpowiadających publicznym polam Color struktury.

Przykład NaiveNamedColorList ustawia właściwość ItemsSource na ListView tę NamedColor.All właściwość, ale wyświetlane są tylko w pełni kwalifikowane nazwy NamedColor klas obiektów.

ListView wymaga szablonu do wyświetlenia tych elementów. W kodzie można ustawić ItemTemplate właściwość zdefiniowaną DataTemplate przez ItemsView<TVisual> obiekt przy użyciu DataTemplate konstruktora, który odwołuje się do pochodnej Cell klasy. Cell ma pięć pochodnych:

  • TextCell — zawiera dwa Label widoki (mówiąc koncepcyjnie)
  • ImageCell — dodaje Image widok do TextCell
  • EntryCell — zawiera Entry widok z Label
  • SwitchCell — zawiera obiekt Switch z Label
  • ViewCell — może być dowolny View (prawdopodobnie z dziećmi)

Następnie wywołaj SetValue metodę DataTemplate i SetBinding na obiekcie, aby skojarzyć wartości z właściwościami Cell lub ustawić powiązania danych we Cell właściwościach odwołujące się do właściwości w ItemsSource kolekcji. Jest to pokazane w przykładzie TextCellListCode .

Gdy każdy element jest wyświetlany przez ListViewelement , małe drzewo wizualne jest tworzone na podstawie szablonu, a powiązania danych są ustanawiane między elementem a właściwościami elementów w tym drzewie wizualnym. Możesz zapoznać się z tym procesem, instalując programy obsługi dla ItemAppearing zdarzeń ListViewi ItemDisappearing programu , lub używając alternatywnego DataTemplate konstruktora używającego funkcji wywoływanej za każdym razem, gdy należy utworzyć drzewo wizualne elementu.

TextCellListXaml pokazuje funkcjonalnie identyczny program całkowicie w języku XAML. DataTemplate Tag jest ustawiony na ItemTemplate właściwość ListView, a następnie TextCell parametr jest ustawiony na DataTemplatewartość . Powiązania z właściwościami elementów w kolekcji są ustawiane bezpośrednio we Text właściwościach i Detail obiektu TextCell.

Komórki niestandardowe

W języku XAML można ustawić element na ViewCell DataTemplate wartość , a następnie zdefiniować niestandardowe drzewo wizualne jako View właściwość ViewCell. (View jest właściwością ViewCell zawartości, więc ViewCell.View tagi nie są wymagane). Przykład CustomNamedColorList pokazuje tę technikę:

Potrójny zrzut ekranu przedstawiający niestandardową listę kolorów nazwanych

Uzyskanie odpowiedniego rozmiaru dla wszystkich platform może być trudne. Właściwość RowHeight jest przydatna, ale w niektórych przypadkach warto uciekać się do HasUnevenRows właściwości, która jest mniej wydajna, ale wymusza ListView rozmiar wierszy. W przypadku systemów iOS i Android należy użyć jednej z tych dwóch właściwości, aby uzyskać odpowiednie rozmiary wierszy.

Grupowanie elementów ListView

ListView obsługuje grupowanie elementów i nawigowanie między tymi grupami. Właściwość musi być ustawiona ItemsSource na kolekcję kolekcji: obiekt ItemsSource ustawiony na musi implementować IEnumerableelement , a każdy element w kolekcji musi również implementować IEnumerableelement . Każda grupa powinna zawierać dwie właściwości: opis tekstowy grupy i trzyliterowy skrót.

Klasa NamedColorGroup w bibliotece Xamarin.FormsBook.Toolkit tworzy siedem grup NamedColor obiektów. W przykładzie ColorGroupList pokazano, jak używać tych grup z właściwością ListView ustawioną IsGroupingEnabled na true, a właściwości i GroupDisplayBinding GroupShortNameBinding powiązane z właściwościami w każdej grupie.

Niestandardowe nagłówki grup

Istnieje możliwość utworzenia niestandardowych nagłówków dla ListView grup, zastępując GroupDisplayBinding właściwość GroupHeaderTemplate definicją szablonu nagłówków.

ListView i interakcyjność

Zazwyczaj aplikacja uzyskuje interakcję użytkownika z ListView obiektem przez dołączenie procedury obsługi do ItemSelected zdarzenia lub ItemTapped przez ustawienie powiązania danych we SelectedItem właściwości. Jednak niektóre typy komórek (EntryCell i SwitchCell) umożliwiają interakcję użytkownika i możliwe jest również utworzenie komórek niestandardowych, które same wchodzą w interakcję z użytkownikiem. Element InteractiveListView tworzy 100 wystąpień ColorViewModel elementu i umożliwia użytkownikowi zmianę każdego koloru przy użyciu trio Slider elementów. Program korzysta również z biblioteki ColorToContrastColorConverter Xamarin.FormsBook.Toolkit.

ListView i MVVM

ListView odgrywa dużą rolę w scenariuszach MVVM. IEnumerable Zawsze, gdy kolekcja istnieje w modelu ViewModel, często jest powiązana z elementem ListView. Ponadto elementy w kolekcji często implementują INotifyPropertyChanged powiązanie z właściwościami w szablonie.

Kolekcja modelu ViewModel

Aby to zbadać, biblioteka SchoolOfFineArts tworzy kilka klas na podstawie pliku danych XML i obrazów fikcyjnych uczniów w tej fikcyjnej szkole.

Klasa Student pochodzi z klasy ViewModelBase. Klasa StudentBody jest kolekcją Student obiektów, a także pochodzi z klasy ViewModelBase. Obiekt SchoolViewModel pobiera plik XML i tworzy wszystkie obiekty.

Program StudentList używa elementu do ImageCell wyświetlania uczniów i ich obrazów w obiekcie ListView:

Potrójny zrzut ekranu przedstawiający listę uczniów

Przykład ListViewHeader dodaje właściwość, Header ale jest wyświetlana tylko w systemie Android.

Wybór i kontekst powiązania

Program SelectedStudentDetail wiąże BindingContext obiekt z StackLayout właściwością SelectedItem ListView. Dzięki temu program może wyświetlać szczegółowe informacje o wybranym uczniu.

Menu kontekstowe

Komórka może definiować menu kontekstowe implementowane w sposób specyficzny dla platformy. Aby utworzyć to menu, dodaj MenuItem obiekty do ContextActions właściwości .Cell

MenuItem definiuje pięć właściwości:

Właściwości Command i CommandParameter oznaczają, że model ViewModel dla każdego elementu zawiera metody wykonywania żądanych poleceń menu. W scenariuszach innych MenuItem niż MVVM definiuje Clicked również zdarzenie.

KomórkaContextMenu demonstruje tę technikę. Właściwość Command każdego z nich MenuItem jest powiązana z właściwością typu ICommand w Student klasie. IsDestructive Ustaw właściwość na true wartość dla MenuItem obiektu, który usuwa lub usuwa zaznaczony obiekt.

Różnicowanie wizualizacji

Czasami potrzebne są niewielkie różnice w wizualizacjach elementów w ListView obiekcie na podstawie właściwości. Na przykład gdy średnia punktu oceny ucznia spadnie poniżej 2,0, przykład ColorCodedStudents wyświetla nazwę tego ucznia na czerwono. Jest to realizowane za pomocą konwertera wartości powiązania , ThresholdToObjectConverterw Xamarin.Formsbibliotece Book.Toolkit.

Odświeżanie zawartości

Funkcja ListView obsługuje gest ściągania na potrzeby odświeżania danych. Program musi ustawić właściwość , IsPullToRefresh aby true to włączyć. Funkcja ListView odpowiada na gest ściągania, ustawiając jej IsRefreshing właściwość na true, i przez wywołanie Refreshing zdarzenia i (w przypadku scenariuszy MVVM) wywołania Execute metody jej RefreshCommand właściwości.

Kod obsługujący Refresh zdarzenie lub RefreshCommand ewentualnie aktualizuje dane wyświetlane przez ListView element i ustawia wartość IsRefreshing .false

Przykład RssFeed demonstruje użycie obiektu RssFeedViewModel , który implementuje RefreshCommand i IsRefreshing właściwości powiązania danych.

Element TableView i jego intencje

ListView Chociaż zazwyczaj wyświetla wiele wystąpień tego samego typu, TableView zwykle koncentruje się na dostarczaniu interfejsu użytkownika dla wielu właściwości różnych typów. Każdy element jest skojarzony z własną Cell pochodną do wyświetlania właściwości lub udostępniania interfejsu użytkownika.

Właściwości i hierarchie

TableView definiuje tylko cztery właściwości:

Wyliczenie TableIntent wskazuje, jak zamierzasz używać elementu TableView:

Te elementy członkowskie sugerują również niektóre zastosowania dla elementu TableView.

Kilka innych klas jest zaangażowanych w definiowanie tabeli:

  • TableSectionBase jest abstrakcyjną klasą, która pochodzi z BindableObject i definiuje Title właściwość

  • TableSectionBase<T> jest abstrakcyjną klasą, która pochodzi z TableSectionBase i implementuje IList<T> i INotifyCollectionChanged

  • TableSection pochodzi z TableSectionBase<Cell>

  • TableRoot pochodzi z TableSectionBase<TableSection>

Krótko mówiąc, TableView ma Root właściwość ustawioną TableRoot na obiekt, który jest kolekcją obiektów, z których każda jest kolekcją TableSection Cell obiektów. Tabela zawiera wiele sekcji, a każda sekcja zawiera wiele komórek. Sama tabela może mieć tytuł, a każda sekcja może mieć tytuł. Mimo że TableView korzysta z pochodnych Cell , nie wykorzystuje DataTemplatemetody .

Forma prozaiczna

Przykład EntryForm definiuje PersonalInformation model widoku, którego wystąpienie staje się elementem BindingContext TableView. Każda pochodna Cell w tej TableSection klasie może mieć powiązania z właściwościami PersonalInformation klasy.

Komórki niestandardowe

Przykład ConditionalCells rozszerza element EntryForm. Klasa ProgrammerInformation zawiera właściwość logiczną, która zarządza zastosowaniem dwóch dodatkowych właściwości. W przypadku tych dwóch dodatkowych właściwości program używa niestandardowego PickerCell obiektu na podstawie biblioteki PickerCell.xaml i PickerCell.xaml.cs w Xamarin.Formsbibliotece Book.Toolkit.

IsEnabled Mimo że właściwości dwóch PickerCell elementów są powiązane z właściwością logiczną w programie ProgrammerInformation, ta technika nie wydaje się działać, co powoduje wyświetlenie monitu o następną próbkę.

Sekcje warunkowe

Przykład ConditionalSection umieszcza dwa elementy, które są zależne od wyboru elementu logicznego w osobnym TableSectionelemencie . Plik związany z kodem usuwa tę sekcję z TableView obiektu lub dodaje ją z powrotem na podstawie właściwości logicznej.

Menu TableView

Innym zastosowaniem elementu TableView jest menu. Przykład MenuPolecenia demonstruje menu, które pozwala nieco BoxView poruszać się po ekranie.