Per-Pixel Scrolling
- 2 minutes to read
To enable per-pixel scrolling, use the property corresponding to the current view:
- CardView.ScrollMode to ScrollMode.Pixel for the CardView
- TableView.AllowPerPixelScrolling to true for the TableView
- TreeListView.AllowPerPixelScrolling to true for the TreeListView
To provide visual effect, set the TableView.AllowScrollAnimation property to true. The TableView.ScrollAnimationMode and TableView.ScrollAnimationDuration properties allow you to customize the animation. The first property specifies the scrolling mode, the second property specifies the animation length. The following modes are available:
Ease Out
Starts quickly and then decelerates.
Ease In/Out
Starts slowly, accelerates and then decelerates.
Linear
Moves smoothly.
Custom
Handle the TableView.CustomScrollAnimation event (TreeListView.CustomScrollAnimation in a TreeListView) to provide a custom animation effect.
Tip
In a TreeListView, these properties are: TreeListView.AllowScrollAnimation, TreeListView.ScrollAnimationMode and TreeListView.ScrollAnimationDuration.
Note
If per-pixel scrolling is enabled and rows have different heights, the last (bottom) visible row may not be displayed entirely. Because of the UI virtualization, the GridControl does not know the total viewport height in advance, and the scrolling speed differs depending on which rows are currently visible.
Example: How to Implement Custom Scroll Animation for Per-Pixel Scrolling
This example shows how to implement a custom animation displayed when a user vertically scrolls the GridControl (per-pixel scrolling):
- Set the TableView.AllowScrollAnimation property to
true
. - Set the TableView.ScrollAnimationMode property to
Custom
. - Handle the TableView.CustomScrollAnimation event and specify a custom scroll animation.
<dxg:GridControl Name="grid" AutoGenerateColumns="AddNew">
<dxg:GridControl.View>
<dxg:TableView Name="view"
AutoWidth="True"
AllowScrollAnimation="True"
ScrollAnimationMode="Custom"
CustomScrollAnimation="view_CustomScrollAnimation"/>
</dxg:GridControl.View>
</dxg:GridControl>
void view_CustomScrollAnimation(object sender, DevExpress.Xpf.Grid.CustomScrollAnimationEventArgs e) {
e.Storyboard = new Storyboard();
DoubleAnimation animation = new DoubleAnimation {
From = e.OldOffset,
To = e.NewOffset,
Duration = new Duration(TimeSpan.FromMilliseconds(600)),
EasingFunction = new ExponentialEase() { Exponent = 0 }
};
e.Storyboard.Children.Add(animation);
}