Interattività del controllo ListView

  • Articolo

Download Sample Scaricare l'esempio

La Xamarin.FormsListView classe supporta l'interazione dell'utente con i dati che presenta.

Selezione e tocco

La ListView modalità di selezione viene controllata impostando la ListView.SelectionMode proprietà su un valore dell'enumerazione ListViewSelectionMode :

  • Single indica che è possibile selezionare un singolo elemento, con l'elemento selezionato evidenziato. Questo è il valore predefinito.
  • None indica che non è possibile selezionare gli elementi.

Quando un utente tocca un elemento, vengono generati due eventi:

  • ItemSelected viene generato quando viene selezionato un nuovo elemento.
  • ItemTapped viene generato quando viene toccato un elemento.

Se si tocca lo stesso elemento due volte, verranno generati due ItemTapped eventi, ma verrà generato solo un singolo ItemSelected evento.

Nota

La ItemTappedEventArgs classe, che contiene gli argomenti dell'evento per l'evento ItemTapped , ha Group proprietà e Item e una ItemIndex proprietà il cui valore rappresenta l'indice nell'oggetto ListView dell'elemento toccato. Analogamente, la SelectedItemChangedEventArgs classe che contiene gli argomenti dell'evento per l'evento ItemSelected ha una SelectedItem proprietà e una SelectedItemIndex proprietà il cui valore rappresenta l'indice nell'oggetto ListView dell'elemento selezionato.

Quando la SelectionMode proprietà è impostata su Single, è possibile selezionare gli elementi in ListView , gli ItemSelected eventi e ItemTapped verranno generati e la SelectedItem proprietà verrà impostata sul valore dell'elemento selezionato.

Quando la SelectionMode proprietà è impostata su None, gli elementi in ListView non possono essere selezionati, l'evento ItemSelected non verrà generato e la SelectedItem proprietà rimarrà null. Tuttavia, ItemTapped gli eventi verranno comunque attivati e l'elemento toccato verrà brevemente evidenziato durante il tocco.

Quando è stato selezionato un elemento e la SelectionMode proprietà viene modificata da Single a None, la SelectedItem proprietà verrà impostata su null e l'evento ItemSelected verrà generato con un null elemento.

Gli screenshot seguenti mostrano un oggetto ListView con la modalità di selezione predefinita:

ListView with Selection Enabled

Disabilita selezione

Per disabilitare la ListView selezione, impostare la SelectionMode proprietà su None:

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

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

Azioni di contesto

Spesso, gli utenti vogliono intervenire su un elemento in un oggetto ListView. Si consideri, ad esempio, un elenco di messaggi di posta elettronica nell'app Posta. In iOS è possibile scorrere rapidamente per eliminare un messaggio:

ListView with Context Actions

Le azioni di contesto possono essere implementate in C# e XAML. Di seguito sono disponibili guide specifiche per entrambi, ma prima di tutto verranno esaminati alcuni dettagli chiave dell'implementazione per entrambi.

Le azioni di contesto vengono create usando MenuItem elementi . Gli eventi di tocco per MenuItems gli oggetti vengono generati dall'oggetto MenuItem stesso, non dall'oggetto ListView. Questo è diverso dal modo in cui gli eventi di tocco vengono gestiti per le celle, in cui genera l'evento ListView anziché la cella. Poiché genera ListView l'evento, al gestore eventi vengono fornite informazioni chiave, ad esempio l'elemento selezionato o toccato.

Per impostazione predefinita, un oggetto MenuItem non ha modo di sapere a quale cella appartiene. La CommandParameter proprietà è disponibile in MenuItem per archiviare oggetti, ad esempio l'oggetto dietro l'oggetto MenuItem.ViewCell La CommandParameter proprietà può essere impostata sia in XAML che in C#.

XAML

MenuItem gli elementi possono essere creati in una raccolta XAML. Il codice XAML seguente illustra una cella personalizzata con due azioni di contesto implementate:

<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>

Nel file code-behind verificare che i Clicked metodi siano implementati:

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");
}

Nota

NavigationPageRenderer Per Android è disponibile un metodo sottoponibile a override UpdateMenuItemIcon che può essere usato per caricare le icone da un oggetto personalizzatoDrawable. Questo override consente di usare immagini SVG come icone nelle MenuItem istanze di Android.

Codice

Le azioni di contesto possono essere implementate in qualsiasi Cell sottoclasse (purché non venga usata come intestazione di gruppo) creando MenuItem istanze e aggiungendole alla ContextActions raccolta per la cella. Per l'azione di contesto è possibile configurare le proprietà seguenti:

  • Text : stringa visualizzata nella voce di menu.
  • Selezionato: evento quando si fa clic sull'elemento.
  • IsDestructive : (facoltativo) quando true viene eseguito il rendering dell'elemento in modo diverso in iOS.

È possibile aggiungere più azioni di contesto a una cella, ma solo una deve essere IsDestructive impostata su true. Il codice seguente illustra come aggiungere azioni di contesto a un oggetto 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);

Funzionalità Trascina verso il basso

Gli utenti si aspettano che il trascinamento verso il basso in un elenco di dati aggiornerà tale elenco. Il ListView controllo supporta questa impostazione predefinita. Per abilitare la funzionalità di aggiornamento pull-to-refresh, impostare su IsPullToRefreshEnabledtrue:

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

Il codice C# equivalente è il seguente:

listView.IsPullToRefreshEnabled = true;

Durante l'aggiornamento viene visualizzato uno spinner, che è nero per impostazione predefinita. Tuttavia, il colore della selezione può essere modificato in iOS e Android impostando la RefreshControlColor proprietà su :Color

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

Il codice C# equivalente è il seguente:

listView.RefreshControlColor = Color.Red;

Gli screenshot seguenti mostrano l'aggiornamento pull-to-refresh man mano che l'utente esegue il pull:

ListView Pull to Refresh In-Progress

Gli screenshot seguenti mostrano l'aggiornamento pull-to-refresh dopo che l'utente ha rilasciato il pull, con lo spinner visualizzato durante l'aggiornamento ListView :

ListView Pull to Refresh Complete

ListView genera l'evento per avviare l'aggiornamento Refreshing e la IsRefreshing proprietà verrà impostata su true. Qualsiasi codice necessario per aggiornare il contenuto di ListView deve quindi essere eseguito dal gestore eventi per l'evento Refreshing o dal metodo eseguito da RefreshCommand. Dopo l'aggiornamento ListView di , la IsRefreshing proprietà deve essere impostata su falseo il EndRefresh metodo deve essere chiamato per indicare che l'aggiornamento è stato completato.

Nota

Quando si definisce un oggetto RefreshCommand, è possibile specificare il CanExecute metodo del comando per abilitare o disabilitare il comando.

Rilevare lo scorrimento

ListView definisce un Scrolled evento generato per indicare che si è verificato lo scorrimento. L'esempio XAML seguente mostra un ListView oggetto che imposta un gestore eventi per l'evento Scrolled :

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

Il codice C# equivalente è il seguente:

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

In questo esempio di codice, il OnListViewScrolled gestore eventi viene eseguito quando viene generato l'evento Scrolled :

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

Il OnListViewScrolled gestore eventi restituisce i valori dell'oggetto ScrolledEventArgs che accompagna l'evento.