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

Question

我有一个文本块绑定到一个滚动查看器来滚动文本。当某些事件（比如点击按钮）被触发时，我希望文本能够自动滚动，而不需要用户输入。我尝试使用ScrollToVerticalOffset，但过渡效果不够平滑。是否有任何方法可以使文本向上平滑滚动。

- Mugu

Answer 1

这里有一个示例，我创建了一个称为AnimatableScrollViewer的包装控件，它包含一个普通的ScrollViewer和一个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>

在代码后台，我添加了一个DependencyProperty（我们可以从外部进行动画处理），该属性在每次更改时调用我们的ScrollViewer的ScrollToVerticalOffset()方法。

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

现在您可以将AnimatableScrollViewer添加到PhonePage并进行动画处理。例如，在此按钮事件处理程序中：

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

当然，您也可以在xaml代码中创建动画，这样会使其看起来更加简洁。目前，ScrollViewer的内容是固定的...您可以通过向包装类添加更多依赖属性来使其可变。

我不知道这是否是最佳解决方案，事实上它看起来相当丑陋，但它应该为您提供了一个实现的思路。

- Patrick Schmidt

---

我创建了一个新的WP7项目。将AnimatableScrollViewer.xaml和.xaml.cs添加到项目中。我尝试在cmdScroll_Click函数中使用代码。但是我无法启动动画。我想我需要在MainPage.xaml中使用此控件。请告诉我是否需要将此用户控件包含在我的应用程序主页面xaml中。 - Mugu

抱歉，我成功解决了问题。无论如何，还是感谢您的帮助。只需要再求一次助。如果我想要减缓动画速度，应该对代码进行哪些修改？ - Mugu

在点击处理程序中，有一行代码 animation.Duration = new Duration(new TimeSpan(0, 0, 2)); 在这里，您可以修改动画所需的总时间。数字 2 表示 2 秒。 - Patrick Schmidt

Answer 2

您需要对偏移量进行动画处理。由于偏移属性无法进行动画处理，因此您需要使用自己的动画解决方案来更新每一帧的偏移量，或者创建一个附加依赖属性来处理偏移量，该属性在每次更改时调用ScrollToVerticalOffset，并且可以进行动画处理。

- Filip Skakun