Interatividade do ListView

A Xamarin.FormsListView classe oferece suporte à interação do usuário com os dados que apresenta.

Seleção e toques

O ListView modo de seleção é controlado definindo a ListView.SelectionMode propriedade como um valor da ListViewSelectionMode enumeração:

• Single indica que um único item pode ser selecionado, com o item selecionado sendo realçado. Este é o valor padrão.
• None indica que os itens não podem ser selecionados.

Quando um usuário toca em um item, dois eventos são disparados:

• ItemSelected é acionado quando um novo item é selecionado.
• ItemTapped é acionado quando um item é tocado.

Tocar no mesmo item duas vezes disparará dois ItemTapped eventos, mas disparará apenas um único ItemSelected evento.

Observação

A ItemTappedEventArgs classe, que contém os argumentos de evento para o ItemTapped evento, tem Group propriedades e Item uma ItemIndex propriedade cujo valor representa o índice no ListView item tocado. Da mesma forma, a SelectedItemChangedEventArgs classe, que contém os argumentos de evento para o ItemSelected evento, tem uma SelectedItem propriedade e uma SelectedItemIndex propriedade cujo valor representa o índice no ListView item selecionado.

Quando a SelectionMode propriedade é definida como Single, os itens no ListView podem ser selecionados, os ItemSelected eventos e ItemTapped serão disparados e a SelectedItem propriedade será definida como o valor do item selecionado.

Quando a SelectionMode propriedade é definida como None, os itens no ListView não podem ser selecionados, o ItemSelected evento não será acionado e a SelectedItem propriedade permanecerá null. No entanto, ItemTapped os eventos ainda serão disparados e o item tocado será brevemente destacado durante a torneira.

Quando um item tiver sido selecionado e a SelectionMode propriedade for alterada de Single para None, a SelectedItem propriedade será definida como null e o evento será disparado ItemSelected com um null item.

As capturas de tela a seguir mostram um com o modo de ListView seleção padrão:

Desativar seleção

Para desabilitar ListView a seleção, defina a SelectionMode propriedade como None:

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

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

Ações de contexto

Muitas vezes, os usuários desejarão executar uma ação em um item em um ListViewarquivo . Por exemplo, considere uma lista de e-mails no aplicativo Email. No iOS, você pode passar o dedo para excluir uma mensagem:

As ações de contexto podem ser implementadas em C# e XAML. Abaixo você encontrará guias específicos para ambos, mas primeiro vamos dar uma olhada em alguns detalhes importantes de implementação para ambos.

As ações de contexto são criadas usando MenuItem elementos . Os eventos de toque para MenuItems objetos são gerados pelo próprio, não pelo ListViewMenuItem . Isso é diferente de como os eventos de toque são manipulados para células, em que o ListView gera o evento em vez da célula. Como o ListView está gerando o evento, seu manipulador de eventos recebe informações importantes, como qual item foi selecionado ou tocado.

Por padrão, um MenuItem não tem como saber a qual célula pertence. A CommandParameter propriedade está disponível para MenuItem armazenar objetos, como o objeto por trás do MenuItem.ViewCell A CommandParameter propriedade pode ser definida em XAML e C#.

XAML

MenuItem elementos podem ser criados em uma coleção XAML. O XAML abaixo demonstra uma célula personalizada com duas ações de contexto implementadas:

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

No arquivo code-behind, verifique se os Clicked métodos estão implementados:

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

Observação

O NavigationPageRenderer para Android tem um método substituível UpdateMenuItemIcon que pode ser usado para carregar ícones de um Drawablearquivo . Essa substituição torna possível usar imagens SVG como ícones em MenuItem instâncias no Android.

Código

As ações de contexto podem ser implementadas em qualquer Cell subclasse (desde que não esteja sendo usada como um cabeçalho de grupo) criando MenuItem instâncias e adicionando-as à coleção da ContextActions célula. Você tem as seguintes propriedades podem ser configuradas para a ação de contexto:

• Texto – a cadeia de caracteres que aparece no item de menu.
• Clicado – o evento em que o item é clicado.
• IsDestructive – (opcional) quando verdadeiro, o item é renderizado de forma diferente no iOS.

Várias ações de contexto podem ser adicionadas a uma célula, no entanto, apenas uma deve ter IsDestructive definido como true. O código a seguir demonstra como as ações de contexto seriam adicionadas a um 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);

Deslizar para atualizar

Os usuários passaram a esperar que a retirada de uma lista de dados atualizará essa lista. O ListView controle suporta isso pronto para uso. Para habilitar a funcionalidade pull-to-refresh, defina IsPullToRefreshEnabled como true:

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

Este é o código C# equivalente:

listView.IsPullToRefreshEnabled = true;

Um spinner aparece durante a atualização, que é preto por padrão. No entanto, a cor do spinner pode ser alterada no iOS e Android, definindo a RefreshControlColor propriedade como um Color:

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

Este é o código C# equivalente:

listView.RefreshControlColor = Color.Red;

As capturas de tela a seguir mostram pull-to-refresh à medida que o usuário está puxando:

As capturas de tela a seguir mostram pull-to-refresh depois que o usuário liberou o pull, com o spinner sendo mostrado enquanto o ListView está atualizando:

ListView dispara o Refreshing evento para iniciar a atualização e a IsRefreshing propriedade será definida como true. Qualquer código necessário para atualizar o conteúdo do deve ser executado pelo manipulador de ListView eventos para o Refreshing evento ou pelo método executado pelo RefreshCommand. Depois que o ListView for atualizado, a IsRefreshing propriedade deverá ser definida como false, ou o EndRefresh método deverá ser chamado, para indicar que a atualização foi concluída.

Observação

Ao definir um RefreshCommand, o CanExecute método do comando pode ser especificado para habilitar ou desabilitar o comando.

Detectar rolagem

ListView Define um Scrolled evento que é disparado para indicar que a rolagem ocorreu. O exemplo XAML a seguir mostra um que define um ListView manipulador de eventos para o Scrolled evento:

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

Este é o código C# equivalente:

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

Neste exemplo de código, o OnListViewScrolled manipulador de eventos é executado quando o Scrolled evento é acionado:

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

O OnListViewScrolled manipulador de eventos gera os valores do ScrolledEventArgs objeto que acompanha o evento.