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

Thiago Bertuzzi
Sep 6, 2018 · 3 min read

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!

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