Load More in Xamarin Carousel View (SfCarousel)
22 Aug 202224 minutes to read
Virtualization can be achieved by using the Load more concept. This support is used to handle the numerous items in the carousel control. A particular items are maintained in the view port based on the LoadMoreItemsCount
property. The LoadMore view is added after the last item in the collection of carousel view. When tapping the LoadMore view, the next set of items in the collection can be added to the carousel.
The following properties are used to achieve this support:
AllowLoadMore
By enabling the AllowLoadMore
property, the LoadMore support works in the carousel view.
NOTE
The default value of the
AllowLoadMore
property is false.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:carousel="clr-namespace:Syncfusion.SfCarousel.XForms;assembly=Syncfusion.SfCarousel.XForms"
xmlns:local="clr-namespace:CarouselSample"
x:Class="CarouselSample.MainPage">
<ContentPage.BindingContext>
<local:CarouselViewModel />
</ContentPage.BindingContext>
<ContentPage.Resources>
<ResourceDictionary>
<DataTemplate x:Key="itemTemplate">
<Image Source="{Binding Image}"
Aspect="AspectFit"/>
</DataTemplate>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<carousel:SfCarousel x:Name="carousel"
ItemTemplate="{StaticResource itemTemplate}"
ItemsSource="{Binding ImageCollection}"
ItemHeight="200"
ItemWidth="200"
ItemSpacing="2"
AllowLoadMore="True"
ViewMode="Linear">
</carousel:SfCarousel>
</ContentPage.Content>
</ContentPage>
using Syncfusion.SfCarousel.XForms;
using System.Collections.Generic;
using Xamarin.Forms;
namespace CarouselSample
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
this.BindingContext = new CarouselViewModel();
SfCarousel carousel = new SfCarousel()
{
ItemHeight = 200,
ItemWidth = 200,
ItemSpacing = 2,
AllowLoadMore = true,
ViewMode = ViewMode.Linear
};
carousel.ItemTemplate = new DataTemplate(() =>
{
Image image = new Image();
image.SetBinding(Image.SourceProperty, "Image");
image.Aspect = Aspect.AspectFit;
return image;
});
carousel.SetBinding(SfCarousel.ItemsSourceProperty, "ImageCollection");
this.Content = carousel;
}
}
public class CarouselModel
{
public CarouselModel(string imageString)
{
Image = imageString;
}
private string _image;
public string Image
{
get { return _image; }
set { _image = value; }
}
}
public class CarouselViewModel
{
public CarouselViewModel()
{
ImageCollection.Add(new CarouselModel("carousel_person1.png"));
ImageCollection.Add(new CarouselModel("carousel_person2.png"));
ImageCollection.Add(new CarouselModel("carousel_person3.png"));
ImageCollection.Add(new CarouselModel("carousel_person4.png"));
ImageCollection.Add(new CarouselModel("carousel_person5.png"));
}
private List<CarouselModel> imageCollection = new List<CarouselModel>();
public List<CarouselModel> ImageCollection
{
get { return imageCollection; }
set { imageCollection = value; }
}
}
}
LoadMoreItemsCount
Number of items can be maintained in the carousel control by using the LoadMoreItemsCount
property. By using the LoadMoreItemsCount
property, numerous items can be separated.
NOTE
The default value of the
LoadMoreItemsCount
property is 3.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:LoadMore"
x:Class="LoadMore.MainPage"
xmlns:carousel="clr-namespace:Syncfusion.SfCarousel.XForms;assembly=Syncfusion.SfCarousel.XForms">
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:carousel="clr-namespace:Syncfusion.SfCarousel.XForms;assembly=Syncfusion.SfCarousel.XForms"
xmlns:local="clr-namespace:CarouselSample"
x:Class="CarouselSample.MainPage">
<ContentPage.BindingContext>
<local:CarouselViewModel />
</ContentPage.BindingContext>
<ContentPage.Resources>
<ResourceDictionary>
<DataTemplate x:Key="itemTemplate">
<Image Source="{Binding Image}"
Aspect="AspectFit"/>
</DataTemplate>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<carousel:SfCarousel x:Name="carousel"
ItemTemplate="{StaticResource itemTemplate}"
ItemsSource="{Binding ImageCollection}"
ItemHeight="200"
ItemWidth="200"
ItemSpacing="2"
AllowLoadMore="True"
ViewMode="Linear"
LoadMoreItemsCount="2">
</carousel:SfCarousel>
</ContentPage.Content>
</ContentPage>
using Syncfusion.SfCarousel.XForms;
using System.Collections.Generic;
using Xamarin.Forms;
namespace CarouselSample
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
this.BindingContext = new CarouselViewModel();
SfCarousel carousel = new SfCarousel()
{
ItemHeight = 200,
ItemWidth = 200,
ItemSpacing = 2,
AllowLoadMore = true,
LoadMoreItemsCount = 2,
ViewMode = ViewMode.Linear
};
carousel.ItemTemplate = new DataTemplate(() =>
{
Image image = new Image();
image.SetBinding(Image.SourceProperty, "Image");
image.Aspect = Aspect.AspectFit;
return image;
});
carousel.SetBinding(SfCarousel.ItemsSourceProperty, "ImageCollection");
this.Content = carousel;
}
}
public class CarouselModel
{
public CarouselModel(string imageString)
{
Image = imageString;
}
private string _image;
public string Image
{
get { return _image; }
set { _image = value; }
}
}
public class CarouselViewModel
{
public CarouselViewModel()
{
ImageCollection.Add(new CarouselModel("carousel_person1.png"));
ImageCollection.Add(new CarouselModel("carousel_person2.png"));
ImageCollection.Add(new CarouselModel("carousel_person3.png"));
ImageCollection.Add(new CarouselModel("carousel_person4.png"));
ImageCollection.Add(new CarouselModel("carousel_person5.png"));
}
private List<CarouselModel> imageCollection = new List<CarouselModel>();
public List<CarouselModel> ImageCollection
{
get { return imageCollection; }
set { imageCollection = value; }
}
}
}
LoadMoreView
Custom view can be passed instead of the LoadMore
label by using the LoadMoreView
property.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:carousel="clr-namespace:Syncfusion.SfCarousel.XForms;assembly=Syncfusion.SfCarousel.XForms"
xmlns:local="clr-namespace:CarouselSample"
x:Class="CarouselSample.MainPage">
<ContentPage.BindingContext>
<local:CarouselViewModel />
</ContentPage.BindingContext>
<ContentPage.Resources>
<ResourceDictionary>
<DataTemplate x:Key="itemTemplate">
<Image Source="{Binding Image}"
Aspect="AspectFit"/>
</DataTemplate>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<carousel:SfCarousel x:Name="carousel"
ItemTemplate="{StaticResource itemTemplate}"
ItemsSource="{Binding ImageCollection}"
ItemHeight="200"
ItemWidth="200"
ItemSpacing="2"
AllowLoadMore="True"
ViewMode="Linear"
LoadMoreItemsCount="2">
<carousel:SfCarousel.LoadMoreView>
<Grid BackgroundColor="#FFFFFFFF">
<Label
Text="Load More..."
FontSize="14"
TextColor="#FF000000"
FontAttributes="Bold"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
HorizontalOptions="Center"
VerticalOptions="Center"/>
</Grid>
</carousel:SfCarousel.LoadMoreView>
</carousel:SfCarousel>
</ContentPage.Content>
</ContentPage>
using Syncfusion.SfCarousel.XForms;
using System.Collections.Generic;
using Xamarin.Forms;
namespace CarouselSample
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
this.BindingContext = new CarouselViewModel();
SfCarousel carousel = new SfCarousel()
{
ItemHeight = 200,
ItemWidth = 200,
ItemSpacing = 2,
AllowLoadMore = true,
LoadMoreItemsCount = 2,
ViewMode = ViewMode.Linear
};
carousel.ItemTemplate = new DataTemplate(() =>
{
Image image = new Image();
image.SetBinding(Image.SourceProperty, "Image");
image.Aspect = Aspect.AspectFit;
return image;
});
carousel.SetBinding(SfCarousel.ItemsSourceProperty, "ImageCollection");
Grid grid = new Grid()
{
BackgroundColor = Color.White
};
Label label = new Label()
{
Text = "Load More...",
FontSize = 14,
TextColor = Color.Black,
FontAttributes = FontAttributes.Bold,
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center,
HorizontalTextAlignment = TextAlignment.Center,
VerticalTextAlignment = TextAlignment.Center
};
grid.Children.Add(label);
carousel.LoadMoreView = grid;
this.Content = carousel;
}
}
public class CarouselModel
{
public CarouselModel(string imageString)
{
Image = imageString;
}
private string _image;
public string Image
{
get { return _image; }
set { _image = value; }
}
}
public class CarouselViewModel
{
public CarouselViewModel()
{
ImageCollection.Add(new CarouselModel("cart.png"));
ImageCollection.Add(new CarouselModel("cart.png"));
ImageCollection.Add(new CarouselModel("cart.png"));
ImageCollection.Add(new CarouselModel("cart.png"));
ImageCollection.Add(new CarouselModel("cart.png"));
}
private List<CarouselModel> imageCollection = new List<CarouselModel>();
public List<CarouselModel> ImageCollection
{
get { return imageCollection; }
set { imageCollection = value; }
}
}
}
You can find the complete Load More sample from this link.
LoadMore method
To load more items programmatically, LoadMore
method can be called which loads the items dynamically to the UI based on the LoadMoreItemsCount
API value.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:CarouselSample"
xmlns:carousel="clr-namespace:Syncfusion.SfCarousel.XForms;assembly=Syncfusion.SfCarousel.XForms"
x:Class="CarouselSample.MainPage">
<ContentPage.BindingContext>
<local:CarouselViewModel/>
</ContentPage.BindingContext>
<ContentPage.Resources>
<ResourceDictionary>
<DataTemplate x:Key="itemTemplate">
<Image Source="{Binding Image}"
Aspect="AspectFit"/>
</DataTemplate>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout>
<carousel:SfCarousel x:Name="carousel"
ItemTemplate="{StaticResource itemTemplate}"
ItemsSource="{Binding ImageCollection}"
ItemWidth="150"
ViewMode="Default"
LoadMoreItemsCount="2"
ItemHeight="150"
/>
<Button Text="LoadMore Method"
Clicked="Button_Clicked"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
using System;
using System.Collections.Generic;
using Xamarin.Forms;
namespace CarouselSample
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
private void Button_Clicked(object sender, EventArgs e)
{
carousel.LoadMore();
}
}
public class CarouselModel
{
public CarouselModel(string imagestr)
{
Image = imagestr;
}
private string _image;
public string Image
{
get { return _image; }
set { _image = value; }
}
}
public class CarouselViewModel
{
public CarouselViewModel()
{
ImageCollection.Add(new CarouselModel("image1.png"));
ImageCollection.Add(new CarouselModel("image2.png"));
ImageCollection.Add(new CarouselModel("image3.png"));
ImageCollection.Add(new CarouselModel("image4.png"));
ImageCollection.Add(new CarouselModel("image5.png"));
}
private List<CarouselModel> imageCollection = new List<CarouselModel>();
public List<CarouselModel> ImageCollection
{
get { return imageCollection; }
set { imageCollection = value; }
}
}
}