Trying to animate the Path StrokeProperty throws Invalid operation exception

Question

I have code when a certain value is reached, I want to flash the Stroke of the Path to Red. When I try to apply the animation like this, it says "''System.Windows.Media.Animation.DoubleAnimation' animation object cannot be used to animate property 'Stroke' because it is of incompatible type 'System.Windows.Media.Brush'.'" I also tried ColorAnimation and still a similar exception. Please help.

In the ControlTemplate of xaml I have Path defined as follows.

<ControlTemplate x:Key="FlaskProgressBarTemplate" TargetType="{x:Type local:FlaskProgressBar}">
<Grid>
<Path x:Name="Outline"
      StrokeThickness="8"
      Stroke="Black">
          <Path.Data>
                <PathGeometry Figures="M 20,15 L 20,60 0,110 60,110 40,60 40,15 Z"/>
          </Path.Data>
  </Path>
</Grid>

In the code behind on some method exceution,

private Path _contentPath;
  public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            _contentPath = this.GetTemplateChild("Outline") as Path;

            SetValue(this, Value);
        }

     private static void SetValue(FlaskProgressBar instance, double value)
            {
                if (instance._content != null)
                {
                    var rect = instance._content.Rect;
                    instance._content.Rect = new Rect(rect.X, rect.Height - value, rect.Width, rect.Height);
                    if (value == 100)
                    {
                        AnimateBorder(instance); //Error in this method.
                    }
                }
            }
    
      private static void AnimateBorder(FlaskProgressBar instance)
            {
                var path = instance._contentPath;
                if (path != null)
                {
                    path.Stroke = new SolidColorBrush(Colors.Red);
                    var switchOnAnimation = new DoubleAnimation
                    {
                        To = 1,
                        Duration = TimeSpan.Zero,
                        BeginTime = TimeSpan.FromSeconds(0.5)
                    };
    
                    var blinkStoryboard = new Storyboard
                    {
                        Duration = TimeSpan.FromSeconds(1),
                        RepeatBehavior = RepeatBehavior.Forever
                    };
                    Storyboard.SetTarget(switchOnAnimation, path);
                    Storyboard.SetTargetProperty(switchOnAnimation, new PropertyPath(Path.StrokeProperty));
                    blinkStoryboard.Children.Add(switchOnAnimation);
    
                    path.BeginStoryboard(blinkStoryboard); //I get an exception on this line.
                }
            }

Answer 1

You can achieve a blinking effect by animating the brush's Opacity property (which is of type Double) rather than the brush itself.

This is the style from my BlinkingBorder class that featured in a recent blog post.

<Style TargetType="{x:Type vctrl:perBlinkingBorder}">
    <Style.Triggers>
        <Trigger Property="IsBlinking" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard TargetProperty="(BlinkingBorderBrush).Opacity">
                        <DoubleAnimation
                            AutoReverse="True"
                            RepeatBehavior="Forever"
                            From="1"
                            To="0"
                            Duration="0:0:0.5">
                            <DoubleAnimation.EasingFunction>
                                <SineEase EasingMode="EaseInOut" />
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
        </Trigger>
    </Style.Triggers>
</Style>