)
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 load items dynamically in Carousel

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

 

To load the items dynamically in carousel, follow the given steps,

 

Step1: Create carousel control with adding necessary assemblies

 

Please refer the following Knowledge base link to create a carousel control in Xamarin,

 

In xamarin.Forms Android

 

https://www.syncfusion.com/kb/7471/how-to-create-carousel-sample-in-xamarin-forms-android-platform

 

In Xamarin.Forms iOS

 

https://www.syncfusion.com/kb/7470/how-to-create-carousel-sample-in-xamarin-forms-ios-platform

 

In Xamarin.Forms UWP

 

https://www.syncfusion.com/kb/7468/how-to-create-carousel-sample-in-xamarin-forms-uwp-platform

 

Step 2: You can handle the any of events (For example: Button_Click_Event) and added more items in the Collection of carousel.

 

It has been achieved in any of the following two ways,

 

  1. Using CarouselItem
  2. Using ItemTemplate

 

 

Using CarouselItem:

 

C#

public partial class KBSolutionPage : ContentPage
{
public KBSolutionPage()
{
    InitializeComponent();
 
    Grid layout = new Grid();
 
    layout.RowDefinitions.Add(new RowDefinition() { Height = 40 });
    layout.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Star });
    layout.RowDefinitions.Add(new RowDefinition() { Height = 20 });
 
    Button dynamicAddition = new Button() { Text = "Add Dynamic", WidthRequest = 50 };
    SfCarousel sfCarousel = new SfCarousel();
 
    Label countLabel = new Label() { Text = "Count:5", HorizontalOptions = LayoutOptions.Center, FontSize = 20, TextColor = Color.Red };
 
    if (Device.OS == TargetPlatform.Android)
    {
        sfCarousel.ItemWidth = 170;
        sfCarousel.ItemHeight = 250;
    }
    if (Device.OS == TargetPlatform.iOS)
    {
        sfCarousel.ItemWidth = 150;
        sfCarousel.ItemHeight = 300;
    }
    ObservableCollection<SfCarouselItem> collectionOfItems = new ObservableCollection<SfCarouselItem>();
 
    for (int i = 0; i < 7; i++)
    {
        collectionOfItems.Add(new SfCarouselItem() { ImageName = "image" + (i + 1) + ".png" });
    }
    carousel.DataSource = collectionOfItems;
 
    layout.Children.Add(dynamicAddition, 0, 0);
    layout.Children.Add(carousel, 0, 1);
    layout.Children.Add(countLabel, 0, 2);
 
    this.Content = layout;
 
    dynamicAddition.Clicked += (object sender, EventArgs e) =>
    {
        for (int i = collectionOfItems.Count; i < 9; i++)
        {
            collectionOfItems.Add(new SfCarouselItem() { ImageName = "image" + (i + 1) + ".png" });
        }
        carousel.DataSource = collectionOfItems;
 
        countLabel.Text = "Count:" + collectionOfItems.Count.ToString();
 
    };
}
}

 

Using ItemTemplate:

 

C#

public partial class KBSolutionPage : ContentPage
{
public KBSolutionPage()
{
    InitializeComponent();
 
    Grid layout = new Grid();
 
    layout.RowDefinitions.Add(new RowDefinition() { Height = 40 });
    layout.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Star });
    layout.RowDefinitions.Add(new RowDefinition() { Height = 20 });
 
    Button dynamicAddition = new Button() { Text = "Add Dynamic", WidthRequest = 50 };
    SfCarousel sfCarousel = new SfCarousel();
 
    Label countLabel = new Label() { Text = "Count:5", HorizontalOptions = LayoutOptions.Center, FontSize = 20, TextColor = Color.Red };
 
    if (Device.OS == TargetPlatform.Android)
    {
        sfCarousel.ItemWidth = 170;
        sfCarousel.ItemHeight = 250;
    }
    if (Device.OS == TargetPlatform.iOS)
    {
        sfCarousel.ItemWidth = 150;
        sfCarousel.ItemHeight = 300;
    }
 
    var people = new ObservableCollection<CarouselModel> {
            new CarouselModel ("image1.png"),
            new CarouselModel ("image2.png"),
            new CarouselModel ("image3.png"),
            new CarouselModel ("image4.png"),
            new CarouselModel ("image5.png")
        };
    var personDataTemplate = new DataTemplate(() =>
    {
        var grid = new Grid();
        var nameLabel = new Image();
        nameLabel.SetBinding(Image.SourceProperty, "Image");
        grid.Children.Add(nameLabel);
        return grid;
    });
 
    sfCarousel.ItemTemplate = personDataTemplate;
    sfCarousel.DataSource = people;
 
    layout.Children.Add(dynamicAddition, 0, 0);
    layout.Children.Add(carousel, 0, 1);
    layout.Children.Add(countLabel, 0, 2);
 
    this.Content = layout;
 
    dynamicAddition.Clicked += (object sender, EventArgs e) =>
    {
        people.Add(new CarouselModel("movie1.png"));
        people.Add(new CarouselModel("movie2.png"));
        people.Add(new CarouselModel("movie3.png"));
        people.Add(new CarouselModel("movie4.png"));
        countLabel.Text = "Count:" + people.Count.ToString();
 
    };
 
}
}
public class CarouselModel
{
public CarouselModel(string imagestr)
{
    Image = imagestr;
}
private string _image;
 
public string Image
{
    get { return _image; }
    set { _image = value; }
}
}

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