)
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: June 24, 2019).
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 |
Published Date: March 23, 2017 |
Last Revised Date: June 24, 2019

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()
{
    InitializeComponent();
 
    //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");
        stack.Children.Add(nameButton);
        stack.Children.Add(nameImage);
        stack.Children.Add(nameLabel);
        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; }
}
}
 

 

Output:

Multiple items to the single carousel

 

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
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
Live Chat Icon