O X do Xamarin Forms — Uma opção ao Carousel View

Image for post
Image for post

Fala galera,

beleza?

Carousel é um controle muito utilizado em diversos apps. Infelizmente o existente em Xamarin.Forms ( se posso chamar de existente :P ) não é tão bom. Alem de aparentemente estar descontinuado, apresenta diversos bugs.

Mesmo assim eu cheguei fazer um artigo utilizando o mesmo, com um controle de paginação que eu mesmo fiz ( O X do Xamarin Forms — Pagina de introdução. Carousel e PageControl em Ação ) .

Porem graças aos Deuses dos controles e Plugins , acabei encontrando um que funciona muito bem e o melhor: tem paginação nele mesmo!

Então bora conhecer o controle CarouselView do Alexander Reyes !

Vamos ao nosso querido nuget instalar o pacote CarouselView.FormsPlugin em todos os projetos :

Image for post
Image for post

Em seguida precisamos inicializar o plugin com o método CarouselViewRenderer.Init();

No Android :

e no iOS:

Pronto! Agora é só utilizar :D

Para utilizarmos no exemplo vamos criar uma ViewModel :

Eu criei uma ObservableCollection que possui 3 views, cada uma com um controle imagem , com source diferente. Estas views serão utilizadas de exemplo em nosso carousel.

Warning: Não esqueça de adicionar as imagens no iOS e no Android

Criei um Command apenas para mostrar a posição do carousel quando acionado.

Certo, agora vamos colocar o controle na View.

Em nossa view vamos utilizar o namespace xmlns:cv=”clr-namespace:CarouselView.FormsPlugin.Abstractions;assembly=CarouselView.FormsPlugin.Abstractions” para declarar o controle, depois implementar como abaixo :

As propriedades que utilizei foram :

ShowArrows : Habilita as setas na esquerda e direita do Carousel.

ShowIndicators: Habilita a "paginação" embaixo do controle.

PossitionSeletedCommand e PossitionSelected : Demonstram a posição selecionada no Carousel, ou via Command ou via event.

Scrolled: Evento disparado ao percorrer o carousel.

Agora vamos implementar o BackEnd da MainPage :

Notem que alem de existir um evento para detectar quando o carousel é percorrido, ainda podemos ver a direção! Muito legal não?

Mas, melhor que isso só rodando :

Image for post
Image for post

Simples e bem legal não ?

Você pode customizar o Carousel via Xaml , basta utilizar o itemTemplate :

Vou dizer, esse é meu controle Carousel Oficial no momento!!!

Curtiram?

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