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.
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:
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.
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.
|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)
Senior Front End Developer
Telerik XAML Team
Subscribe to be the first to get our expert-written articles and tutorials for developers!