O X do Xamarin Forms — Multi-Select ListView

Fala Galera,

O Primeiro App a gente não esquece. E o primeiro app que fiz possui a necessidade do usuário selecionar diversas linhas de um listview para realizar uma ação.

Se você consultar a documentação do Xamarin.Forms vai ver que existe um exemplo de Multi-Select no listview :

A principio atende.. Mas na minha opinião não é o ideal.

Pesquisando muito no Google, estudando controles , achei uma solução para o meu problema .. Qual ? Baseado em diversos exemplos eu encapsulei conceitos e fiz meu próprio controle :

Hoje lhes apresento meu primeiro Plugin no Nuget : Xamarin.Forms.MultiSelectListView !

Com ele é possível utilizar qualquer imagem que você queira para o mostrador de “ linha selecionada” , alem disso na sua própria ObservableCollection você sabe se o objeto foi selecionado ou não!

Bem como eu digo para todos os pluins/exemplos que trago aqui, chega de bla bla bla e vamos la!

Configurando o plugin

Vamos ao nuget procurar o Xamarin.Forms.MultiSelectListView e instalar apenas na PCL

Lembre-se de sempre ter a versão mais atualizada do pacote Xamarin.Forms, pois o plugin depende dele.

Pronto, podemos utilizar !

Basicamente o coração do plugin é o MultiSelectObservableCollection, é um modificação do ObservableCollection com a propriedade IsSelected.

IsSelected nos informa se o objeto da nossa coleção foi selecionado.

Alem disso podemos utilizar as propriedades SelectedItems e UnselectedItems para obter apenas os objetos que queremos. Selecionados ou não selecionados.

Vamos criar uma model simples :

Em seguida vamos utilizar nossa o MultiSelectObservableCollection em nossa ViewModel :

Certo! Agora no xaml vamos implementar nosso controle.

Primeiro temos que referenciar o mesmo : xmlns:lv=”clr-namespace:Xamarin.Forms.MultiSelectListView;assembly=Xamarin.Forms.MultiSelectListView”

Em Seguida vamos implementar conforme abaixo :

Perfeito! Agora uma breve explicação :

MultiSelectListView te da a opção de habilitar ou desabilitar o multi-select da linha . Em seu listview você deve implementar a propriedade lv:MultiSelect.Enable=”true”. O Ideal é criar um Binding para utilizar a funcionalidade sempre que quiser.

SelectableCell é a nova cell implementada pelo controle. Nele temos as propriedades :

SelectableCell.CheckView : Propriedade para configurar a imagem de exibição da célula selecionada.Como utilizamos a tag <Image> , você tem a disposição todos os atributos como tamanho por exemplo.

SelectableCell.DataView : Aqui vai o conteúdo da Célula, todo conteúdo que sera exibido de forma normal que você já conhece.

Rodando :

Quem quiser mais informações/Exemplos do componente é só clicar aqui.

Fique a vontade para sugerir melhorias.. Melhor ainda, da um fork e me manda seu pull request :D

Logo tem mais um controle saindo do forno ;)

Espero ter ajudado!

Aquele abraço!

Microsoft MVP,Gamer, Desenvolvedor e apaixonado por tecnologia!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store