Animate (smoothly) ScrollViewer programmatically

Question

Is there a way to smoothly animate a ScrollViewers vertical offset in Windows Phone 8.1 Runtime?

I have tried using the ScrollViewer.ChangeView()<

Answer 1

I think that question has already been answered here:

Animated (Smooth) scrolling on ScrollViewer

There is also the WinRT XAML Toolki, which provides "a way to scroll a ScrollViewer to specified offset with animation":

http://winrtxamltoolkit.codeplex.com/

Answer 2

With ScrollToVerticalOffset deprecated/obsolete in newer builds of Windows 10 (leaving the ScrollViewOffSetMediator extension control no longer working), and the new ChangeView method not actually providing smooth or controllable animation, a new solution is needed. Please see my answer here which allows one to smoothly animate and zoom the ScrollViewer and its contents to any desired position, regardless of where the application's end user has the scrollbars initially positioned:

How to scroll to element in UWP

Answer 3

You should stick with ChangeView for scrolling animations regardless of whether data virtualization is on or not.

Without seeing your code where the ChangeView doesn't work, it's a bit hard to guess what's really going on but there are a couple of things that you can try.

First approach is to add a Task.Delay(1) before calling ChangeView, just to give the OS some time to finish off other concurrent UI tasks.

await Task.Delay(1);
scrollViewer.ChangeView(null, scrollViewer.ScrollableHeight, null, false);

The second approach is a bit more complex. What I've noticed is that, when you have many complex items in the ListView, the scrolling animation from the first item to the last (from the ChangeView method) isn't very smooth at all.

This is because the ListView first needs to realize/render many items along the way due to data virtualization and then does the animated scrolling. Not very efficient IMHO.

What I came up with is this - First, use a non-animated ListView.ScrollIntoView to scroll to the last item just to get it realized. Then, call ChangeView to move the offset up to a size of the ActualHeight * 2 of the ListView with animation disabled (you can change it to whatever size you want based on your app's scrolling experience). Finally, call ChangeView again to scroll back to the end, with animation this time. Doing this will give a much better scrolling experience 'cause the scrolling distance is just the ActualHeight of the ListView.

Keep in mind that when the item you want to scroll to is already realized on the UI, you don't want to do anything above. You simply just calculate the distance between this item and the top of the ScrollViewer and call ChangeView to scroll to it.

I already wrapped the logic above in this answer's Update 2 section (thanks to this question I realized my initial answer doesn't work when virtualization is on :p). Let me know how you go.

Answer 4

I believe this article is what you're looking for and it seems the method he used is working for you.

Quick Way:

1. Add offset dependency parameter manually to scrollviewer.

2. Duplicate your scrollviewer

3. Use an animator.