Getting Started with .NET MAUI Carousel (SfCarousel)

19 Dec 20237 minutes to read

This section explains how to add the Carousel control and bind data to it. This section covers only the basic features needed to get started with the Syncfusion .NET MAUI Carousel control.

Adding a .NET MAUI Carousel reference

The Syncfusion .NET MAUI controls are available in Nuget.org. To add .NET MAUI Carousel to your project, open the NuGet package manager in Visual Studio, search for Syncfusion.Maui.Carousel, and install it.

Handler registration

In the MauiProgram.cs file, register the handler for the Syncfusion core.

C#

using Microsoft.Maui;
using Microsoft.Maui.Hosting;
using Microsoft.Maui.Controls.Compatibility;
using Microsoft.Maui.Controls.Hosting;
using Microsoft.Maui.Controls.Xaml;
using Syncfusion.Maui.Core.Hosting;

namespace CarouselSample
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
            .UseMauiApp<App>()
            .ConfigureSyncfusionCore()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

            return builder.Build();
        }      
    }
}

Adding the .NET MAUI Carousel control

Step 1: Add the NuGet to the project as discussed in the above reference section.

Step 2: Add the namespace as shown in the following code sample.

XAML

xmlns:syncfusion="clr-namespace:Syncfusion.Maui.Carousel;assembly=Syncfusion.Maui.Carousel"

C#

using Syncfusion.Maui.Carousel;

Initialize Carousel

Now, add the SfCarousel control with a required optimal name using the included namespace.

XAML

<syncfusion:SfCarousel />

C#

SfCarousel carousel = new SfCarousel();
this.Content = carousel;

Add Carousel Items

We can populate the carousel’s items by using any one of the following ways,

• Through SfCarouselItem

• Through ItemTemplate

The below is an simple example for adding Carousel items using SfCarouselItem, for more details on populating data click Here

The following code example illustrates how to create a list of Images in Carousel,

C#

public class CarouselViewModel
{
    public ObservableCollection<SfCarouselItem> CarouselItems;
    public CarouselViewModel()
    {
        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" });
    }
}

The following code example illustrates how to add the collection in Carousel,

XAML

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:carousel="clr-namespace:Syncfusion.Maui.Carousel;assembly=Syncfusion.Maui.Carousel"
             xmlns:local="clr-namespace:CarouselSample"
             x:Class="CarouselSample.MainPage">
             
    <ContentPage.BindingContext>
        <local:CarouselViewModel/>
    </ContentPage.BindingContext>

    <carousel:SfCarousel x:Name="carousel"
                         ItemsSource="{Binding CarouselItems}"/>
</ContentPage>

C#

using Syncfusion.Maui.Carousel;
using System.Collections.ObjectModel;

namespace CarouselSample
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            CarouselViewModel carouselViewModel = new CarouselViewModel();
            SfCarousel carousel = new SfCarousel();

            carousel.BindingContext = carouselViewModel;
            carousel.SetBinding(SfCarousel.ItemsSourceProperty, "CarouselItems");

            this.Content = carousel;
        }
    }
}

Setting the height and width of the carousel item

ItemHeight and ItemWidth properties are used to change the height and width of carouselItem in carousel panel.

XAML

<carousel:SfCarousel x:Name="carousel"
                     ItemsSource="{Binding CarouselItems}"
                     ItemHeight="170"
                     ItemWidth="270"/>

C#

SfCarousel carousel = new SfCarousel()
{
    ItemWidth = 170,
    ItemHeight = 250
};

carousel.SetBinding(SfCarousel.ItemsSourceProperty, "CarouselItems");

Set Desire Item to be Selected

We can bring particular item to the center of the screen using SelectedIndex property in SfCarousel control.

XAML

<carousel:SfCarousel x:Name="carousel"
                     ItemsSource="{Binding CarouselItems}"
                     ItemHeight="170"
                     ItemWidth="270"
                     SelectedIndex="4"/>

C#

SfCarousel carousel = new SfCarousel()
{
    ItemWidth = 170,
    ItemHeight = 250,
    SelectedIndex = 4,
};

carousel.SetBinding(SfCarousel.ItemsSourceProperty, "CarouselItems");

NOTE

The SelectedIndex property will be 0 by default.

NOTE

You can find the complete getting started sample from this link.