O X do Xamarin Forms — FlowListView, a ListView sem limites !

Fala galera,

tudo blz?

ListView é um controle que hoje esta praticamente em todos os apps que precisamos desenvolver.

Se formos começar a falar da ListView e Xamarin.Forms , vai ter leitura para caramba… Só falando de implementações e a discussão de suas limitações.

As vezes precisamos criar novas funcionalidades para o ListView , implementando em cima de necessidades que hoje a mesma não atende (Sugestão de leitura : Multi-Select ListView ).

E as vezes aparecem seres enviados de outras dimensões que criam controles tão fodas baseados em ListView, que você nem acredita. Este é o caso do FlowListView , a ListView que suporta colunas como se fosse um Grid.

Imagine assim , quero fazer uma interface parecida com a de login do NetFlix (Dica: Interfaces com Xamarin.Forms ) :

A principio vamos pensar em um listview carregando apenas 2 itens por célula, calcular os itens e montar os templates de forma manual (ufa em ?). É ai que entra o FlowListView, com apenas algumas configurações podemos fazer o mesmo.. Duvida? Bora!

Configurando o controle

Vamos ao Nuget e adicionar o pacote DLToolkit.Forms.Controls.FlowListView ao nosso projeto compartilhado:

agora basta inicializar o componente FlowListView.Init(); no App.xaml.cs :

Pronto! Sério, pronto mesmo… agora é só usarmos :D

Utilizando o Controle:

Vamos criar um Model Beeeeeeeeem simples de um profile :

Em seguida em nossa ViewModel, uma lista de Profiles com valores pré definidos:

Em nosso Xaml, vamos declarar o namespace : xmlns:flv=”clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView” e fazer a Seguinte implementação cheia das frescuras visuais :

Rodando :

Muito loco em?

Basicamente a "Magia" esta nos atributos do FlowListView ,neste caso eu defini o FlowColumnCount para alinhar o conteúdo em 2 colunas , e o resto ele fez pra mim. Mesmo que eu tenha feito o resto do layout com Grid, o mais difícil ja esta pronto graças ao Controle!

Por exemplo, caso eu precise criar uma exibição de Anexos :

Existem diversas implementações que o controle nos permite :

Também podemos implementar um comando para cada item simplesmente adicionado a propriedade FlowItemTappedCommand=”{Binding MeuCommand}”

Como eu disse com o FlowListView, o Listview não tem limites :D

Caso queira baixar o código utilizado no Exemplo: Clique aqui.

Quer ver como fazer um App igual ao NetFlix : Clique aqui.

Quer ver outros artigos sobre Xamarin ? Clique aqui.

Espero ter ajudado!

Aquele abraço!