.NET MAUI Carousel Item Effects

Updated on Nov 10, 2026

The Carousel item effects change the scale and opacity of the items based on their position relative to the viewport center. The effects make the highlighted item stand out and give the neighboring items a receding look. While the user scrolls, the Carousel interpolates the values smoothly between positions.

Enable and Configure the Item Effects

To control the item effects, use the following properties of the RadCarousel:

• AreItemEffectsEnabled (bool)—Specifies whether the Carousel applies effects to the items. The default value is true.
• ItemEffectSettings (Telerik.Maui.Controls.Carousel.CarouselItemEffectSettings)—Specifies the effects for each item position. The value cannot be null.

The CarouselItemEffectSettings class exposes the following properties of type CarouselItemEffect:

• Highlighted—Defines the effect for the item at the center of the viewport. By default, the scale and opacity are both 1.
• Previous—Defines the effect for the item one position before the center. By default, the scale is 0.8 and the opacity is 0.6.
• Next—Defines the effect for the item one position after the center. By default, the scale is 0.8 and the opacity is 0.6.
• Normal—Defines the effect for the items two or more positions from the center. By default, the scale is 0.8 and the opacity is 0.6.

Each CarouselItemEffect exposes the following properties:

• Scale (double)—Specifies the item scale, between 0 and 1. The default value is 1.
• Opacity (double)—Specifies the item opacity, between 0 and 1. The default value is 1.

When you change the default values of the CarouselItemEffectSettings, configure the Pressed visual state as well. This prevents a sudden change in the item's appearance when the user presses it. For more information, see the Carousel Visual States article.

Apply Custom Scale and Opacity Effects

The following example sets a different scale and opacity for each item position.

1. Define the Carousel in XAML:

   XAML

   <telerik:RadCarousel Grid.Row="1"
                        PeekAreaRatio="0.4"
                        MaximumHeightRequest="{OnPlatform Android=450, iOS=450}"
                        VerticalOptions="{OnPlatform Android=Start, iOS=Start}"
                        ItemsSource="{Binding Items}"
                        x:Name="carousel">
       <telerik:RadCarousel.ItemEffectSettings>
           <telerik:CarouselItemEffectSettings>
               <telerik:CarouselItemEffectSettings.Highlighted>
                   <telerik:CarouselItemEffect Scale="1" Opacity="1" />
               </telerik:CarouselItemEffectSettings.Highlighted>
               <telerik:CarouselItemEffectSettings.Previous>
                   <telerik:CarouselItemEffect Scale="0.85" Opacity="0.7" />
               </telerik:CarouselItemEffectSettings.Previous>
               <telerik:CarouselItemEffectSettings.Next>
                   <telerik:CarouselItemEffect Scale="0.85" Opacity="0.7" />
               </telerik:CarouselItemEffectSettings.Next>
               <telerik:CarouselItemEffectSettings.Normal>
                   <telerik:CarouselItemEffect Scale="0.6" Opacity="0.3" />
               </telerik:CarouselItemEffectSettings.Normal>
           </telerik:CarouselItemEffectSettings>
       </telerik:RadCarousel.ItemEffectSettings>
       <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. 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; }
   }

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

As a result, the highlighted item is displayed at full size, the adjacent items are slightly smaller and semi-transparent, and the farther items are smaller and fainter.

For a runnable example with the Carousel Item Effects scenario, see the SDKBrowser Demo Application and go to the Carousel > Features category.

See Also

• Item Size and Spacing
• Styling