Question

我正在尝试制作一个文本框，每当出现/消失任何新字符时，都会以某种方式突出显示该字符（例如，该字符以黄色到黑色的字体颜色渐变显示，...）。就我而言，当我在第一个文本框中编写文本时，我希望第二个文本框中只有新字符出现时才会突出显示。最后，我需要将两个文本逐个字符对齐。

不幸的是，文本框文本属性仅被视为整个字符串的一个属性，因此当我尝试在TextBox.TextChanged事件之后添加动画时，但是在每次按键后整个文本都会淡出。我唯一的想法是编写一些适配器，该适配器将第二个文本框中的字符串转换为标签集合，其中每个标签都可以充当单个字符，因此可以对选定的单个标签（字符）执行突出显示动画。

这是我的项目的最小子问题，它是使用MVVM模式编写的。因此，理想情况下，我正在寻求xaml的解决方案，但我也愿意接受任何黑客解决方案，因为文本框中的字符并非旨在制作动画。

在这里，我在示例中包含了用于重现窗口的代码。

MainWindow

    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="AnimatedTextBoxStyle.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <local:AnimatedTextBoxViewModel x:Key="ViewModel"/>
        </ResourceDictionary>
    </Window.Resources>

    <StackPanel DataContext="{StaticResource ViewModel}" Margin="5,5,5,5">
        <TextBox Margin="0,0,0,2"
                 Style="{StaticResource ResourceKey=AnimatedTextBoxStyle}"
                 Text="{Binding SomeText,
                        UpdateSourceTrigger=PropertyChanged,
                        Mode=TwoWay}">
        </TextBox>
        <TextBox IsEnabled="False"
                 Style="{StaticResource ResourceKey=AnimatedTextBoxStyle}"
                 Text="{Binding SomeText}">
        </TextBox>

    </StackPanel>

AnimatedTextBoxStyle.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:TextBoxCharsAnimation">
    <Style x:Key="AnimatedTextBoxStyle" TargetType="{x:Type TextBox}">
        <Setter Property="FontFamily" Value="Consolas"/>
        <Setter Property="FontSize" Value="16"/>
        <Setter Property="Height" Value="26"/>

        <Style.Triggers>
            <EventTrigger RoutedEvent="TextBox.TextChanged">
                <!-- Maybe begin storyboard here? -->
            </EventTrigger>
        </Style.Triggers>

    </Style>
</ResourceDictionary>

AnimatedTextBoxViewModel.cs

using TextBoxCharsAnimation.Support;

namespace TextBoxCharsAnimation
{
    class AnimatedTextBoxViewModel : ViewModelBase
    {

        private string _someText = "";
        public string SomeText
        {
            get => _someText;
            set
            {
                _someText = value;
                OnPropertyChanged();
            }
        }
    }
}

Answer 1

我们不能使用TextBox控件更改某些特定的字符颜色。我们需要使用RichTextBox而不是第二个文本框。顾名思义，RichTextBox具有丰富的自定义功能。您需要连接PreviewTextInput事件以获取键入的char。下面是示例代码，可能需要进行一些修改以满足您的要求。

private void inputRichTextBox_PreviewTextInput(object sender, TextCompositionEventArgs e)
    {
        TextPointer start;
        start = inputRichTextBox.CaretPosition;
        TextPointer end = inputRichTextBox.Document.ContentEnd;
        TextRange range = new TextRange(start, end);
        range.ApplyPropertyValue(RichTextBox.ForegroundProperty, Brushes.Green);
    }

对于颜色渐变要求而不是Brushes.Green，您需要用类似于下面的代码替换它。

LinearGradientBrush myHorizontalGradient = new LinearGradientBrush();
myHorizontalGradient.StartPoint = new Point(0);
myHorizontalGradient.EndPoint = new Point(1);
myHorizontalGradient.GradientStops.Add(new GradientStop(Colors.Yellow, 0));
myHorizontalGradient.GradientStops.Add(new GradientStop(Colors.Black, 1));

WPF文本框动画文本字符更改

1 个答案: