UIVirtualization in .NET MAUI Carousel View (SfCarousel)

13 Jun 20253 minutes to read

UI virtualization in the SfCarousel control ensures that only the items visible in the viewport are rendered, significantly improving performance when working with large data sets. As users swipe through the carousel, new items are dynamically added to the visible area while off-screen items are removed, maintaining a consistent number of rendered items.

The following property has been used in UIVirtualization support:

• EnableVirtualization

EnableVirtualization

The UI virtualization concept is implemented by enabling the EnableVirtualization property in SfCarousel, supporting both Default and Linear view modes.

NOTE

The default value of the EnableVirtualization property is false.

Default Mode

XAML

<!-- Default View Mode -->
<carousel:SfCarousel x:Name="carousel"
                     ItemsSource="{Binding ImageCollection}"
                     ItemTemplate="{StaticResource itemTemplate}" 
                     ItemHeight="200"
                     ItemWidth="200"
                     ItemSpacing="2"
                     ViewMode="Default"
                     EnableVirtualization="true">
</carousel:SfCarousel>

C#

// Default Mode Configuration
SfCarousel carousel = new SfCarousel()
{
    ItemHeight = 200,
    ItemWidth = 200,
    ItemSpacing = 2,
    EnableVirtualization = true,
    ViewMode = ViewMode.Default
};

carousel.ItemTemplate = itemTemplate;
carousel.SetBinding(SfCarousel.ItemsSourceProperty, "ImageCollection");

Linear Mode

XAML

<!-- Linear View Mode -->
<carousel:SfCarousel x:Name="linearCarousel"
                     ItemsSource="{Binding ImageCollection}"
                     ItemTemplate="{StaticResource itemTemplate}" 
                     ItemHeight="200"
                     ItemWidth="200"
                     ItemSpacing="2"
                     ViewMode="Linear"
                     EnableVirtualization="true">
</carousel:SfCarousel>

C#

// Linear Mode Configuration
SfCarousel linearCarousel = new SfCarousel()
{
    ItemHeight = 200,
    ItemWidth = 200,
    ItemSpacing = 2,
    EnableVirtualization = true,
    ViewMode = ViewMode.Linear
};

linearCarousel.ItemTemplate = itemTemplate;
linearCarousel.SetBinding(SfCarousel.ItemsSourceProperty, "ImageCollection");

Find the complete UIVirtualization sample from this link.