Animate ScrollPosition

How-to Discussions
1

Im trying to animate the ScrollPosition to 0 when I touch the top of the screen. I try with something like this:

<Panel HeightUnit="Points" Height="20" WidthUnit="Percent" Width="100" Background="Red" Alignment="Top">

    <Clicked>
        <Change Target="MyScrollViewer.ScrollPosition" Value="0" Duration="1" Easing="CubicOut" />
    </Clicked>

    <Rectangle />
</Panel>

<ScrollViewer ux:Name="MyScrollViewer">
</ScrollViewer>

But the ScrollPosition change without animation… Change instantly.

It is posible to do that with a transition?

Thanks

2

I’m not sure why that is instantly jumping, as there is a duration, but there’s other reasons it isn’t what you want.

Change can’t really be attached to properties that are chagned outside of the animation system, like ScrollPosition. It doesn’t correctly understand what the rest and current position is.

For scrolling you need to do a BringIntoView on one of the elements. Inside a scroller this will cause the scroller to animate the scrolling to that position. Of course this only works if you have an element at the top.

The other way is to call Goto on the underlying Scroller. In your case this would be, in Uno code:

MyScrollviewer.Scroller.Goto( MyScrollviewer.MinScroll );

This will animate going to the top of the scroll region. Note I used MinScroll since 0 isn’t always the top, it depends on alignment settings and content.

Note, I’ll enter some feature requests to make this possible form UX.