Smooth scrolling with Virtualization - WPF List

Here is the simple trick to virtualize the list and at the same time with smooth scrolling.

VirtualizingStackPanel in Listbox

Listbox is the main choice to display a big collection in wpf. It also supports virtualization. Using VirtualizatingStatckPanel you can bind a huge collection of dataset to listbox without performance penalty. To force the listbox to use VirtualizingStatckPanel here is the code. Simply add VirtualizingStackPanel.IsVirtualizing="True" and VirtualizingStackPanel.VirtualizationMode="Recycling" to the listbox. 

Here is the complete xaml code. 

 <ListView Grid.Column="1" VirtualizingStackPanel.IsVirtualizing="True"
            VirtualizingStackPanel.VirtualizationMode="Recycling" x:Name="listView" >
            <ListView.ItemTemplate>
                <DataTemplate>

                    <Grid Height="100">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"></RowDefinition>
                            <RowDefinition Height="*"></RowDefinition>
                        </Grid.RowDefinitions>
                        <TextBlock Text="{Binding Name}"></TextBlock>
                        <TextBlock Grid.Row="1" Text="{Binding Description}"></TextBlock>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
Problem with wpf listbox virtualization

There is one slight problem using virtualizingstackpanel in listbox. Listbox scrolls per item but not per pixel so it does not looks smooth while scrolling. The item jumps when scrolling in listbox. 

Use Wpf TreeView instead of listbox.

TreeView in wpf is a data component that is primarily  used to display tree like control. Although the main purpose of the TreeView is to display tree like structure in wpf, we can also use it to display  non-hierarchical data just like in listbox. 

Why do we use treeview instead of listview to display non-hierarchical data? Answer is simple, because treeview supports both Virtualization and Smooth Scrolling at the same time in contrast to listbox. 

Here is the sample code to use treeview supporting virtualization. 

 

         <TreeView VirtualizingStackPanel.IsVirtualizing="True"
            VirtualizingStackPanel.VirtualizationMode="Recycling" x:Name="treeView" >
            <TreeView.ItemTemplate>
                <DataTemplate>
                    
                    <Grid Height="100">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"></RowDefinition>
                            <RowDefinition Height="*"></RowDefinition>
                        </Grid.RowDefinitions>
                        <TextBlock Text="{Binding Name}"></TextBlock>
                        <TextBlock Grid.Row="1" Text="{Binding Description}"></TextBlock>
                    </Grid>
                </DataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>
How to test visualization is working or not?

To check if virtualization is working or not you can simply bind a giant dataset and see how quickly the treeview loads. 

Below is the sample code to bind a giant collection to the treeview. If your windows loads without taking much time, you can be sure that the virtualization is working perfectly. 

 

   IList<Data> list = new List<Data>();
            for (int i = 0; i < 1000000; i++)
            {
                list.Add(new Data() { Name = "Name " + i,Description = string.Format("{0} Lorem ipsum dolar site {0} ",i)});

            }
            InitializeComponent();
            treeView.ItemsSource = list;
            listView.ItemsSource = list;
Styling treeview to look like listbox.

Wpf has advancced styling tools, so you can easily style treeview to look like listbox in wpf. 

Bookmark this page if you want to know how to style treeview to look like listbox. In very near future I will update this articles to include styles also. 

You are welcome to write on comments section if you know better and faster way to make list virtualized and with smooth scrolling at the same time.