How to flash error text using WPF animation - wpf

Question

I have textbox displayed using the DataTemplate. In the below code TextBoxViewModel is derived from IDataErrorInfo.
protected String m_ValidationErrorMessage;
protected String ValidationErrorMessage
{
get { return m_ValidationErrorMessage; }
}
private bool m_ShowErrorMessage = false;
public bool ShowErrorMessage
{
get { return m_ShowErrorMessage; }
set { this.m_ShowErrorMessage = value; }
}
private String m_DisplayValue;
public String DisplayValue
{
get { return this.m_DisplayValue; }
set
{
if (m_DisplayValue != value)
{
if (IsTextValid(value, out m_ValidationErrorMessage))
{
// Set data to model
this.SendPropertyChangedEvent(nameof(this.DisplayValue));
}
else
{
ShowErrorMessage = true;
}
}
}
}
public string this[string columnName]
{
get
{
if (columnName == nameof(this.DisplayValue))
{
if (ShowErrorMessage)
{
return ValidationErrorMessage;
}
}
return null;
}
}
xaml for TextBoxViewModel
<DataTemplate DataType="{x:Type vms:TextBoxViewModel}">
<DockPanel>
<Label Content="{Binding Path=DisplayName}" MinWidth="120" MaxWidth="150"/>
<TextBox DockPanel.Dock="Left" Text="{Binding Path=DisplayValue,Mode=TwoWay, UpdateSourceTrigger=Default,ValidatesOnDataErrors=True}" Validation.ErrorTemplate="{StaticResource ErrorTemplate}"/>
</DockPanel>
</DataTemplate
<ControlTemplate x:Key="ErrorTemplate">
<StackPanel Orientation="Horizontal">
<AdornedElementPlaceholder x:Name="textBox"/>
<ItemsControl ItemsSource="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding ErrorContent}" Foreground="Red"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ControlTemplate>
I am trying to flash the error text for few seconds and hiding it after that. Is there any way to achieve this using the XAML (WPF animation)?

Answer 1

You could for example animate the Opacity property of the TextBlock using a DoubleAnimation. Something like this:
<ControlTemplate x:Key="ErrorTemplate">
<StackPanel Orientation="Horizontal">
<AdornedElementPlaceholder x:Name="textBox"/>
<ItemsControl ItemsSource="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding ErrorContent}" Foreground="Red">
<TextBlock.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
From="0" To="1"
AutoReverse="False"
Duration="0:0:0.5"
RepeatBehavior="3x" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ControlTemplate>