Interactividad de ListViewListView interactivity

Descargar ejemplo Descargar el ejemploDownload Sample Download the sample

La Xamarin.Forms ListView clase admite la interacción del usuario con los datos que presenta.The Xamarin.Forms ListView class supports user interaction with the data it presents.

Selección y pulsacionesSelection and taps

El ListView modo de selección se controla estableciendo la ListView.SelectionMode propiedad en un valor de la ListViewSelectionMode enumeración:The ListView selection mode is controlled by setting the ListView.SelectionMode property to a value of the ListViewSelectionMode enumeration:

  • Single indica que se puede seleccionar un solo elemento, con el elemento seleccionado resaltado.Single indicates that a single item can be selected, with the selected item being highlighted. Este es el valor predeterminado.This is the default value.
  • None indica que no se pueden seleccionar elementos.None indicates that items cannot be selected.

Cuando un usuario pulsa un elemento, se activan dos eventos:When a user taps an item, two events are fired:

Si puntea dos veces en el mismo elemento, se activarán dos ItemTapped eventos, pero solo se desencadenará un ItemSelected evento único.Tapping the same item twice will fire two ItemTapped events, but will only fire a single ItemSelected event.

Nota

La ItemTappedEventArgs clase, que contiene los argumentos de evento para el ItemTapped evento, Group tiene Item las propiedades y, y una ItemIndex propiedad cuyo valor representa el índice en el ListView del elemento punteado.The ItemTappedEventArgs class, which contains the event arguments for the ItemTapped event, has Group and Item properties, and an ItemIndex property whose value represents the index in the ListView of the tapped item. Del mismo modo, la SelectedItemChangedEventArgs clase, que contiene los argumentos de evento para el ItemSelected evento, tiene una SelectedItem propiedad y una SelectedItemIndex propiedad cuyo valor representa el índice de la propiedad ListView del elemento seleccionado.Similarly, the SelectedItemChangedEventArgs class, which contains the event arguments for the ItemSelected event, has a SelectedItem property, and a SelectedItemIndex property whose value represents the index in the ListView of the selected item.

Cuando la SelectionMode propiedad está establecida en Single , se pueden seleccionar los elementos de ListView , se ItemSelected ItemTapped activarán los eventos y, y la SelectedItem propiedad se establecerá en el valor del elemento seleccionado.When the SelectionMode property is set to Single, items in the ListView can be selected, the ItemSelected and ItemTapped events will be fired, and the SelectedItem property will be set to the value of the selected item.

Cuando la SelectionMode propiedad está establecida en None , los elementos de ListView no se pueden seleccionar, el ItemSelected evento no se desencadenará y la SelectedItem propiedad permanecerá null .When the SelectionMode property is set to None, items in the ListView cannot be selected, the ItemSelected event will not be fired, and the SelectedItem property will remain null. Sin embargo, los ItemTapped eventos se seguirán activando y el elemento punteado se resaltará brevemente durante la derivación.However, ItemTapped events will still be fired and the tapped item will be briefly highlighted during the tap.

Cuando se ha seleccionado un elemento y SelectionMode se ha cambiado la propiedad de Single a None , la SelectedItem propiedad se establecerá en null y el evento se ItemSelected desencadenará con un null elemento.When an item has been selected and the SelectionMode property is changed from Single to None, the SelectedItem property will be set to null and the ItemSelected event will be fired with a null item.

Las capturas de pantallas siguientes muestran un ListView con el modo de selección predeterminado:The following screenshots show a ListView with the default selection mode:

ListView con la selección habilitada

Deshabilitar selecciónDisable selection

Para deshabilitar ListView la selección, establezca la SelectionMode propiedad en None :To disable ListView selection set the SelectionMode property to None:

<ListView ... SelectionMode="None" />
var listView = new ListView { ... SelectionMode = ListViewSelectionMode.None };

Acciones de contextoContext actions

A menudo, los usuarios quieren tomar medidas en un elemento de un ListView .Often, users will want to take action on an item in a ListView. Por ejemplo, considere una lista de correos electrónicos en la aplicación de correo.For example, consider a list of emails in the Mail app. En iOS, puede deslizar rápidamente para eliminar un mensaje:On iOS, you can swipe to delete a message:

ListView con acciones de contexto

Las acciones de contexto se pueden implementar en C# y XAML.Context actions can be implemented in C# and XAML. A continuación encontrará guías específicas para ambos, pero primero echemos un vistazo a algunos detalles de implementación clave para ambos.Below you'll find specific guides for both, but first let's take a look at some key implementation details for both.

Las acciones de contexto se crean mediante MenuItem elementos.Context Actions are created using MenuItem elements. Los eventos TAP para los MenuItems objetos los genera el MenuItem propio, no el ListView .Tap events for MenuItems objects are raised by the MenuItem itself, not the ListView. Esto es diferente de cómo se controlan los eventos TAP para las celdas, donde ListView provoca el evento en lugar de la celda.This is different from how tap events are handled for cells, where the ListView raises the event rather than the cell. Dado ListView que el objeto está provocando el evento, su controlador de eventos proporciona información de clave, como qué elemento se ha seleccionado o punteado.Because the ListView is raising the event, its event handler is given key information, like which item was selected or tapped.

De forma predeterminada, MenuItem no tiene ninguna manera de saber a qué celda pertenece.By default, a MenuItem has no way of knowing which cell it belongs to. La CommandParameter propiedad está disponible en MenuItem para almacenar objetos, como el objeto situado detrás de MenuItem ViewCell .The CommandParameter property is available on MenuItem to store objects, such as the object behind the MenuItem's ViewCell. La CommandParameter propiedad se puede establecer en XAML y C#.The CommandParameter property can be set in both XAML and C#.

XAMLXAML

MenuItem los elementos se pueden crear en una colección XAML.MenuItem elements can be created in a XAML collection. En el código XAML siguiente se muestra una celda personalizada con dos acciones de contexto implementadas:The XAML below demonstrates a custom cell with two context actions implemented:

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

En el archivo de código subyacente, asegúrese de que Clicked se implementan los métodos:In the code-behind file, ensure the Clicked methods are implemented:

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

NavigationPageRendererPara Android tiene un método reemplazable UpdateMenuItemIcon que se puede usar para cargar iconos de un personalizado Drawable .The NavigationPageRenderer for Android has an overridable UpdateMenuItemIcon method that can be used to load icons from a custom Drawable. Esta invalidación permite usar imágenes SVG como iconos en MenuItem instancias en Android.This override makes it possible to use SVG images as icons on MenuItem instances on Android.

CódigoCode

Las acciones de contexto se pueden implementar en cualquier Cell subclase (siempre y cuando no se usen como encabezado de grupo) creando MenuItem instancias y agregándolas a la ContextActions colección para la celda.Context actions can be implemented in any Cell subclass (as long as it isn't being used as a group header) by creating MenuItem instances and adding them to the ContextActions collection for the cell. Tiene las siguientes propiedades que se pueden configurar para la acción de contexto:You have the following properties can be configured for the context action:

  • Texto – de cadena que aparece en el elemento de menú.Text – the string that appears in the menu item.
  • Clic en – evento cuando se hace clic en el elemento.Clicked – the event when the item is clicked.
  • IsDestructive – (opcional) cuando es true, el elemento se representa de forma diferente en iOS.IsDestructive – (optional) when true the item is rendered differently on iOS.

Se pueden agregar varias acciones de contexto a una celda, pero solo una debe tener IsDestructive establecido en true .Multiple context actions can be added to a cell, however only one should have IsDestructive set to true. En el código siguiente se muestra cómo se agregarán acciones de contexto a un ViewCell :The following code demonstrates how context actions would be added to a 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);

Extraer para actualizarPull to refresh

Los usuarios deben esperar que la extracción de una lista de datos se actualizará en la lista.Users have come to expect that pulling down on a list of data will refresh that list. El ListView control es compatible con este.The ListView control supports this out-of-the-box. Para habilitar la funcionalidad de extracción a actualización, establezca IsPullToRefreshEnabled en true :To enable pull-to-refresh functionality, set IsPullToRefreshEnabled to true:

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

El código de C# equivalente es el siguiente:The equivalent C# code is:

listView.IsPullToRefreshEnabled = true;

Aparece un control de número durante la actualización, que es negro de forma predeterminada.A spinner appears during the refresh, which is black by default. Sin embargo, el color del control de número se puede cambiar en iOS y Android estableciendo la RefreshControlColor propiedad en Color :However, the spinner color can be changed on iOS and Android by setting the RefreshControlColor property to a Color:

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

El código de C# equivalente es el siguiente:The equivalent C# code is:

listView.RefreshControlColor = Color.Red;

Las siguientes capturas de pantallas muestran la incorporación de cambios a la actualización cuando el usuario extrae:The following screenshots show pull-to-refresh as the user is pulling:

Incorporación de cambios de ListView a la actualización en curso

Las siguientes capturas de pantallas muestran la extracción a la actualización después de que el usuario haya lanzado la extracción, con el control de número que se muestra mientras ListView se está actualizando:The following screenshots show pull-to-refresh after the user has released the pull, with the spinner being shown while the ListView is updating:

Incorporación de cambios de ListView a actualización completada

ListView activa el Refreshing evento para iniciar la actualización y la IsRefreshing propiedad se establecerá en true .ListView fires the Refreshing event to initiate the refresh, and the IsRefreshing property will be set to true. El código necesario para actualizar el contenido del ListView debería ejecutarse a continuación por el controlador de eventos para el Refreshing evento, o por el método ejecutado por RefreshCommand .Whatever code is required to refresh the contents of the ListView should then be executed by the event handler for the Refreshing event, or by the method executed by the RefreshCommand. Una vez que ListView se actualiza, la IsRefreshing propiedad debe establecerse en false , o EndRefresh se debe llamar al método para indicar que la actualización se ha completado.Once the ListView is refreshed, the IsRefreshing property should be set to false, or the EndRefresh method should be called, to indicate that the refresh is complete.

Nota

Al definir un RefreshCommand , CanExecute se puede especificar el método del comando para habilitar o deshabilitar el comando.When defining a RefreshCommand, the CanExecute method of the command can be specified to enable or disable the command.

Detectar desplazamientoDetect scrolling

ListView define un Scrolled evento que se desencadena para indicar que se ha producido el desplazamiento.ListView defines a Scrolled event that's fired to indicate that scrolling occurred. En el ejemplo de XAML siguiente se muestra un ListView que establece un controlador de eventos para el Scrolled evento:The following XAML example shows a ListView that sets an event handler for the Scrolled event:

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

El código de C# equivalente es el siguiente:The equivalent C# code is:

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

En este ejemplo de código, el OnListViewScrolled controlador de eventos se ejecuta cuando se Scrolled desencadena el evento:In this code example, the OnListViewScrolled event handler is executed when the Scrolled event fires:

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

El OnListViewScrolled controlador de eventos genera los valores del ScrolledEventArgs objeto que acompaña al evento.The OnListViewScrolled event handler outputs the values of the ScrolledEventArgs object that accompanies the event.