Skip to main content

Per-Pixel Scrolling

  • 2 minutes to read

To enable per-pixel scrolling, use the property corresponding to the current view:

perpixelscrollingperpixelscrolling

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:

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.

Grid - Custom Scrolling

View Example: Implement 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);
}