Populating Data in .NET MAUI Carousel View (SfCarousel)

The SfCarousel control supports binding to various item sources, such as IList and ObservableCollection.

Through Binding

Items can be populated in the SfCarousel control by binding an item source and applying a custom template, as explained below.

Create a Model with Data

The SfCarousel items can be populated with a collection of image data. For example, a user may want to create an SfCarousel control to display a list of images.

The SfCarousel model is structured as follows.

C#

namespace CarouselSample
{
    public class GalleryModel
    {
        public GalleryModel(string imageString)
        {
            ImageName = imageString;
        }
        private string _imageName;

        public string ImageName
        {
            get { return _imageName; }
            set { _imageName = value; }
        }
    }
}

Populate the SfCarousel items collection in the ViewModel with the image data.

C#

using System.Collections.Generic;

namespace CarouselSample
{
    public class GalleryViewModel
    {
        public GalleryViewModel()
        {
            ImageCollection.Add(new GalleryModel("carousel_person1.png"));
            ImageCollection.Add(new GalleryModel("carousel_person2.png"));
            ImageCollection.Add(new GalleryModel("carousel_person3.png"));
            ImageCollection.Add(new GalleryModel("carousel_person4.png"));
            ImageCollection.Add(new GalleryModel("carousel_person5.png"));
        }
        private List<GalleryModel> imageCollection = new List<GalleryModel>();
        public List<GalleryModel> ImageCollection
        {
            get { return imageCollection; }
            set { imageCollection = value; }
        }
    }
}

Binding the Data with Custom Template

The SfCarousel supports adding custom views as carousel items by designing a view inside its ItemTemplate. This template will be applied to all items, with data bound accordingly.

XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:carousel="clr-namespace:Syncfusion.Maui.Toolkit.Carousel;assembly=Syncfusion.Maui.Toolkit"
             xmlns:local="clr-namespace:CarouselSample"
             x:Class="CarouselSample.MainPage">
    <ContentPage.BindingContext>
        <local:GalleryViewModel/>
    </ContentPage.BindingContext>
    <ContentPage.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="itemTemplate">
                <Image Source="{Binding ImageName}" 
                       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>

C#

using Syncfusion.Maui.Toolkit.Carousel;

namespace CarouselSample
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            GalleryViewModel galleryViewModel = new GalleryViewModel();

            SfCarousel carousel = new SfCarousel()
            {
                HeightRequest = 400,
                WidthRequest = 800
            };

            var itemTemplate = new DataTemplate(() =>
            {
                var grid = new Grid();
                var nameLabel = new Image();
                nameLabel.SetBinding(Image.SourceProperty, "ImageName");
                grid.Children.Add(nameLabel);
                return grid;
            });

            carousel.BindingContext = galleryViewModel;
            carousel.ItemTemplate = itemTemplate;
            carousel.SetBinding(SfCarousel.ItemsSourceProperty, "ImageCollection");

            this.Content = carousel;
        }
    }
}