c# - 文字书写动画像word 2013

Question

<分区>

Answer 1

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

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

2-添加一个 Canvas ，里面有一个矩形(矩形是您的新光标)。

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 中自定义控件的更多信息，请参阅 this关于 codeproject 的文章。

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