O X do Xamarin Forms — Pagina de introdução. Carousel e PageControl em Ação

Fala galera,

blz?

Alguns aplicativos possuem aquela pagina introdutória que todo mundo pula :P .

Embora pareça complicado, com um pouco de criatividade, é relativamente simples criar uma com Xamarin.Forms !

Então vamos aprender a criar uma para seu app, ficar com uma apresentação mais profissional e para todos pularem xD.

Aproveitando para ver como podemos brincar com AbsoluteLayout e dois controles bem legais para Xamarin.Forms.

Bora!

Configurando os componentes necessários

Vamos ao nuget instalar dois componentes , o primeiro é o Xamarin.Forms.CarouselView .

Antes de mais nada , deixa eu falar um pouco sobre ele.

Em alguns casos o CarouselView apresenta certos bugs, afinal é um componente que não é utilizado desde 2016 e parece que morreu no pre-release 2.

Então porque você esta mandando eu instalar? Eu utilizo o Xamarin.Forms.CarouselView em alguns projetos, incluindo meu próprio app. Para coisas simples como a que vou demonstrar ele funciona bem, tanto no iOS e Android. Porem eu não recomendo o mesmo para coisas mais complexas.

Com casos como o do exemplo e nunca tive problema :)

Continuando….

Vamos ao nuget e com a opção "Include prerelease/show pre release package (windows/mac)” selecionada adicione o Xamarin.Forms.CarouselView em todos os projetos:

Agora vamos ao nuget instalar o componente Xamarin.Forms.PageControl .

Eu criei este componente baseado em diversos controles parecidos que utilizei. Como acredito ser útil , criei um pacote nuget do mesmo. E sempre utilizo.

Instale apenas no projeto principal :

Pronto! Bora pro código :D

Criando a pagina de Introdução

Vamos criar um Model simples para ser nossa exibição, ele vai ficar responsável pelo titulo, detalhe e imagem a ser exibido :

Agora vamos criar nossa ViewModel.cs com os itens que serão exibidos :

Não esqueça de adicionar as imagens nos projetos Android e iOS:

As imagens que utilizei estarão disponíveis no exemplo do github.

Agora vamos criar nossa tela :

Basicamente utilizamos um StackLayout principal para posicionar os controles.

O CarouselView serve para movimentar o conteúdo. Ele exibe os itens como se fosse um ListView em Horizontal, então podemos utilizar o valores das propriedades dos objetos do seu itemSource.

O AbsoluteLayout fica responsável para conseguirmos adicionar uma foto de fundo posicionando o texto sobre ela.

E Finalmente o PageControl :

Este Controle é muito simples de configurar. Basta passar o mesmo ItemsSource utilizado no Carousel.

Você pode definir quais imagens serão exibidas ao item ser selecionado e não selecionado, alem do tamanho das mesmas.

Caso queira fazer algum tratamento com a posição selecionada basta utilizar a propriedade Position.

Rodando:

Não é a maior obra prima do Design, mas da para ver como os controles funcionam bem em execução :D .

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!