O X do Xamarin Forms — Uma opção ao Carousel View
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 !
Configurando o controle
Vamos ao nosso querido nuget instalar o pacote CarouselView.FormsPlugin em todos os projetos :
Em seguida precisamos inicializar o plugin com o método CarouselViewRenderer.Init();
No Android :
e no iOS:
Pronto! Agora é só utilizar :D
Utilizando o controle
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 :
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!
