Text Writing Animation like word2013 [duplicate]

Question

I was wondering, if I can make a TextBox or any control that you can write some text on it, to be like Word 2013, the animation experience is very good.

I am now able to do type of animation on the control itself (TextBox,...), but to do this type of animation to the cursor or on the text itself this is new.

Answer 1

You could create a WPF UserControl or custom control which inherits from the default WPF textbox. I was able to create a textbox that animates the cursor position with the following method:

1-Create a user control and add a textbox to it.

2-Add a canvas with a rectangle inside it (the rectangle is your new cursor).

3-Set the Texboxes CaretBrush to transparent.

4-In the UserControl's code-behind create a method to animate the cursor when the cursor position changes.

5-Call the animation method from step 4 when certain events happen which would change the cursor position.

Example:

UserControl XAML

    <UserControl
        x:Class="YourNamespace.AnimatedCursorTextBox"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        mc:Ignorable="d"
        d:DesignHeight="23"
        d:DesignWidth="300"
        xmlns:c="clr-namespace:System.Windows.Controls;assembly=PresentationFramework"
        Name="Control">
        <UserControl.Resources>
            <c:BooleanToVisibilityConverter
                x:Key="BoolToVisibility" />
        </UserControl.Resources>
        <Grid>
            <TextBox
                Name="MainTextBox"
                CaretBrush="Transparent"
                SelectionChanged="MainTextBox_SelectionChanged"
                TextChanged="MainTextBox_TextChanged"
                GotKeyboardFocus="MainTextBox_GotKeyboardFocus" />
            <Canvas
                Visibility="{Binding IsKeyboardFocusWithin,
                    ElementName=Control,
                    Converter={StaticResource BoolToVisibility}}"
                Height="{Binding ActualHeight, ElementName=MainTextBox}"
                Width="{Binding ActualWidth, ElementName=MainTextBox}">
                <Rectangle
                    HorizontalAlignment="Left"
                    Name="Caret"
                    Width="1"
                    Fill="Black" />
            </Canvas>
        </Grid>
    </UserControl>

Code-Behind:

    public partial class AnimatedCursorTextBox : UserControl
        {
            private DoubleAnimation cursorAnimation = new DoubleAnimation();

            public AnimatedCursorTextBox()
            {
                InitializeComponent();
            }

            private void UpdateCaretPosition()
            {
                var rectangle = MainTextBox.GetRectFromCharacterIndex(MainTextBox.CaretIndex);
                Caret.Height = rectangle.Bottom - rectangle.Top;
                Canvas.SetTop(Caret, rectangle.Top);
                Canvas.SetBottom(Caret, rectangle.Bottom);

                var left = Canvas.GetLeft(Caret);
                if (!double.IsNaN(left))
                {
                    cursorAnimation.From = left;
                    cursorAnimation.To = rectangle.Right;
                    cursorAnimation.Duration = new Duration(TimeSpan.FromSeconds(.05));

                    Caret.BeginAnimation(Canvas.LeftProperty, cursorAnimation);
                }
                else
                {
                    Canvas.SetLeft(Caret, rectangle.Right);
                }
            }

            private void MainTextBox_SelectionChanged(object sender, RoutedEventArgs e)
            {
                UpdateCaretPosition();
            }

            private void MainTextBox_TextChanged(object sender, TextChangedEventArgs e)
            {
                UpdateCaretPosition();
            }

            private void MainTextBox_GotKeyboardFocus(object sender, KeyboardFocusChangedEventArgs e)
            {
                UpdateCaretPosition();
            }
        }

Note: This isn't a comprehensive solution because it doesn't handle the animation of highlighting selected text and it doesn't hide the cursor when text is highlighted, but it is a start. I recommend creating this as a custom control inheriting from TextBox and then do the layout of the control in the textbox's default style's template rather than using a UserControl. That way you can preserve all the functionality of TextBox but still get the new animation features. For more information about Custom Controls in WPF see this article on codeproject.

To change the speed of the animation just change the duration of the cursorAnimation.