Optimizing XamDataGrid Scrolling Performance Using Simplified Templates

The XamDataGrid control is a highly-functional high-performance grid control that’s a part of the NetAdvantage for WPF (samples), along with other controls for line of business applications, such as editors, docking, ribbon, scheduler, and others. These controls have been used in a number of industries to build richly-styled and highly-functional applications. However, users are using increasing quantities of data, which puts strain on the performance of highly-customizable UIs. In this blog post, I’ll present one approach to improving performance of the XamDataGrid to help you achieve up to  20% decrease in scrolling speed. For additional guidance on XamDataGrid performance optimization, please see this blogpost.

In this blog post I will present simplified cell templates for XamDataGrid, and illustrate how they can significantly improve scrolling performance. Please download the sample project – it enables you to switch between the different cell templates of a XamDataGrid, and allows you to benchmark the time it takes to scroll through the dataset. Please remember to unblock the ZIP archive before extracting it. The project is built using Visual Studio 2010 and .NET Framework 4. It uses the latest available service release of the 12.1 WPF product, so you can build and run it without any additional downloads. Fully-functional free 30-day trial of the NetAdvantage for WPF product, which includes the XamDataGrid is available.

Editors enabling your user to easily edit cell values for the corresponding data types. Each of these editors is made up of UIElements which need to be managed by the CLR.  The more sophisticated an editor, the more UIElements need to be managed, and the higher the price we pay in terms of performance.  With this in mind, we can improve XamDataGrid scrolling performance by using simpler ways to present a value, thus cutting down on the number of UIElements to be managed by the CLR.

CellValuePresenter Templates

A XamNumericEditor or XamCurrencyEditor uses 7 elements to display a single value because the user can edit the value using spin buttons. You can see the element tree below:

However, very often, especially when dealing with large volumes or rapidly updating data, most of the data shown is not editable. Setting the AllowEdit property in the FieldSettings doesn’t use a simpler template for presenting the value, just disables the editor and doesn’t improve performance.  When we’re dealing with read-only data, we only need to present the data as a read-only label, instead of an editor. This will help us cut down the number of UIElements and hence improve performance. The simplest possible template is one where we use a single TextBlock element to present a value with a Border element, so we can have border and background styling. 

You can see that a default CellValuePresenter is composed of 12 elements, while a slimmed-down one only has 3 elements. This is a 4-fold decrease in the number of elements per cell. The more cells you have in view, the bigger the total number of UIElements saved by using simple read-only styles. The more UIElements saved, the more performance will improve.

Performance Comparison

You can easily see the effect using slimmed down templates has on performance. The sample is a large dataset, with more than 50 columns, and 2000 rows. This data is grouped using three columns to provide a realistic scrolling scenario where group header rows are also present along with regular data rows. To test performance run the sample application, click the Expand all button, then click the Benchmark scrolling button. This will page through the entire dataset, and report the time that took on the top-right for the current CellValuePresenter template. You can change the CellValuePresenter template using the radio buttons on the top-left side. Go through the different templates (normal, read-only, grid lines read-only) and click the Benchmark scrolling button. The results will vary depending on the number of cells shown, with a smaller grid shown leading to better performance.

Using the window size as provided by the sample (1024x768), we had the following times:

Normal template: 12.561s

Read-only: 9.502s

Grid lines read-only: 10.29s

You may get different results due to the hardware you’re running the sample on, but you’ll certainly see about a 20% improvement in scrolling time when using read-only templates versus standard ones.

Editor recycling

When we changed the CellValuePresenter to use a simple TextBlock, it doesn’t contain a ValueEditor anymore. This prevents the XamDataGrid from determining if it should instantiate a cell if it isn’t in view (horizontally scrolled out of view). Since this uninitialized cell may affect the height of the record, the XamDataGrid lacking any other information will hydrate it. However, setting the ForceCellVirtualization to true (in the XAML code), we tell the XamDataGrid that the cell is safe to be virtualized. Once we’ve set this property to true, this lets us benefit from the slimmer CellValuePresenter.

Note: Setting ForceCellVirtualization to true doesn’t guarantee that the XamDataGrid will re-use the CellValuePresenter for another field’s cell when the user scrolls horizontally. If the data types, or styles don’t match, the XamDataGrid won’t re-use it for that field.

Implications

Using a slimmer CellValuePresenter template can impact your existing codebase in two ways – styling and value formatting.

You may need to change styles you’re using to target the elements of the slimmed down templates instead of the standard CellValuePresenter template elements. The read-only styles provided in this sample (both the regular and grid-lines one) include a border element which can be used to set the background and border of the cell. Depending on the richness you require, you may add additional elements you’d like to target using your styles.

The TextBlock doesn’t format the cell values the way a XamNumericEditor or XamCurrencyEditor can. With these full-fledged editors you have complete control over value formatting, with currency symbols, thousand separators and decimal places as examples. When using a simpler template with a TextBlock, you’ll need to format values as strings before you provide them to the UI layer, because without an editor in place they won't get formatted automatically.

Summary

The XamDataGrid control is the mainstay of line of business applications. Its flexibility, feature-richness, stylability, and performance have ensured its wide use in WPF applications in a variety of sectors with demanding requirements. In this blogpost, I described one way to enhance its performance in specific when dealing with read-only data. This sample also gives you the ability to easily compare the scrolling performance with different XamDataGrid settings because of its ready-to-use automatic scrolling and timing capabilities. In case you’d like to improve scrolling speed, armed with this sample and the guidance above, you will be able to customize the XamDataGrid to get the maximum level of performance and improve the experience your users have when using your application.