Add storyboard for Validation.ErrorTemplate in WPF - wpf

Question

I'm trying to animate a fade-in and fade-out of my ErrorTemplates to not scare my users too much by occurring too quickly. The thing I came up with is the below code (which does not work). I guess the ErrorTemplate does not have access to the attached Validation.HasError property on the control. I also tried a DataTrigger bound to Validation.HasError on self, but that doesn't work either.
<ControlTemplate x:Key="ValidationTemplate">
<ControlTemplate.Triggers>
<Trigger Property="Validation.HasError" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation AutoReverse="true"
Duration="0:0:0.5"
RepeatBehavior="3x"
Storyboard.TargetName="border"
Storyboard.TargetProperty="Opacity"
To="0.6" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
<Border x:Name="border"
BorderBrush="Red"
BorderThickness="1"
CornerRadius="2"
Opacity="0.0">
<AdornedElementPlaceholder Margin="-1" />
</Border>
</ControlTemplate>
-- UPDATE
I found out that another less generic but nice way is to restyle controls by implementing ValidationStates visual state group using the visual statemanager. http://msdn.microsoft.com/en-us/library/ms752068%28v=vs.110%29.aspx

Answer 1

You were on the right track with the DataTrigger.
But you need to bind to the adorner's AdornedElement Validation.HasError property with:
<ControlTemplate x:Key="ValidationTemplate">
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding ElementName=adorner,
Path=AdornedElement.(Validation.HasError)}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation AutoReverse="true"
Duration="0:0:0.5"
RepeatBehavior="3x"
Storyboard.TargetName="border"
Storyboard.TargetProperty="Opacity"
To="0.6" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</ControlTemplate.Triggers>
<Border x:Name="border" BorderBrush="Red" BorderThickness="1" CornerRadius="2"
Opacity="0.0">
<AdornedElementPlaceholder Margin="-1" x:Name="adorner" />
</Border>
</ControlTemplate>