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.

1

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.

2

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”.

3.2

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.

4

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

5

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.
6

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.

7

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.

8

Resultado

Android ezgif.com-gif-maker


iOS ezgif.com-gif-maker (1)


Windows 10

ezgif.com-gif-maker (2)

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.

9

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

10

Imagem local

10.1

Resultado

Android ezgif.com-video-to-gif


iOS 

ezgif.com-gif-maker (4)


Windows 10

ezgif.com-gif-maker (5)

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

icongithub

10 comentários em “CarouselView – Xamarin.Forms

  1. 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

    Curtir

    1. 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

      Curtir

  2. 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?)

    Curtir

    1. Olá João Vitor, esse erro pode ser um problema de pacotes desatualizados. Procure atualizar os pacotes Nuget instalados.

      Espero ter ajudado.

      Curtido por 1 pessoa

  3. 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?

    Curtir

    1. 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

      Curtir

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