Category / Section
How to load items dynamically in Carousel
2 mins read
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; }
}
}
|
