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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to render multiple items to Carousel items

Platform: Xamarin.Forms |
Control: SfCarousel

We can render the multiple items to the single carousel item by adding the controls in any of the parent layout and assign as the content of carousel Item. It can be achieved by using the following


Step1: Create a carousel control with all included assemblies.

Step2: Create a view model class with source of given controls.

Step3: Using “ItemTemplate”, add controls (Image,Button and Label) into the parent layout and assign that as itemtemplate view.


The following will illustrate the way to add multiple controls in carousel item.

Code snippet:

public partial class KBSolutionPage : ContentPage
public KBSolutionPage()
    //Initialize the carousel control
    SfCarousel sfCarousel = new SfCarousel();
    if (Device.OS == TargetPlatform.Android)
        sfCarousel.ItemWidth = 170;
        sfCarousel.ItemHeight = 250;
    if (Device.OS == TargetPlatform.iOS)
        sfCarousel.ItemWidth = 150;
        sfCarousel.ItemHeight = 300;
    var carouselModel = new List<CarouselModel> {
    new CarouselModel("image1.png","Button1","Label1" ),
    new CarouselModel ("image1.png","Button1","Label1”),
    new CarouselModel ("image1.png","Button1","Label1”),
    new CarouselModel ("image1.png","Button1","Label1”),
    new CarouselModel ("image1.png","Button1","Label1”)
    var carouselModelDataTemplate = new DataTemplate(() =>
        var stack = new StackLayout();
        var nameImage = new Image();
        nameImage.SetBinding(Image.SourceProperty, "Image");
        var nameButton = new Button();
        nameButton.SetBinding(Button.TextProperty, "ButtonString");
        var nameLabel = new Label() { TextColor = Color.Gray };
        nameLabel.SetBinding(Label.TextProperty, "LabelString");
        return stack;
    sfCarousel.ItemTemplate = carouselModelDataTemplate;
    sfCarousel.DataSource = carouselModel;
    this.Content = sfCarousel;
class CarouselModel
public CarouselModel(string imagestr, string buttonstring, string labelstring)
    Image = imagestr;
    ButtonString = buttonstring;
    LabelString = labelstring;
private string _image;
public string Image
    get { return _image; }
    set { _image = value; }
private string _buttonString;
public string ButtonString
    get { return _buttonString; }
    set { _buttonString = value; }
private string _labelstring;
public string LabelString
    get { return _labelstring; }
    set { _labelstring = value; }



Multiple items to the single carousel


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.

Up arrow icon

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

Live Chat Icon For mobile