Interakcyjność elementu ListView

Klasa Xamarin.FormsListView obsługuje interakcję użytkownika z prezentowanymi danymi.

Wybór i naciśnięcia

ListView Tryb wyboru jest kontrolowany przez ustawienie ListView.SelectionMode właściwości na wartość ListViewSelectionMode wyliczenia:

• Single wskazuje, że można wybrać pojedynczy element z wyróżnionym wybranym elementem. Jest to wartość domyślna.
• None wskazuje, że nie można wybrać elementów.

Gdy użytkownik naciągnie element, zostaną wyzwolone dwa zdarzenia:

• ItemSelected uruchamia się po wybraniu nowego elementu.
• ItemTapped uruchamia się, gdy element jest naciśnięty.

Naciśnięcie tego samego elementu dwa razy spowoduje wyzwolenie dwóch ItemTapped zdarzeń, ale spowoduje wyzwolenie tylko jednego ItemSelected zdarzenia.

Uwaga

Klasa ItemTappedEventArgs , która zawiera argumenty zdarzeń dla ItemTapped zdarzenia, zawiera Group właściwości i Item oraz ItemIndex właściwość, której wartość reprezentuje indeks w ListView elemencie naciśniętym. SelectedItemChangedEventArgs Podobnie klasa, która zawiera argumenty zdarzeń dla ItemSelected zdarzenia, ma SelectedItem właściwość i SelectedItemIndex właściwość, której wartość reprezentuje indeks w ListView wybranym elemencie.

SelectionMode Gdy właściwość jest ustawiona na Single, można wybrać elementy w elemencie ListView , ItemSelected zdarzenia i ItemTapped zostaną wyzwolone, a SelectedItem właściwość zostanie ustawiona na wartość wybranego elementu.

SelectionMode Gdy właściwość jest ustawiona na , nie można wybrać Noneelementów w obiekcie ListView , ItemSelected zdarzenie nie zostanie wyzwolone, a SelectedItem właściwość pozostanie null. ItemTapped Jednak zdarzenia będą nadal wyzwalane, a naciśnięty element zostanie krótko wyróżniony podczas naciśnięcia.

Po wybraniu elementu i SelectionMode zmianie właściwości z Single na None, właściwość zostanie ustawiona na null , SelectedItem a ItemSelected zdarzenie zostanie wyzwolone z elementemnull.

Na poniższych zrzutach ekranu przedstawiono ListView element z domyślnym trybem wyboru:

Wyłączanie zaznaczenia

Aby wyłączyć ListView zaznaczenie, ustaw SelectionMode właściwość na None:

<ListView ... SelectionMode="None" />

var listView = new ListView { ... SelectionMode = ListViewSelectionMode.None };

Akcje kontekstowe

Często użytkownicy chcą podejmować działania względem elementu w elemencie ListView. Rozważmy na przykład listę wiadomości e-mail w aplikacji Poczta. W systemie iOS możesz szybko przesunąć, aby usunąć komunikat:

Akcje kontekstowe można zaimplementować w językach C# i XAML. Poniżej znajdziesz konkretne przewodniki dla obu, ale najpierw przyjrzyjmy się niektórym kluczowym szczegółom implementacji obu tych elementów.

Akcje kontekstowe są tworzone przy użyciu MenuItem elementów. Naciśnięcie zdarzeń dla MenuItems obiektów jest wywoływane MenuItem przez siebie, a nie ListView. Różni się to od sposobu obsługi zdarzeń naciśnięcia dla komórek, gdzie ListView zgłasza zdarzenie, a nie komórkę. ListView Ponieważ obiekt zgłasza zdarzenie, jego program obsługi zdarzeń otrzymuje kluczowe informacje, na przykład, który element został wybrany lub naciśnięty.

Domyślnie element MenuItem nie ma możliwości poznania, do której komórki należy. Właściwość CommandParameter jest dostępna w MenuItem programie do przechowywania obiektów, takich jak obiekt za MenuItemobiektem ViewCell. Właściwość CommandParameter można ustawić zarówno w języku XAML, jak i W języku C#.

XAML

MenuItem elementy można tworzyć w kolekcji XAML. Poniższy kod XAML przedstawia komórkę niestandardową z zaimplementowanymi dwiema akcjami kontekstu:

<ListView x:Name="ContextDemoList">
  <ListView.ItemTemplate>
    <DataTemplate>
      <ViewCell>
         <ViewCell.ContextActions>
            <MenuItem Clicked="OnMore"
                      CommandParameter="{Binding .}"
                      Text="More" />
            <MenuItem Clicked="OnDelete"
                      CommandParameter="{Binding .}"
                      Text="Delete" IsDestructive="True" />
         </ViewCell.ContextActions>
         <StackLayout Padding="15,0">
              <Label Text="{Binding title}" />
         </StackLayout>
      </ViewCell>
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>

W pliku za pomocą kodu upewnij się, że Clicked metody są implementowane:

public void OnMore (object sender, EventArgs e)
{
    var mi = ((MenuItem)sender);
    DisplayAlert("More Context Action", mi.CommandParameter + " more context action", "OK");
}

public void OnDelete (object sender, EventArgs e)
{
    var mi = ((MenuItem)sender);
    DisplayAlert("Delete Context Action", mi.CommandParameter + " delete context action", "OK");
}

Uwaga

Dla NavigationPageRenderer systemu Android ma metodę zastępowalną UpdateMenuItemIcon , która może służyć do ładowania ikon z niestandardowego Drawableelementu . To zastąpienie umożliwia używanie obrazów SVG jako ikon w MenuItem wystąpieniach w systemie Android.

Kod

Akcje kontekstowe można zaimplementować w dowolnej Cell podklasie (o ile nie jest używana jako nagłówek grupy), tworząc MenuItem wystąpienia i dodając je do ContextActions kolekcji dla komórki. Dla akcji kontekstu można skonfigurować następujące właściwości:

• Text — ciąg wyświetlany w elemencie menu.
• Kliknięcie — zdarzenie po kliknięciu elementu.
• IsDestructive — (opcjonalnie), jeśli element jest renderowany inaczej w systemie iOS.

Do komórki można dodać wiele akcji kontekstowych, jednak tylko jedna z nich powinna mieć IsDestructive ustawioną wartość true. Poniższy kod przedstawia sposób dodawania akcji kontekstowych do elementu ViewCell:

var moreAction = new MenuItem { Text = "More" };
moreAction.SetBinding (MenuItem.CommandParameterProperty, new Binding ("."));
moreAction.Clicked += async (sender, e) =>
{
    var mi = ((MenuItem)sender);
    Debug.WriteLine("More Context Action clicked: " + mi.CommandParameter);
};

var deleteAction = new MenuItem { Text = "Delete", IsDestructive = true }; // red background
deleteAction.SetBinding (MenuItem.CommandParameterProperty, new Binding ("."));
deleteAction.Clicked += async (sender, e) =>
{
    var mi = ((MenuItem)sender);
    Debug.WriteLine("Delete Context Action clicked: " + mi.CommandParameter);
};
// add to the ViewCell's ContextActions property
ContextActions.Add (moreAction);
ContextActions.Add (deleteAction);

Przeciągnij, aby odświeżyć

Użytkownicy spodziewają się, że ściąganie na liście danych spowoduje odświeżenie tej listy. Kontrolka ListView obsługuje to gotowe rozwiązanie. Aby włączyć funkcję ściągania do odświeżenia, ustaw wartość IsPullToRefreshEnabled true:

<ListView ...
          IsPullToRefreshEnabled="true" />

Równoważny kod języka C# to:

listView.IsPullToRefreshEnabled = true;

Podczas odświeżania pojawia się spinner, który jest domyślnie. Jednak kolor pokrętła można zmienić w systemach iOS i Android, ustawiając RefreshControlColor właściwość na Colorwartość :

<ListView ...
          IsPullToRefreshEnabled="true"
          RefreshControlColor="Red" />

Równoważny kod języka C# to:

listView.RefreshControlColor = Color.Red;

Na poniższych zrzutach ekranu przedstawiono ściąganie do odświeżenia podczas ściągania przez użytkownika:

Na poniższych zrzutach ekranu przedstawiono ściąganie do odświeżenia po wydaniu ściągnięcia przez użytkownika, a pokrętło jest wyświetlane podczas ListView aktualizowania:

ListViewRefreshing uruchamia zdarzenie w celu zainicjowania odświeżania, a właściwość zostanie ustawiona IsRefreshing na truewartość . Niezależnie od tego, jaki kod jest wymagany do odświeżenia zawartości obiektu ListView , powinien zostać wykonany przez program obsługi zdarzeń dla Refreshing zdarzenia lub przez metodę wykonywaną RefreshCommandprzez program . ListView Po odświeżeniu IsRefreshing właściwości należy ustawić falsewartość , lub EndRefresh wywołać metodę , aby wskazać, że odświeżanie zostało ukończone.

Uwaga

Podczas definiowania metody można określić metodę RefreshCommandCanExecute polecenia w celu włączenia lub wyłączenia polecenia.

Wykrywanie przewijania

ListView definiuje zdarzenie Scrolled , które jest wyzwalane, aby wskazać, że wystąpiło przewijanie. W poniższym przykładzie XAML pokazano element ListView , który ustawia procedurę obsługi zdarzeń dla Scrolled zdarzenia:

<ListView Scrolled="OnListViewScrolled">
    ...
</ListView>

Równoważny kod języka C# to:

ListView listView = new ListView();
listView.Scrolled += OnListViewScrolled;

W tym przykładzie OnListViewScrolled kodu program obsługi zdarzeń jest wykonywany po uruchomieniu Scrolled zdarzenia:

void OnListViewScrolled(object sender, ScrolledEventArgs e)
{
    Debug.WriteLine("ScrollX: " + e.ScrollX);
    Debug.WriteLine("ScrollY: " + e.ScrollY);  
}

Program OnListViewScrolled obsługi zdarzeń zwraca wartości ScrolledEventArgs obiektu, który towarzyszy zdarzeniu.