.NET MAUI Carousel Events

Updated on Nov 6, 2026

The Telerik UI for .NET MAUI Carousel raises events when the highlighted item changes and when the scroll position changes. Handle these events to update other parts of the UI or to run custom logic.

The Carousel exposes the following events:

• HighlightedItemChanged event — Occurswhen the highlighted item changes. The event handler receives the following parameters:

  • The sender argument, which is of type object, but can be cast to the RadCarousel type.
  • A CarouselHighlightedItemChangedEventArgs object, which provides the following properties:
    • OldHighlightedItem (object)—Gets the item that was highlighted before the change.
    • NewHighlightedItem (object)—Gets the item highlighted after the change.
    • OldHighlightedIndex (int)—Gets the zero-based index highlighted before the change, or -1 if no item was highlighted.
    • NewHighlightedIndex (int)—Gets the zero-based index highlighted after the change, or -1 if no item is highlighted.

• Scrolled event — Occurs when its scroll position changes. The event handler receives the following parameters:

  • The sender argument, which is of type object, but can be cast to the RadCarousel type.
  • A CarouselScrolledEventArgs object, which provides the following properties:
    • ScrollOffset (double)—Gets the scroll offset along the Carousel orientation, in device-independent units.
    • ItemPosition (double)—Gets the zero-based position of the viewport center between item centers. Values outside the item range are possible during overscroll.

Handle the Carousel Events

The following example subscribes to the HighlightedItemChanged and Scrolled events.

1. Define the Carousel in XAML:

   XAML

   <telerik:RadCarousel MaximumHeightRequest="260"
                        ItemsSource="{Binding Items}"
                        HighlightedItemChanged="OnHighlightedItemChanged"
                        Scrolled="OnScrolled">
       <telerik:RadCarousel.ItemTemplate>
           <DataTemplate x:DataType="local:CarouselItem">
               <Image Source="{Binding Image}" Aspect="AspectFill" />
           </DataTemplate>
       </telerik:RadCarousel.ItemTemplate>
   </telerik:RadCarousel>

2. Add the telerik namespace:

   XAML

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

3. Define the event handlers:

   C#

   private void OnHighlightedItemChanged(object sender, CarouselHighlightedItemChangedEventArgs e)
   {
       var newTitle = (e.NewHighlightedItem as CarouselItem)?.Title ?? "none";
       this.highlightedLabel.Text = $"HighlightedItemChanged: {e.OldHighlightedIndex} -> {e.NewHighlightedIndex} ({newTitle})";
   }
   
   private void OnScrolled(object sender, CarouselScrolledEventArgs e)
   {
       this.scrolledLabel.Text = $"Scrolled: offset {e.ScrollOffset:F0}, item position {e.ItemPosition:F2}";
   }

4. Add the business object:

   C#

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

5. Define the ViewModel:

   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
           }
       };
   }

For a runnable example demonstrating the Carousel events, see the SDKBrowser Demo Application and go to the Carousel > Events category.

See Also

• Highlighted Item
• Carousel Commands