How To Boost RadGridView Performance for WPF and Silverlight Using Lightweight templates

 
One of the most important features of Telerik RadGridView for WPF and Silverlight is its performance. Whenever we assume that we have reached its maximum, it appears that we can make it a little bit faster. Digging to the foundations of our grid component we found that the slowest operation has always been the rendering of all visual elements engaged. We focused on finding a way to reduce the number of visual elements for GridViewCell, GridViewRow and TreeListViewRow. The Lightweight templates were born-a special set of simplified styles with limited number of visual elements. We succeeded in preserving the look and feel of GridViewCell, GridViewRow and TreeListViewRow except for their effects and corner radius settings. 

How Lightweight Templates Do the Trick

Each UI component which offers a great set of functionality and professional looking UI comes with a very complex visual tree. Each visual state is defined by variety of elements, different animations, shadow effects and others visuals. Each interaction with the UI leads to recalculating and re-measuring of its visual tree, which often takes more time than expected.

The default templates of GridViewCell and GridViewRow contain different visual elements for each visual state or feature. There are 9 visual elements for GridViewCell and 12 for each GridViewRow and TreeListViewRow. Part of these numbers are due to the shared codebase between our WPF and Silverlight components. The VisualStateManager requires separate elements in order to animate the same property of the same element in different visual state groups in WPF.
This platform limitation does not have effect when Triggers are used in WPF. This led us to the conclusion that we can get rid of these additional elements and limit the number of visual elements in XAML, as follows:

• GridViewCell core style: 3 visual elements, including parent container.
• GridViewCell core validation style: 4 visual elements, including parent container.
• GridViewRow core style: 4 visual elements, including parent container. 
• GridViewRow core validation style: 5 visual elements, including parent container.
• TreeListViewRow core style: 4 visual elements, including parent container. 
• TreeListViewRow core validation style: 5 visual elements, including parent container.

We separated the VSM logic for WPF and we used Triggers to achieve the desired look and feel. With these changes, our expectations are that the performance during load will be improved by up to 50 percent for WPF and up to 25 percent for Silverlight. 

Defining Lightweight Templates

These styles are added to all built-in themes for Telerik WPF and Silverlight UI components. For the use of this blog post we chose Windows8 theme to make the quick presentation.

These styles are defined via the themes of RadGridView and you may include it, via defining simple and pretty basic styles: 

 

You may download a runnable demo for WPF and Silverlight from our GitHub repository, following this link.

Let's Take a Look at Some Statistics

Below you can find a quick sample demo which loads 100 000 rows and 1000 columns in RadGridView. Our goal is to mimic a large data set for imaginary line of business application scenario just to show the abilities of these lightweight styles.


Time on initial load is measured in seconds and performance gain in percentage, as follows: 

Measurement time on initial load
*Performance test against Windows8 theme and default row height (26px)	(1000 x 100000)  (columns x rows)  47 x 38 visible in the viewport
Default styles	~6.83 sec.
Lightweight core Styles	~2.65 sec. (~157% performance gain)
Lightweight validation styles	~3.51 sec. (~94 % performance gain)
*Performance test against Windows8 theme and row height smaller than    the default (18px)	(1000 x 100000)  (columns x rows)  47 x 55 visible in the viewport
Default styles	~9.74 sec.
Lightweight core styles	~3.70 sec. (~163 % performance gain)
Lightweight validation styles	~4.84 sec. (~101 % performance gain)

*presented values are system dependent and may vary

Please do not hesitate to give a try to the Lightweight templates and share with us your thoughts and comments.

Download LightweightTemplatesDemo.zip