How to create a .NET MAUI Carousel (SfCarousel)?
This article demonstrates how to create a .NET MAUI Carousel application.
Step 1: Install the Syncfusion.Maui.Carousel NuGet package and add the namespace for Carousel.
XAML:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Carousel"
xmlns:carousel="clr-namespace:Syncfusion.Maui.Carousel;assembly=Syncfusion.Maui.Carousel"
x:Class="Carousel.MainPage">
Step 2: Initialize the .NET MAUI Carousel in XAML.
XAML:
<carousel:SfCarousel />
Step 3: Add Carousel Items.
We can populate the carousel’s items using either CarouselItem or ItemTemplate.
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.
C#
<ContentPage.BindingContext>
<local:CarouselViewModel/>
</ContentPage.BindingContext>
<carousel:SfCarousel x:Name="carousel"
ItemsSource="{Binding CarouselItems}"/>
Output:
Download the complete sample from GitHub.
Conclusion
I hope you enjoyed learning how to create a .NET MAUI Carousel.
You can refer to our .NET MAUI Carousel feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Carousel documentation to understand how to present and manipulate data.
For current customers, check out our .NET MAUI components on the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to explore our .NET MAUI Navigation Drawer and other .NET MAUI components.
Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal, or the feedback portal. We are always happy to assist you!