WPF DataGrid Navigation Paging Up Down Sideways is slow virtualization

I was developing a WPF application that allowed users to selected as many rows and as many columns that were available in the database. I dynamically built the selection criteria using reflection and a treeview. Then I traversed the treeview and dynamically built the DataGrid that contained the columns and thier values. What I quickly experienced was when the number of columns (horizontal) was large, say +100, scrolling up and down became slow. After some research I learned the concept of virtualization. It basically means to me (in this context) that ‘if we don’t need to see it, don’t use the resources to render it.’ So one I emplemented virtualization into my WPF program the performance issue went away. Even if +200 columns were selected.

What happened was that before implementing virtualization all of the columns were being rendered, even if a user never looked at them. Which wasted resources, increase initial loading response time and increased navigation times. All this for possibly nothing, if the user never looked at it. After implementing virtualization only the columns which get viewed will be rendered. NOTE: all rows and columns were selected from the database and stored in memory, the operating system was just intelligent enough to render only what is viewed.

How do we do this in WPF? It’s ver simple. By default EnableRowVirtualization is set to true, however EnableColumnVirtualization is set to false. Simply set the EnableColumnVirtualization to true and you have implemented column virtualization into your WPF program. Here is the XAML code to do it:

[sourcecode language="xml" padlinenumbers="true" autolinks="false" gutter="false" toolbar="false"]
<DataGrid Name="datagrid1"
            EnableColumnVirtualization="True"
            VerticalScrollBarVisibility="Visible"
            AutoGenerateColumns="True">
    <DataGrid.RowDetailsTemplate>
        <DataTemplate>
            <DataGrid Name="innerGrid" />
        </DataTemplate>
    </DataGrid.RowDetailsTemplate>
</DataGrid>
[/sourcecode]

Within the DataGrid tags simply enter EnableColumnVirtualization=”True”. Remember Row Virtualization is True by default and you would only add it here if you needed to set it to False.

You can also EnableColumnVirtualization from your code-behind like this:

[sourcecode language="csharp" autolinks="false" gutter="false" toolbar="false"]
datagrid1.EnableColumnVirtualization = true;
[/sourcecode]

You would add this code at the startup or before you populate your DataGrid with data.

Developers are always looking for ways to improve performance and response times and this was, in my opinion, a good find and a good win.




Leave a Comment

Your email address will not be published.