How to load items dynamically in Carousel
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,
- Using CarouselItem
- 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; } } }
|