C# WPF Scroll Animation on a RichTextBox

Question

I need to realize in C# .NET with WPF a ScrollBar Animation on a RichTextBox Control.

When i click on a button, the animation is supposed to bring me at the end of the text. For this I use the ScrollToEnd() method but i do not know how to perform the animation. I tried things with the BeginAnimation() method but nothing worked.

If anyone of you had any idea, it would be awesome. Thanks!

My XAML :

<Window x:Class="TestWpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="177.811" Width="338.88">
<Grid Margin="0,0,2,-1">
    <RichTextBox x:Name="rtb" HorizontalAlignment="Left" Height="100" Margin="10,10,0,0" VerticalAlignment="Top" Width="319" ScrollViewer.VerticalScrollBarVisibility="Visible">
        <FlowDocument>
            <Paragraph>
                <Run Text="RichTextBoxR
                     ichTextBoxRichTextBoxRichTextBoxRic
                     hTextBoxRichTextBoxRichTextBoxRichTextBoxRichTextBoxRichTextBoxRichTextBoxRichTextBoxRichTe
                     xtBoxRichTextBoxRichTextBoxRichTextBoxRichTextBoxRichTextBoxRichTextBoxRichTextBoxRichTextBoxRic
                     hTextBoxRichTextBoxRichTextBoxRichTextBoxRichTextBoxRichTextBoxRichTextBoxRichTextBoxRichTextBoxRichTextB
                     oxRichTextBoxRichTextBoxRichTextBoxRichTextBoxRichTextBoxRichTextBoxRichTextBoxRi
                     extBoxRichTextBoxRichTextBoxRichTextBoxRichTe
                     xtBoxRichTextBoxRichTextBoxRichTextBoxRichTextBoxRichTe
                     xtBoxRichTextBoxRich
                     TextBoxRichT
                     extBox"/>
            </Paragraph>
        </FlowDocument>
    </RichTextBox>
    <Button Content="Button" HorizontalAlignment="Left" Margin="122,121,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click_1"/>
</Grid>

My button click method in the XAML.cs :

private void Button_Click_1(object sender, RoutedEventArgs e) { rtb.ScrollToEnd(); }

Thanks a lot ! Best Regards.

Answer 1

Ok i found the solution. I created a new class from RichTextBox properties and added a Dependencyproperty to make it works :

class ExtRichTextBox : RichTextBox
{
    public static DependencyProperty CurrentVerticalOffsetProperty =
        DependencyProperty.Register("CurrentVerticalOffset", typeof(double), typeof(ExtRichTextBox), new PropertyMetadata(new PropertyChangedCallback(OnVerticalChanged)));

    private static void OnVerticalChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        ExtRichTextBox extRtb = d as ExtRichTextBox;
        extRtb.ScrollToVerticalOffset((double)e.NewValue);
    }

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

Sure you need to replace the old control by the new one then you use a storyboard to animate the scrollbar :

        private void Button_Click_1(object sender, RoutedEventArgs e)
    {
        DoubleAnimation vertAnim = new DoubleAnimation();
        vertAnim.From = rtb.VerticalOffset;
        vertAnim.To = 100;
        vertAnim.DecelerationRatio = .2;
        vertAnim.Duration = new Duration(TimeSpan.FromMilliseconds(1000));
        Storyboard sb = new Storyboard();
        sb.Children.Add(vertAnim);
        Storyboard.SetTarget(vertAnim, rtb);
        Storyboard.SetTargetProperty(vertAnim, new PropertyPath(ExtRichTextBox.CurrentVerticalOffsetProperty));
        sb.Begin();
    }

Just replace coordonnates given to vertAnim.To property to scroll at the position you want.