WPF text box animated text characters change - wpf

Question

I am trying to make a text-box, where whenever any new character appears/disappears, it is somehow highlighted (eg. the character appears with yellow to black font-color fade in gradient, ...).
In my case, when I write a text in the first text-box, I expect ONLY NEW CHARACTERS in the second text-box to be highlighted, when they appears. Lastly I need to have both texts to be char by char aligned.
Unfortunetaly text-box text property is seen only as one property of the whole string, so when I tried to add animations after TextBox.TextChanged event, but the whole text faded in after every keystroke. My only idea is to write some adapter, which transforms the string in the second text-box to collection of labels, where every label could act as a single character, so the highlighting animations could be performed on the selected individual labels (chars).
This is a minimal sub-issue of my project, which is written using the MVVM pattern. So ideally, I am seeking for solution in xaml, but I am also open to any hacking solution, since characters in the text-box is not designed to be animated.
Here, I include a code to reproduce the window in the example.
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

We cannot use TextBox control to change some specific character color. We need to use RichTextBox instead of second text box. RichTextBox as the name suggests is rich for customization. You need to hook up the PreviewTextInput event to get the typed char.
Below is the sample code which might need some modifications to suit your requirements.
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);
}
For colour gradient requirement instead of Brushes.Green you need to replace it with similar to below code.
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));