在WP7中滚动查看器文本块滚动

Question

I have an text block bound to an scroll viewer to scroll the text. I want the text to scroll automatically with out any user input when some event like button click is fired. I tried using ScrollToVerticalOffset but the transition is not smooth. Is there anyway I could make the text scroll upwards smoothly.

Answer 1

Here is an example where I created a wrapper control called AnimatableScrollViewer, which holds a usual ScrollViewer and a TextBlock.

<UserControl>
    <Grid x:Name="LayoutRoot" Background="Transparent">
            <ScrollViewer x:Name="scrollViewer" Width="{Binding ActualWidth, ElementName=userControl, Mode=OneWay}" Height="{Binding ActualHeight, ElementName=userControl, Mode=OneWay}">
                <TextBlock TextWrapping="Wrap" Text="Add some pretty long text here..."/>
        </ScrollViewer>
    </Grid>
</UserControl>

In the code-behind, I added a DependencyProperty (which we can animate from outside) that calls the ScrollToVerticalOffset() method of our ScrollViewer at every change.

public partial class AnimatableScrollViewer : UserControl
{
    public static readonly DependencyProperty AnimatablOffsetProperty = DependencyProperty.Register("AnimatableOffset",
        typeof(double), typeof(AnimatableScrollViewer), new PropertyMetadata(AnimatableOffsetPropertyChanged));

    public double AnimatableOffset
    {
        get { return (double)this.GetValue(AnimatablOffsetProperty); }
        set { this.SetValue(AnimatablOffsetProperty, value); }
    }

    public AnimatableScrollViewer()
    {
        InitializeComponent();
        AnimatableOffset = scrollViewer.VerticalOffset;
    }

    private static void AnimatableOffsetPropertyChanged(object sender, DependencyPropertyChangedEventArgs args)
    {
        AnimatableScrollViewer cThis = sender as AnimatableScrollViewer;
        cThis.scrollViewer.ScrollToVerticalOffset((double)args.NewValue);
    }
}

Now you can add the AnimatableScrollViewer to a PhonePage and animate it. For example in a button eventhandler like this one:

private void cmdScroll_Click(object sender, RoutedEventArgs e)
    {
        // Calculate target offset
        double targetOffset = 1000;

        // Create animation and storyboard
        DoubleAnimation animation = new DoubleAnimation();
        animation.EasingFunction = new CircleEase();
        animation.Duration = new Duration(new TimeSpan(0, 0, 2));
        animation.From = animatableScrollViewer.AnimatableOffset;
        animation.To = targetOffset;

        Storyboard.SetTarget(animation, animatableScrollViewer);
        Storyboard.SetTargetProperty(animation, new PropertyPath("(AnimatableScrollViewer.AnimatableOffset)"));
        Storyboard storyboard = new Storyboard();
        storyboard.Children.Add(animation);

        storyboard.Begin();
    }

Of course you can also create the animation in your xaml code which would make it look a litte cleaner. Right now, the content of the ScrollViewer is fixed... you can make it changeable by adding more dependency properties to the wrapper class.

I don't know if this is the best solution, in fact it looks quite ugly to me but it should give you an idea of how it can be done.

Answer 2

You would need to animate the offset. Since the offset properties can't be animated - you would either have to use your own animation solution to update the offset every frame or create an attached dependency property for the offset that would call ScrollToVerticalOffset on each change and would be animate-able.