Xamarin.Forms CarouselView with image indicators

Download source code

Most of us when we are very familiar with Bootstrap carousel, we expect the same output in mobile CarouselView either. But the problem with Xamarin.Form CarouselView doesn’t provide us such CarouselView with Image Indicators. 

So this article will help the crazy professionals

Step1: Create a Mobile App (Xamarin.forms) project

Open Visual Studio 2017    File    New    Project    Choose Cross-Platform template    choose Mobile App (Xamarin.Forms)    Name it as CarouselViewApp    Click on OK    choose .Net Standard    Click OK

 

Step2: Install CarouselView NuGet Package

Right click on CarouselViewApp    Manage NuGet Packages    type CarouselView.FormsPlugin and Install the package

 

Step3: Create a Model for Images as ImageModel.cs

Before that add the images in CarouselViewApp.Android    Resource    drawable

File: ImageModel.cs

 

Step4: Create ViewModel for MainPage.xaml

Right click on CarouselViewApp    Add    NewItem    Visual C#    Add new class MainPageViewModel.cs

File: MainPageViewModel.cs

 

Step5:  Adding namespace in the MainPage.xaml

 

Step6: Assign BindingContext for MainPage.xaml.cs

File: MainPage.xaml.cs

 

Step7: Creating UI for MainPage.xaml

File: MainPage.xaml

  1. By using Image.GestureRecognizers, we are firing click events using MVVM Architecture
  2. Rotation property for ListView helps us to set or get the current rotation of the element. Here we are rotating ListView to 270 deg
  3. Here the indicators row in Grid is build using RelativeLayout.
  4. RelativeLayout is used here to turn the ListView in Horizontal Direction
    1. At first we move ListView into RelativeLayout, and maintaining the RelativeLayout HeightRequest.
    2. Now we need to fit the ListView in RelativeLayout bounds, this we can do it by using RelativeLayout Constraints.
    3. RelativeLayout.XConstraint, RelativeLayout.YContraint  are used to fix the x,y positions. And then RelativeLayout.WidthConstraint is to set the width for image, RelativeLayout.HeightContraint is to set the height for image.
    4. And the final step is to rotate the ContentView. This will first rotate the cell and the fit image into it.

 

output: Now run the application

  

6 thoughts to “Xamarin.Forms CarouselView with image indicators”

  1. I follow the entire example but the Source property is alwas null and the pictures doesn’t show them (the only difference is that I use URL).

    var path = (image as Xamarin.Forms.Image).Source.ToString().Split(‘:’)[1].Trim(); //null reference when I tap any square.

    1. Hi freezer27,
      If you are able to get the Image Source, then try to get the Image Name from that using basic C#. And then get the index of it from your array.

  2. Hi, I do believe this is an excellent blog.

    I stumbledupon it 😉 I will come back once again since I book marked it.
    Money and freedom is the greatest way to change, may you be
    rich and continue to guide others.

Leave a Reply

Your email address will not be published. Required fields are marked *