How to improve TabView performance with virtualization in .NET MAUI TabView?

This article explains how to enable virtualization in the .NET MAUI Tab View to improve performance when rendering multiple tabs. Virtualization ensures that only the selected tab’s content is created initially, and other tabs are loaded on demand, reducing memory usage and speeding up page load. You can enable virtualization by setting the EnableVirtualization property of SfTabView to True.

Model

public class ReportRow
{
    public string Title { get; set; } = "";
    public string Value { get; set; } = "";
}

ViewModel

public class MainPageViewModel : INotifyPropertyChanged
{
   public event PropertyChangedEventHandler? PropertyChanged;
   protected void OnPropertyChanged(string propertyName)
       => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
   public ObservableCollection<ReportRow> ReportItems { get; } = new();
   public MainPageViewModel()
   {

       ReportItems.Add(new ReportRow { Title = "Sales (Q1)", Value = "₹12.4L" });
       ReportItems.Add(new ReportRow { Title = "Active Users", Value = "3,482" });
       ReportItems.Add(new ReportRow { Title = "Support Tickets", Value = "27 open" });
   }
}

MainPage.Xaml

<ContentPage.BindingContext>
    <local:MainPageViewModel />
</ContentPage.BindingContext>

<tabView:SfTabView x:Name="tabView"
               EnableVirtualization="True"
               IndicatorPlacement="Fill">

    <tabView:SfTabItem Header="Reports">
        <tabView:SfTabItem.Content>
            <CollectionView ItemsSource="{Binding ReportItems}"
                  VerticalScrollBarVisibility="Always">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Grid Padding="12" ColumnDefinitions="*,Auto" BackgroundColor="#FAFAFA" Margin="0,0,0,8">
                            <Label Grid.Column="0" Text="{Binding Title}" FontAttributes="Bold" TextColor="#333"/>
                            <Label Grid.Column="1" Text="{Binding Value}" TextColor="#666"/>
                        </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </tabView:SfTabItem.Content>
    </tabView:SfTabItem>

    <tabView:SfTabItem Header="Tasks">
        <tabView:SfTabItem.Content>
            <!-- Add suitable content related to your scenario -->
        </tabView:SfTabItem.Content>
    </tabView:SfTabItem>

    <tabView:SfTabItem Header="Contacts">
        <tabView:SfTabItem.Content>
             <!-- Add suitable content related to your scenario -->
        </tabView:SfTabItem.Content>
    </tabView:SfTabItem>

</tabView:SfTabView>

Output:

You can download the complete sample from GitHub.

Conclusion

Hope you enjoyed learning how to improve SfTabView performance by using EnableVirtualization in .NET MAUI TabView.

Refer to our .NET MAUI Tab View feature tour page to learn about its other groundbreaking feature representations. You can explore our .NET MAUI Tab View documentation to understand how to present and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
​
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!