c# - 文字写作动画，如 word2013

Question

我想知道，如果我可以制作一个 TextBox 或任何可以在其上写一些文本的控件，就像 Word 2013 一样，动画体验非常好。

我现在可以在控件本身（TextBox，...）上进行动画类型，但是要对光标或文本本身进行这种类型的动画，这是新的。

Answer 1

您可以创建从默认 WPF 文本框继承的 WPF UserControl 或自定义控件。我能够使用以下方法创建一个为光标位置设置动画的文本框：

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

2-添加一个画布，里面有一个矩形（矩形是你的新光标）。

3-将 Texboxes CaretBrush 设置为透明。

4-在 UserControl 的代码隐藏中创建一个方法以在光标位置更改时为光标设置动画。

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

例子：

用户控件 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 的持续时间。