Per-Pixel Scrolling

• Jun 27, 2022
• 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):

1. Set the TableView.AllowScrollAnimation property to true.
2. Set the TableView.ScrollAnimationMode property to Custom.
3. Handle the TableView.CustomScrollAnimation event and specify a custom scroll animation.

View Example: Implement Custom Scroll Animation

XAML

<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>

C#

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);
}

VB.NET

Private Sub view_CustomScrollAnimation(ByVal sender As Object, ByVal e As DevExpress.Xpf.Grid.CustomScrollAnimationEventArgs)
    e.Storyboard = New Storyboard()
    Dim animation As DoubleAnimation = New DoubleAnimation With {.From = e.OldOffset, .[To] = e.NewOffset, .Duration = New Duration(TimeSpan.FromMilliseconds(600)), .EasingFunction = New ExponentialEase() With {.Exponent = 0}}
    e.Storyboard.Children.Add(animation)
End Sub