Populating Data in Xamarin Carousel View (SfCarousel)
22 Aug 202214 minutes to read
SfCarousel
control, supports binding to different data sources such as IList Data Source, Observable Collection Data Source.
Through Binding
Items can be populated in SfCarousel
control through data source and applying custom template as explained below.
Create a Model with Data
SfCarousel
items can be populated with a collection of image data. For example, a user may wants to create a SfCarousel
control which will display a list of images.
The SfCarousel
model looks as follows.
namespace CarouselSample
{
public class CarouselModel
{
public CarouselModel(string imageString)
{
Image = imageString;
}
private string _image;
public string Image
{
get { return _image; }
set { _image = value; }
}
}
}
Populate carousel items collection in View model with the image data. The below code works when the images are placed within the application folder for Android, iOS and UWP with build action Android Resource, Bundled Resource and Content respectively.
using System.Collections.Generic;
namespace CarouselSample
{
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; }
}
}
}
NOTE
Images can also be referred in PCL and from website URL as instructed
Binding the Data with Custom Template
SfCarousel
provides support to add a custom view as carousel items by designing a view inside its ItemTemplate
. This template will be applied for all its items and its data will be binded.
<?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}"
HeightRequest="400"
WidthRequest="800" />
</ContentPage.Content>
</ContentPage>
using Syncfusion.SfCarousel.XForms;
using System.Collections.Generic;
using Xamarin.Forms;
namespace CarouselSample
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
CarouselViewModel carouselViewModel = new CarouselViewModel();
SfCarousel carousel = new SfCarousel()
{
HeightRequest = 400,
WidthRequest = 800
};
var itemTemplate = new DataTemplate(() =>
{
var grid = new Grid();
var nameLabel = new Image();
nameLabel.SetBinding(Image.SourceProperty, "Image");
grid.Children.Add(nameLabel);
return grid;
});
carousel.ItemTemplate = itemTemplate;
carousel.ItemsSource = carouselViewModel.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; }
}
}
}
- Now set the
BindingContext
for the items collection in code behind.
carousel.BindingContext = new CarouselViewModel();
Through Carousel Item
Different set of views can be provided to every items through ItemContent
property available in SfCarouselItem
class.
using Syncfusion.SfCarousel.XForms;
using System.Collections.ObjectModel;
using Xamarin.Forms;
namespace CarouselSample
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
SfCarousel carousel = new SfCarousel()
{
ItemWidth = 170,
ItemHeight = 250
};
ObservableCollection<SfCarouselItem> carouselItems = new ObservableCollection<SfCarouselItem>();
carouselItems.Add(new SfCarouselItem() { ItemContent = new Image() { Source = "carousel_person1.png", Aspect = Aspect.Fill } });
carouselItems.Add(new SfCarouselItem() { ItemContent = new Image() { Source = "carousel_person2.png", Aspect = Aspect.Fill } });
carouselItems.Add(new SfCarouselItem() { ItemContent = new Image() { Source = "carousel_person3.png", Aspect = Aspect.Fill } });
carouselItems.Add(new SfCarouselItem() { ItemContent = new Image() { Source = "carousel_person4.png", Aspect = Aspect.Fill } });
carouselItems.Add(new SfCarouselItem() { ItemContent = new Image() { Source = "carousel_person5.png", Aspect = Aspect.Fill } });
carousel.ItemsSource = carouselItems;
this.Content = carousel;
}
}
}
and also carousel provides a support to display only the Image data with Image
property in SfCarouselItem
class.
using Syncfusion.SfCarousel.XForms;
using System.Collections.ObjectModel;
using Xamarin.Forms;
namespace CarouselSample
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
SfCarousel carousel = new SfCarousel()
{
ItemWidth = 170,
ItemHeight = 250
};
ObservableCollection<SfCarouselItem> carouselItems = new ObservableCollection<SfCarouselItem>();
carouselItems.Add(new SfCarouselItem() { ImageName = "carousel_person1.png" });
carouselItems.Add(new SfCarouselItem() { ImageName = "carousel_person2.png" });
carouselItems.Add(new SfCarouselItem() { ImageName = "carousel_person3.png" });
carouselItems.Add(new SfCarouselItem() { ImageName = "carousel_person4.png" });
carouselItems.Add(new SfCarouselItem() { ImageName = "carousel_person5.png" });
carousel.ItemsSource = carouselItems;
this.Content = carousel;
}
}
}
Similar way every item can be created and customized in case of different carousel item view is needed.