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

Image for post
Image for post

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

Image for post
Image for post

Vamos ao nosso querido nuget instalar os pacotes :

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

Image for post
Image for post

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

Image for post
Image for post

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 :

Image for post
Image for post

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 :

Image for post
Image for post

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!

Written by

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