CarouselView — Xamarin.Forms

Neste post irei demonstrar como criamos um CarouselView no Xamarin.Forms. O objetivo do CarouselView é que os usuários possam deslizar de um lado para o outro a fim de visualizar uma lista de conteúdo, como uma galeria de fotos por exemplo.

Partirei do princípio que você acabou de criar uma projeto Xamarin.Forms, caso possua alguma dúvida sobre isso, recomendo ler o post: Criando um projeto Xamarin.Forms .

Passo 1 — Download do NuGet Package

O CarouselView é um package que necessita ser feito o download via NuGet para o seu projeto.

Clique com o botão direito em cima de sua Solution, e selecione a opção “Manage NuGet Packages for Solution”, como demonstrado na imagem a seguir.

Em seguida, clique em “Browse”, selecione a opção “Include prerelease”, pois o CarouselView encontra-se na sua versão release no momento em que escrevo esse post.

Digite na caixa de texto “Xamarin.Forms.CarouselView” e o package do CarouselView aparecerá em uma lista abaixo.

Clique no package e na caixa a sua direita aparecerá para escolher em quais projetos deseja instalar o CarouselView. Selecione todos e em seguida clique em “Install”.

Passo 2 — Configurando seu projeto UWP

Caso você não esteja desenvolvendo sua aplicação para distribui-lá para UWP, pule essa etapa.

Abra o arquivo “App.xaml” de seu projeto UWP.

Adicione o trecho de código destacado em vermelho na imagem a seguir.

Passo 3 — Configurando sua Page Xaml

Como o CarouselView é um componente externo de sua aplicação, é necessário referenciá-lo em todas as suas pages em que deseja usá-lo.

Agora seu projeto está configurado para usar o CarouselView. A seguir, irei demostrar como criar um CarouselView com Texto e outro com Imagens.

CarouselView com Textos

Xaml

Crie o CarouselView, coloque um nome no componente e crie uma Label onde será feito um binding para demostração do Texto, conforme no exemplo a seguir.

C# — Realizado no Code-Behind

Crie uma Lista de String e adicione os textos desejados, neste exemplo utilizei “Texto 1”, “Texto 2”, “Texto 3”. Em seguida, adicione essa lista para o ItemSource do seu componente CarouselView.

Resultado

Android


iOS


Windows 10

CarouselView com Imagens

Xaml

Crie o CarouselView, coloque um nome no componente e crie uma Image onde será feito um binding no Source, conforme no exemplo a seguir.

C# — Realizado no Code-Behind

Crie uma Lista de String e adicione um link da sua imagem ou o nome da imagem, caso queira utilizar uma imagem local em seu projeto. Em seguida, adicione essa lista para o ItemSource do seu componente CarouselView.

Imagem da Web

Imagem local

Resultado

Android


iOS