Getting Started with the .NET MAUI Carousel

Updated on Nov 9, 2026

This guide provides the information you need to start using the Telerik UI for .NET MAUI Carousel by adding the control to your project.

At the end, you will achieve the following result.

Prerequisites

Before adding the Carousel, complete the following steps:

1. Set up your .NET MAUI application.

2. Set Up Telerik Development Environment

Define the Carousel

The Carousel displays the items from its ItemsSource collection and uses the ItemTemplate to define how each item looks. Items in the collection must not be null.

To display the Carousel on a page, complete the following steps:

1. Define a business object that describes each item:

   C#

   public class CarouselItem
   {
       public string Title { get; set; }
   
       public string Description { get; set; }
   
       public string Image { get; set; }
   
       public bool IsNewDish { get; set; }
   }

2. Define a view model that exposes the collection of items:

   C#

   public class CarouselViewModel
   {
       public ObservableCollection<CarouselItem> Items { get; } = new()
       {
           new CarouselItem
           {
               Title = "Blueberry Pancakes",
               Description = "Dutch baby pancake with fresh blueberries, orange zest, and a drizzle of maple syrup.",
               Image = "carousel_firstlook_1.jpg",
               IsNewDish = true
           },
           new CarouselItem
           {
               Title = "Bolognese",
               Description = "Slow-simmered ragù with hand-pulled spaghetti, topped with micro herbs.",
               Image = "carousel_firstlook_2.jpg",
               IsNewDish = false
           },
           new CarouselItem
           {
               Title = "Spaghetti",
               Description = "Fresh spaghetti with San Marzano tomato sauce and garden basil.",
               Image = "carousel_firstlook_3.jpg",
               IsNewDish = false
           },
           new CarouselItem
           {
               Title = "Lemon Herb Chicken",
               Description = "Herb-crusted chicken with lemon butter sauce and roasted vegetables.",
               Image = "carousel_firstlook_4.jpg",
               IsNewDish = true
           },
           new CarouselItem
           {
               Title = "Fine Dining",
               Description = "Delicate tartare with edible flowers, micro greens, and golden carrot purée.",
               Image = "carousel_firstlook_5.jpg",
               IsNewDish = false
           },
           new CarouselItem
           {
               Title = "Raspberry Cake",
               Description = "Raspberry coulis over a rich cheesecake with fresh berries.",
               Image = "carousel_firstlook_6.jpg",
               IsNewDish = true
           },
           new CarouselItem
           {
               Title = "Salmon Canapues",
               Description = "Smoked salmon on crispy toasts with cream cheese and dill.",
               Image = "carousel_firstlook_7.jpg",
               IsNewDish = false
           },
           new CarouselItem
           {
               Title = "Shrimp Fettuccine",
               Description = "Tiger prawns tossed with fettuccine in a light garlic cream sauce.",
               Image = "carousel_firstlook_8.jpg",
               IsNewDish = true
           }
       };
   }

3. Add the Carousel to your page:

   XAML

   <ContentView.BindingContext>
       <local:CarouselViewModel />
   </ContentView.BindingContext>
   <telerik:RadCarousel ItemsSource="{Binding Items}"
                        VerticalOptions="Center">
       <telerik:RadCarousel.ItemTemplate>
           <DataTemplate x:DataType="local:CarouselItem">
               <Image Source="{Binding Image}" Aspect="AspectFill" />
           </DataTemplate>
       </telerik:RadCarousel.ItemTemplate>
   </telerik:RadCarousel>

   C#

   var carousel = new RadCarousel
   {
       VerticalOptions = LayoutOptions.Center,
       ItemsSource = new CarouselViewModel().Items,
       ItemTemplate = new DataTemplate(() =>
       {
           var image = new Image { Aspect = Aspect.AspectFill };
           image.SetBinding(Image.SourceProperty, nameof(CarouselItem.Image));
           return image;
       })
   };

4. Add the telerik namespace:

   XAML

   xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

5. Register the Telerik controls through the Telerik.Maui.Controls.Compatibility.UseTelerik extension method called inside the CreateMauiApp method of the MauiProgram.cs file of your project:

   C#

   using Telerik.Maui.Controls.Compatibility;
   
   public static class MauiProgram
   {
       public static MauiApp CreateMauiApp()
       {
           var builder = MauiApp.CreateBuilder();
           builder
               .UseTelerik()
               .UseMauiApp<App>()
               .ConfigureFonts(fonts =>
               {
                   fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
               });
           return builder.Build();
       }
   }

When you run the app, the first item is highlighted at the center of the Carousel. Swipe or scroll to move to the other items.

For a runnable example with the Carousel Getting Started scenario, see the SDKBrowser Demo Application and go to the Carousel > Getting Started category.

Additional Resources

• .NET MAUI Carousel Forum Page
• Telerik .NET MAUI Blogs
• Telerik .NET MAUI Roadmap

See Also

• Highlighted Item
• Item Size and Spacing
• Styling