We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to create a Carousel controls in Xaml

Platform: Xamarin.Forms |
Control: SfCarousel |
Published Date: March 2, 2017 |
Last Revised Date: June 25, 2019

SfCarousel control allows navigating through image data in an interactive way so that they can be viewed or selected. We can create this control either using C# level code or in Xaml level code. Here we are going to write the carousel control creation with Xaml level code.

Creation of Carousel control: 

Step 1: Import the carousel namespace




Step 2: Initialize the carousel control as the content of content page


<syncfusion:SfCarousel x:Name="carousel" />    


Step 3: Add the necessary properties on it.


<syncfusion:SfCarousel x:Name="carousel" Offset="20" RotationAngle="45 SelectedIndex="2" HeightRequest="400" WidthRequest="800" />    

Step 4: Create a model view which holds image data in C# level


class CarouselModel 
    public CarouselModel(string imagestr)
        Image = imagestr;
    private string _image;
    public string Image
        get { return _image; }
        set { _image = value; }



Step 5: Populate carousel items collection in View model with the image data.


public class CarouselViewModel 
    public CarouselViewModel()
        ImageCollection.Add(new CarouselModel("image1.png"));
        ImageCollection.Add(new CarouselModel("image2.png"));
        ImageCollection.Add(new CarouselModel("image3.png"));
        ImageCollection.Add(new CarouselModel("image4.png"));
        ImageCollection.Add(new CarouselModel("image5.png"));
    private List<CarouselModel> imageCollection = new List<CarouselModel>();
    public List<CarouselModel> ImageCollection
        get { return imageCollection; }
        set { imageCollection = value; }


The following finalized code will illustrate the way to create a carousel control with xaml code.



<? xml version="1.0" encoding="UTF-8"?>  
<ContentPage xmlns = "http://xamarin.com/schemas/2014/forms"
    <DataTemplate x:Key="itemTemplate">
      <Image Source = "{Binding Image}" Aspect="AspectFit"/>
  <syncfusion:SfCarousel x:Name="carousel"  ItemTemplate="{StaticResource itemTemplate}" DataSource="{Binding ImageCollection}" SelectedIndex="2"  RotationAngle="45"  HeightRequest="400" WidthRequest="800" />






2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon