.NET MAUI Carousel Item Size and Spacing

Updated on Nov 10, 2026

The Carousel item size depends on the part of the viewport left for the neighboring items. Adjust this part and the spacing between items to show more or less of the previous and next items.

Set the Peek Area and Spacing

To configure the size of the items and the space between them, use the following properties:

• PeekAreaRatio (double)—Specifies the portion of the viewport left for the neighboring items on both sides of the highlighted item. Valid values range from 0.0 to 0.9. At 0.0, the highlighted item fills the viewport. At 0.9, the highlighted item takes 10% of the viewport. The default value on iOS and Android is 0.4, on WinUI and MacCatalyst is 0.75.
• ItemSpacing (double)—Specifies the spacing between adjacent items in device-independent units. The value must be finite and nonnegative. The default value on iOS and Android is 16, on WinUI and MacCatalyst is 24.

When PeekAreaRatio is 0, the Carousel ignores ItemSpacing. When item effects are enabled, the Carousel keeps the spacing between the scaled items.

Example of Custom Peek Area and Spacing

The following example sets custom PeekAreaRatio and ItemSpacing values.

1. Define the Carousel in XAML:

   XAML

   <telerik:RadCarousel Grid.Row="2"
                        ItemsSource="{Binding Items}"
                        PeekAreaRatio="0.7"
                        ItemSpacing="10"
                        x:Name="carousel">
       <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
           }
       };
   }

This is the result:

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

See Also

• Item Effects
• Orientation
• Styling