How to Render Multiple Items in .NET MAUI Carousel

This section explains how to render multiple items within a single .NET MAUI Carousel item. We achieve this by adding various controls to a parent layout and assigning it as the content of each carousel item. Using the ItemTemplate property, you can add controls such as Image, Button, and Label to the parent layout and assign it as the ItemTemplate view.

C#

Model

class CarouselModel 
{
    public CarouselModel(string imagestr, string buttonstring, string labelstring)
    {
        Image = imagestr;
        ButtonString = buttonstring;
        LabelString = labelstring;
    }
    public string Image { get; set; }
    public string ButtonString { get; set; }
    public string LabelString { get; set; }  
 }

C#

 public MainPage() 
 {
     InitializeComponent();
     SfCarousel sfCarousel = new SfCarousel();     
     var carouselModel = new List<CarouselModel> 
     {
        new CarouselModel("image1.png","Button1","Label1" ),
        new CarouselModel ("image2.png","Button2","Label2"),
        new CarouselModel ("image3.png","Button3","Label3"),
        new CarouselModel ("image4.png","Button4","Label4"),
        new CarouselModel ("image5.png","Button5","Label5") 
     };
     var carouselModelDataTemplate = new DataTemplate(() =>
     {
         var stack = new StackLayout();
         var nameImage = new Image();
         nameImage.SetBinding(Image.SourceProperty, "Image");
         var nameButton = new Button() { BackgroundColor = Colors.Transparent,TextColor = Colors.Blue };
         nameButton.SetBinding(Button.TextProperty, "ButtonString");
         var nameLabel = new Label() { TextColor = Colors.Red,HorizontalTextAlignment = TextAlignment.Center };
         nameLabel.SetBinding(Label.TextProperty, "LabelString");
         stack.Children.Add(nameButton);
         stack.Children.Add(nameImage);
         stack.Children.Add(nameLabel);
         return stack;
     });
     sfCarousel.ItemTemplate = carouselModelDataTemplate;
     sfCarousel.ItemsSource = carouselModel;
     this.Content = sfCarousel;
 }

You can download the complete sample in GitHub
Output

Conclusion
I hope you enjoyed learning how to render multiple items in the .NET MAUI Carousel.

Refer to our .NET MAUI Carousel feature tour page to learn about its other groundbreaking feature representations. You can 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 following comments section if you have any queries or require clarifications. 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!