Interatividade do ListView

A Xamarin.FormsListView classe dá 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 destacado. 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 dispara 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 ListView índice no 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 o toque.

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 ItemSelected evento será acionado com um null item.

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

Desativar seleção

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

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

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

Ações de contexto

Freqüentemente, os usuários desejam executar uma ação em um item em um ListView. Por exemplo, considere uma lista de e-mails no aplicativo Mail. No iOS, você pode deslizar 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 MenuItem próprio .ListView Isso é diferente de como os eventos de toque são tratados 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, a 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 MenuItemViewCell. A CommandParameter propriedade pode ser definida em XAML e C#.

XAML

MenuItem 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 arquivo .Drawable Essa substituição possibilita o uso de 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 ContextActions à coleção da célula. Você tem as seguintes propriedades que podem ser configuradas para a ação de contexto:

• Texto – a string que aparece no item de menu.
• Clicado – o evento quando o item é clicado.
• IsDestructive – (opcional) quando true, 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 sido definida 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 esperam que puxar para baixo uma lista de dados atualize essa lista. O ListView controle dá suporte a isso pronto para uso. Para habilitar a funcionalidade de puxar para atualizar, defina IsPullToRefreshEnabled como true:

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

Este é o código C# equivalente:

listView.IsPullToRefreshEnabled = true;

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

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

Este é o código C# equivalente:

listView.RefreshControlColor = Color.Red;

As capturas de tela a seguir mostram o pull-to-refresh enquanto o usuário está efetuando:

As capturas de tela a seguir mostram o pull-to-refresh depois que o usuário libera o pull, com o controle giratório sendo mostrado enquanto o ListView está sendo atualizado:

ListView aciona 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 ativar ou desativar o comando.

Detectar rolagem

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

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

Este é o código C# equivalente:

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

Nesse exemplo de código, o manipulador de eventos OnListViewScrolled é executado quando o evento Scrolled é 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.