像Word2013一样的文本书写动画

Question

我想知道是否可以制作一个可写入文本的TextBox或任何控件，使其像Word 2013一样，动画体验非常好。

目前我已经能够对控件本身（如TextBox等）进行此类型的动画，但是要对光标或文本本身执行此类型的动画则是新的挑战。

- HB MAAM

---

为了更加清晰（对于那些尚未看到的人），Office 2013中的光标在移动时会有一个扫过的动画效果，包括在您输入字符时、或者在Excel电子表格中点击时。 - Dan Puzey

如果我没错的话，但也许这个决定并不容易。由于WPF渲染特性，TextBox中的Animation受到开发者的限制。例如，文本属性不是依赖属性，所以动画无法涉及它。另一方面，在MS Office中工作时，希望能够正常实现。因此有解决方案的希望...但是在什么方面呢？ - Anatoliy Nikolaev

就我个人而言，我非常非常讨厌Office 2013中的所有这些动画。啊啊啊啊啊！ - Uwe Keim

@UweKeim，虽然我个人喜欢它们，但是它们可以关闭。 - ghord

哇，@Athari，这真是糟糕透了。为什么有人想要在他们自己的应用程序中复制这个呢？ - Cody Gray

Answer 1

你可以创建一个WPF UserControl或自定义控件，它继承了默认的WPF文本框。我能够用以下方法创建一个文本框来动画化光标位置:

1-创建一个用户控件并添加一个文本框。

2-添加一个画布和一个矩形(矩形是你的新光标)。

3-将Texboxes CaretBrush设置为透明。

4-在UserControl的code-behind中创建一个方法，在光标位置更改时动画化光标。

5-当某些事件发生会改变光标位置时，调用步骤4的动画方法。

示例:

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>

代码后台：

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

注意：这不是一个全面的解决方案，因为它没有处理选定文本的突出显示动画，并且在文本被突出显示时也没有隐藏光标，但这是一个开始。我建议创建一个自定义控件，继承自TextBox，然后在文本框默认样式模板中布局控件，而不是使用UserControl。这样，您就可以保留所有TextBox的功能，同时获得新的动画功能。要了解有关WPF中自定义控件的更多信息，请参见codeproject上的此文章。

要更改动画速度，只需更改cursorAnimation的持续时间。

- Paul Stark