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

  

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

Leave a Reply

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