Adicionando indicadores no CarouselView – Xamarin.Forms

Hoje irei falar novamente sobre o CarouselView. Após o meu post  CarouselView – Xamarin.Forms, algumas pessoas me procuraram perguntando como adicionar indicadores.

Indicadores são ícones de índice, com a finalidade de informar ao usuário que aquele elemento é uma lista, independente de qual conteúdo for, e a posição na qual ele se encontra.

Porém, no momento em que escrevo este post o componente do CarouselView não possui uma propriedade de indicadores, então você precisará implementá-la.

Para este exemplo, partirei do principio que você já criou o seu CarouselView, caso possua alguma dúvida sobre isso, recomendo ler o post  CarouselView – Xamarin.Forms .

Ícones

Para este exemplo usei 2 ícones com círculos para utilizar de indicadores, sendo um deles preenchido na parte interior para informar o elemento corrente, e um círculo sem preenchimento para informar os demais elementos do CarouselView.

Selecionado

selecionado

Não Selecionado

naoSelecionado

Adicione esses ícones nas pastas designadas para as imagens de acordo com cada plataforma, caso possua alguma dúvida na plataforma Android, recomendo ler o post Adicionando imagens em projeto Android – Xamarin.

Classe IndicadoresCarousel

Em seguida crie uma classe com o nome “IndicadoresCarousel.cs” para realizar o controle dos indicadores. Adicione o código a seguir na classe.

C# Realizado no Code-Behind

Aproveitando o exemplo do post anterior, realizei o Binding no próprio Code-Behind para fins de demonstração dos indicadores, para isso no método construtor atribua “this” para o BindingContext, como demonstrado no exemplo a seguir:

Xaml

Na sua view, levando em consideração que você já adicionou o componente CarouselView conforme exemplificado no post anterior, adicione os indicadores como demonstrado a seguir:

 

Resultado

ezgif.com-gif-maker (1)

 

Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.

icongithub

2 comentários em “Adicionando indicadores no CarouselView – Xamarin.Forms

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s