Blogs

The Progress Bar - DevExpress XPF Blog

Silverlight and WPF Grid – New Scrolling Features

     

And let’s open the floodgates! Interested in our Silverlight and WPF controls? There are lots of improvements coming your way that enhance the user-experience as well as provide robust data presentation and manipulation capabilities.

In this post, I’ll talk about the new scrolling features that will be introduced for the DXGrid control in the 2011.1 release of DXperience. Thanks to the synchronous development of the DXGrid and DXTreeList controls, these features will also be available in the TreeList as well, I will however cover that in an upcoming post.

So what’s new? It’s two features that we call Per-Pixel Scrolling and Cascading Data Updates. You may have already gotten a hint as to what the first one is, but allow me to explain both in detail…

Per-Pixel Scrolling

So what is Per-Pixel Scrolling? This feature can be enabled using the AllowPerPixelScrolling property of the grid and comes in useful when you have rows formatted to be taller than usual. While that may not appear to be an issue at first, let’s take a look at a couple of examples. First, the animation below shows the standard behavior of the grid... you can see that as I scroll up and down, the records are updated per row, meaning I won’t be able to scroll slowly to see a partial view of a row.

With Per-Pixel Scrolling, rows can be scrolled smoothly and not on a “record-by-record” basis. To compare, let’s look at the same data with Per-Pixel Scrolling enabled:

See the difference? A much more pleasant user experience thanks to the smoother visual scrolling of records.

The per-pixel scrolling feature also offers built-in animations using the ScrollAnimationMode property. These animations can be used to enhance the visual effect and interactivity of the application as the user scrolls through numerous records:

  • Ease Out – This animation mode gives the user the visual impression that scrolling is starting out fast but slows down to the user’s speed later on.
  • Ease In/Out – In this mode, the scrolling experience starts out slowly, accelerate and then slows down again to match the user’s actual scrolling speed.
  • Linear – Provides a consistent, smooth, visual scrolling experience.
  • Custom – This mode allows you to use the CustomScrollAnimation event handler to implement a custom animation effect.

To further customize per-pixel scrolling, the scroll animation length can be specified in milliseconds using the built-in ScrollAnimationDuration property.

Cascading Data Updates

Outstanding performance is what every developer strives to achieve in their application. When using a visually rich platform such as Silverlight or WPF, then you are sometimes left at a cross-roads: Do you decrease the data to be displayed on-screen in favor of cool animations and eye-candy, or do you sacrifice interactive UI in favor of superb performance? Those who have worked with data grid controls on Silverlight/WPF know that after a certain number of rows or columns, you sometimes have to make those difficult decisions.

Well, starting with the 2011.1 release of DXperience, you no longer have to worry about the scrolling performance of your DevExpress Grid or TreeList control, regardless of how much data is being displayed. The new Cascading Data Updates are enabled using a single built-in property, AllowCascadeUpdate.

In standard scrolling mode, when the end-user first scrolls the data rows, the grid synchronously loads all the rows that need to be displayed onscreen. Using Cascading Data Updates, visible rows are asynchronously loaded in the background, one row at a time.

Pretty neat right? The clip above demonstrates Cascading Data Updates enabled in conjunction with the animations provided by the Per-Pixel Scrolling mode I mentioned earlier. The RowAnimationKind property can be used to specify the animation to be used when data rows are asynchronously loaded. The available options are as follows:

  • None – No animation is displayed.
  • Opacity – As rows are being loaded, animate them fading in.
  • Custom – You can again implement a custom animation using the RowAnimationBegin event handler.

The animation duration can also be specified in milliseconds using the built-in RowAnimationDuration property.

An upcoming post will cover some of these features in the DevExpress TreeList Control for Silverlight and WPF.

Published May 02 2011, 02:50 PM by Emil Mesropian (DevExpress)
Bookmark and Share

Comments

 

Geert Depickere said:

Can you clarify what "visible rows are asynchronously loaded in the background, one row at a time" means?

I presume that this means that the data is loaded into the "visual tree" of the grid (from a datasource that is already fully loaded, e.g. an entity model loaded from a wcf service call).

May 3, 2011 3:13 AM
 

Geert Depickere said:

Other question I have is wheter or not this Cascading Data Updates mode imposes any limits on the functionality of the grid

- grouping

- totals, subtotals, group summaries...

- sorting

- filters

May 3, 2011 3:17 AM
 

Michael Kaldeck said:

"animation below" : in chrome, no animation

May 3, 2011 3:29 AM
 

AZETA UFFICIO SRL said:

wow... just what i was waiting for... but for winform!

are you introducing this feature in XtraGrid also?

May 3, 2011 3:29 AM
 

Michael Kaldeck said:

sorry, wrong: animation only once, not repeatable only if page refresh

May 3, 2011 3:31 AM
 

Ron Grove said:

only the first animation repeats in Safari 5 on a Mac as well. Kind of in addition to the questions Geert asked, I'm wondering how MVVM might impact all this? When I see the demos on http://tv.devexpress.com they always bind right to the database and do code behind. Does it make any difference?

May 3, 2011 5:20 PM
 

Markus Landwehr said:

Looks realy nice. Will this per-pixel scrolling come for WinForm-Controls (XtraGrid) too? I thing that there are some older entries in Support-Center.

May 4, 2011 3:01 AM
 

The Progress Bar - DevExpress XPF Blog said:

In this post, I announced the new, smooth scrolling features that will ship in the Silverlight Grid Control

May 4, 2011 5:55 PM
 

Emil Mesropian (DevExpress) said:

@Geert:

To answer your fist question... yes, you are correct.

With regards to the limitations on grid functionality, this feature will not impose any limitations whatsoever.

May 5, 2011 2:12 PM
More from DevExpress
Live Chat
Have a pre-sales question?
Need assistance with your evaluation?
We are here to help.
Chat is one of the many ways you can contact members of the DevExpress Team. We are available Monday-Friday between 8:30am and 5:00pm Pacific Time.
If you need additional product information, require pre-sales assistance, or want help with your order, write to us at info@devexpress.com or call us at
+1 (818) 844-3383.