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
Windows 10
Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.
Juliano, bom dia!
Obrigado por seu post. Agora uma dúvida: como exibir o indicador de paginação no CAROUSELVIEW ?
Aguardo por seu retorno para implementar aki no meu APP.
Abs.
CurtirCurtir
Olá Wallace,
Segue um post sobre os indicadores.
https://julianocustodio.com/2017/06/14/indicadores-carouselview/
Abs.
CurtirCurtir
Estranho não consegui me retorna apenas este erro, e o problema é com o CarouselView mesmo, troquei por um ListView e colocando os bindins nele e funcionou
Gravidade Código Descrição Projeto Classificação de Projeto Caminho Arquivo Linha Coluna Origem Estado de Supressão Ferramenta
Erro MSB4018 Falha inesperada da tarefa “XamlCTask”.
System.ArgumentException: An item with the same key has already been added.
Server stack trace:
at System.ThrowHelper.ThrowArgumentException(ExceptionResource resource)
at System.Collections.Generic.Dictionary`2.Insert(TKey key, TValue value, Boolean add)
at Xamarin.Forms.Xaml.XamlParser.ParseXamlElementFor(IElementNode node, XmlReader reader)
at Xamarin.Forms.Xaml.XamlParser.ReadNode(XmlReader reader, Boolean nested)
at Xamarin.Forms.Xaml.XamlParser.ParseXamlElementFor(IElementNode node, XmlReader reader)
at Xamarin.Forms.Xaml.XamlParser.ReadNode(XmlReader reader, Boolean nested)
at Xamarin.Forms.Xaml.XamlParser.ParseXamlElementFor(IElementNode node, XmlReader reader)
at Xamarin.Forms.Xaml.XamlParser.ReadNode(XmlReader reader, Boolean nested)
at Xamarin.Forms.Xaml.XamlParser.ParseXamlElementFor(IElementNode node, XmlReader reader)
at Xamarin.Forms.Xaml.XamlParser.ParseXaml(RootNode rootNode, XmlReader reader)
at Xamarin.Forms.Build.Tasks.XamlTask.ParseXaml(Stream stream, TypeReference typeReference)
at Xamarin.Forms.Build.Tasks.XamlCTask.Execute(IList`1& thrownExceptions)
at Xamarin.Forms.Build.Tasks.XamlTask.Execute()
at System.Runtime.Remoting.Messaging.StackBuilderSink._PrivateProcessMessage(IntPtr md, Object[] args, Object server, Object[]& outArgs)
at System.Runtime.Remoting.Messaging.StackBuilderSink.SyncProcessMessage(IMessage msg)
Exception rethrown at [0]:
at System.Runtime.Remoting.Proxies.RealProxy.HandleReturnMessage(IMessage reqMsg, IMessage retMsg)
at System.Runtime.Remoting.Proxies.RealProxy.PrivateInvoke(MessageData& msgData, Int32 type)
at Microsoft.Build.Framework.ITask.Execute()
at Microsoft.Build.BackEnd.TaskExecutionHost.Microsoft.Build.BackEnd.ITaskExecutionHost.Execute()
at Microsoft.Build.BackEnd.TaskBuilder.d__26.MoveNext() AppCludeDoAssinante 1 C:\Users\DELL-3550\.nuget\packages\xamarin.forms\2.5.0.121934\build\netstandard1.0 C:\Users\DELL-3550\.nuget\packages\xamarin.forms\2.5.0.121934\build\netstandard1.0\Xamarin.Forms.targets 103 3 Compilar MSBuild
CurtirCurtir
Olá Caio,
certifique-se de que todos os nuget packages estão instalados com a mesma versão em todos os seus projetos.
Espero ter ajudado. Abraço
CurtirCurtir
amigo estou com esse erro
O nome de tipo ou namespace “CarouselView” não existe no namespace “Xamarin.Forms” (você está sem uma referência de assembly?)
CurtirCurtir
Olá João Vitor, esse erro pode ser um problema de pacotes desatualizados. Procure atualizar os pacotes Nuget instalados.
Espero ter ajudado.
CurtirCurtido por 1 pessoa
Juliano, boa tarde!
Primeiramente, interessante seu post, em um futuro próximo penso em utilizar esse elemento.
Porém preciso que ele seja um carouselView com interação do usuário, ou seja, o usuário quem vai passar as imgens! Tem como fazer isso?
CurtirCurtir
Olá Marconi,
Neste exemplo é o próprio usuário que “desliza” para trocar de imagem.
Para fins de demonstração eu criei um GIF animado.
Experimente baixar o projeto do Github que você vai ver que é o próprio usuário que troca as imagens.
Espero ter ajudado. Abraço
CurtirCurtir