Xamarin.Forms Carousel View Tutorial

Hello Guys, I was thinking about this topic a long ago so it is finally here, Carousel View for Xamarin.Forms is being a while with us, nevertheless all of the examples around the web are with XAML but not with Code Behind.

So I will show you how to add an amazing carousel view for your Xamarin.Forms applications. I have use this for a couple of OnBoarding pages on the applications that I've been working on but you can use on whatever your needs are.

1.- What are the benefits of using a Carousel View in Stead of a Carousel Page:

  • The main reason you must use a Carousel View in stead of a Carousel page is the Performance and quoting from the Xamarin blog: "It is highly optimized on each platform, allowing you to flip through many items with a simple, familiar API with an ItemsSource and a DataTemplate."

So, go ahead and download the NuGet package named:
Xamarin.Forms.CarouselView make sure you've checked the "Show pre-release packages" since this NuGet does not have a stable release (or did not have by the time I wrote this post).

CarouselView NuGet Package ScreenShot

2.- Inside the MainActivity and AppDelegate class insert this code after the Initialization of Xamarin.Forms:

var cv = typeof(Xamarin.Forms.CarouselView); Assembly.Load(cv.FullName);

3.- Then we need a template for our carousel views, for purposes of this tutorial our template will be a plain BoxView (But you can go Nuts with any complex UI stuff):

4.- Next we need our Model:

5.- Before we can create our Page we need our ViewModel that will wrap our List of OnboardingModels:

6.- Finally we need our Page that will contain the Carousel View, so let's create a new Content Page to wrap up this complete content:

6.5.- * If you want indicators on your Carousel View you must add this class:

https://gist.github.com/15mgm15/943121c22561ef280439e11730b7a2d4

So at the end you will have something like this:

Fast and easy you'll be able to create and add this controller to your apps! straight forward nothing too complex.

If you have any comments or questions, please let me know, below you'll find the Github repository with the Test project:

https://github.com/15mgm15/Xamarin.Forms.CarouselView

Mario Jesús Galván Miranda

I am a Mexican Mobile developer and a Xamarin Enthusiast.

Guadalajara