)
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 handle the numerous data in carousel using LoadMore options

Platform: Xamarin.iOS |
Control: SfCarousel |
Published Date: June 29, 2018 |
Last Revised Date: June 24, 2019

Carousel control provides the virtualization support to handle the numerous data. It has been achieved by one of the LoadMore options. In that LoadMore , instead of loading all data, it will split that using LoadMoreItemsCount and render that into our view with LoadMore view. By the way of tapping that LoadMore view (By default there will be LoadMore Label, we have option to customize that LoadMore view), it will another set of items with previous loaded data.

 

Properties are used to achieve LoadMore options

 

Properties

Data Type

Default Value

Usage

AllowLoadMore

Boolean

false

Enable or disable LoadMore options in carousel control

LoadMoreItemsCount

int

3

It will intimate the number of items will be in carousel view.

LoadMoreView

UIView

null

We can customize the LoadMore view by using this property.

ItemsSource

IEnumerable

null

To load the custom class collection of instead of collection of SfCarouselItem

 

Note:

DrawView event is used to pass the custom view into your carousel view. It holds the following arguments.

 

  1. Index – Gets the indexed of carousel item.
  2. View – Gets and Sets the custom view of carousel’s item.
  3. Item – Gets the indexed carousel item.

 

The following code example illustrates the way to use the LoadMore feature on carousel control.

 

In ViewDidLoad:

 

C#

  public override void ViewDidLoad()
{
    base.ViewDidLoad();
    SFCarousel sfCarousel = new SFCarousel();
    sfCarousel.Frame = new CoreGraphics.CGRect(0, 150, 400, 400);
    ObservableCollection<string> list = new ObservableCollection<string>();
    for (int i = 1; i < 100000; i++)
    {
        list.Add("Item " + i.ToString());
    }
    sfCarousel.ItemWidth = 150;
    sfCarousel.ItemHeight = 150;
    sfCarousel.AllowLoadMore = true;
    sfCarousel.LoadMoreItemsCount = 4;
    UILabel loadmore1 = new UILabel() { TextColor = UIColor.White, Text = "Load More...", Font = UIFont.FromName("Helvetica-Bold", 13f), TextAlignment = UITextAlignment.Center };
    UIView loadView1 = new UIView();
    loadView1.BackgroundColor = UIColor.Red;
    loadmore1.Frame = new CoreGraphics.CGRect(12, 61, 150, 17);
    loadView1.AddSubview(loadmore1);
    sfCarousel.LoadMoreView = loadView1;
    sfCarousel.ViewMode = SFCarouselViewMode.SFCarouselViewModeLinear;
    sfCarousel.ItemsSource = list;
    sfCarousel.DrawView += (object sender, DrawViewEventArgs e) =>
    {
        UIView carouselView = new UIView();
        carouselView.BackgroundColor = UIColor.Red;
        carouselView.Frame = new CoreGraphics.CGRect(0, 0, 150, 150);
        UILabel iconLabel = new UILabel();
        iconLabel.Frame = new CoreGraphics.CGRect(35, 30, 80, 80);
        iconLabel.Text = (sfCarousel.ItemsSource as ObservableCollection<string>)[e.Index];
        iconLabel.TextColor = UIColor.White;
        iconLabel.TextAlignment = UITextAlignment.Center;
        carouselView.AddSubview(iconLabel);
        e.View = carouselView;
 
    };
    View.AddSubview(sfCarousel);
    // Perform any additional setup after loading the view, typically from a nib.
}

 

 

Sample:

 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/LoadMoreSampleiOS717074124

 

Output Will Be Like,

 

CarouselItem

 

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