O X do Xamarin Forms — O Incrível Sharpnado.Presentation.Forms — Parte 1 — HorizontalListView e DragAndDrop

Thiago Bertuzzi
Jan 9 · 4 min read

Fala galera,

Tudo beleza?

Estava querendo falar desse controle desde o ano passado, mas como ele é muito foda merecia um artigo bem completo e explicativo. Então, fiquei sem tempo :( .

Porem estamos em 2020 né? Então para aqueles que não conhece é hora de falar desse incrivel conjunto de controles e funcionalidades milagrosas

Muitas vezes precisamos criar listas horizontais, customizar tabs ou ate fazer um drag in drop. É possivel fazer muitas desses coisas no Xamarin.Forms, porem muitas vezes nos rendem algumas horas de trabalho.

Sharpnado.Presentation.Forms resolve tudo que eu escrevi acima e muito mais, muito mais mesmo!

Este é o primeiro artigo da Serie que irei fazer, pois existem muitos controles e para não ficar confuso vou seprar em partes :)

Criando classes de Apoio

Antes de instalar e configurar o controle vamos criar algumas classes para o Nosso APP, isso vai nos ajudar a "brincar" com o controle.

Vamos criar um Service para obter os dados da PokeApi que utilizaremos para preencher a tela :

Para me auxiliar na Api eu utilizei o pacote Xamarin.Helpers

Para ajudar em nosso MVVM vamos criar um serviço de navegação bem simples e uma BaseViewModel :

Um simples converter para exibir imagens auxiliar :

Pronto! As ViewModels e Views eu demonstro na utilização do Controle

Configurando o Controle

Vamos ao nosso querido nuget instalar os pacotes :

Sharpnado.Presentation.Forms e Sharpnado.Forms.HorizontalListView :

Você não é obrigado a instalar os 2. Porem como o nome diz, para utilizar o HorizontalListView é necessario instalar o Sharpnado.Forms.HorizontalListView.

Em seguida vamos iniciar o controle nas plataformas utilizando o SharpnadoInitializer.Initialize():

Pronto! Agora vamos utilizar o controle

Utilizando o Controle

Vamos criar uma ViewModel para nossa MainPage :

Agora vamos utilizar a primeira funcionalidade que quero mostrar para vocês.

HorizontalListView + DragAndDrop

Em nossa MainPage.xaml.cs vamos declarar o namespace : xmlns:renderedViews=”clr-namespace:Sharpnado.Presentation.Forms.RenderedViews;assembly=Sharpnado.Presentation.Forms” e criar conforme abaixo :

Deixa eu explicar.

renderedViews:HorizontalListView Fica responsavel por criar o ListView horizontal (Obvio pelo nome , não?) a propriedade EnableDragAndDrop é configuravel e nos permite advinha? o DragAndDrop hahahahah.

A utilização do HorizontalListView é semelhante a do ListView com um ItemTemplate , a diferença é que estamos utilizando uma DraggableViewCell para conseguir utilizar o Efeito.

Adicionamos o MaterialFrame, para conseguirmos dar o efeito de elevação e por fim um simples grid com o Layout da celula, para exibir nossos pokemons e seus nomes.

Eu utilizei o ImageFromByteArrayConverter apenas para facilitar, convertendo o conteudo da url de Imagem para a foto. O resultado , bem :

Uma lista dessa com um DragAndDrop tão simples você não tinha visto não é ?

O HorizontalListView tem umas propriedades interessantes.

É possivel utilizar um ColumnCount=”2" para limitar a exibição de itens a 2 por exemplo e ate a propriedade ListLayout=Carousel para habilitar a exibição em carousel :

Todas as propriedades e funcionalidades extras da HorizontaListView, DragAndDrop e Grid podem ser verificadas clicando aqui.

Muito louco né?

Porem ainda n ficou legal no exemplo a demora para carregar os dados .. Hum o que sera que pode ser feito? … Aguardemos…

O Sharpnado tem mais funcionalidades e logo vou lançar a parte 2 e 3 desse controle incivel!

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

Quer ver outros artigos sobre Xamarin ? Clique aqui.

Espero ter ajudado!

Aquele abraço!

Thiago Bertuzzi

Written by

Microsoft MVP,Gamer, Desenvolvedor e apaixonado por tecnologia!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade