WPF How to animate a property based on a custom event?

Question

I'm trying to create a simple change in the background color of a border based on a timer.

I have this XAML:(That I pretty much copied from this answer)

    <Grid>
        <Border CornerRadius="50"
                x:Name="ledColor"
                BorderBrush="Black"
                Background="Gray"
                BorderThickness="5">
            <Border.Triggers>
                <EventTrigger RoutedEvent="Border.MouseLeave"> //Event that triggers the animation
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation To="LightGreen"
                                            Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                            FillBehavior="Stop"
                                            Duration="0:0:0.1"
                                            AutoReverse="True"></ColorAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Border.Triggers>
            <Viewbox Stretch="Uniform"
                     VerticalAlignment="Center"
                     HorizontalAlignment="Center">
                <Label Content="Tx" />
            </Viewbox>
        </Border>
    </Grid>

Which works just fine for the built-in MouseLeave event. When I hover over the control and then move the mouse outside, the background color changes to green and then returns to its original state.

However, what I want to do is to trigger the animation based on a custom event.

In the code behind I made a timer with a 1000ms interval. I want to trigger the animation on the timer's 'Elapsed' event.

        public partial class LedIndicator : UserControl
    {
        private System.Timers.Timer _timer;
              

        public Timer Timer { get => _timer; set => _timer = value; }

        public LedIndicator()
        {
            InitializeComponent();
           
            Timer = new System.Timers.Timer
            {
                AutoReset = true,
                Interval = 1000
            };
            Timer.Elapsed += OnTimerElapsed;
            Timer.Start();
        }

        public void OnTimerElapsed(object? sender, System.Timers.ElapsedEventArgs e)
        {
            Debug.WriteLine($"Timer elapsed");
        }
    }

I wrapped the timer in a Property in the hope of somehow exposing its Elapse event to the XAML. But I have no idea how to do it.

Answer 1

Here is a rough example

Create a Brush and Storyboard in code somewhere:

private SolidColorBrush myChangingBackground = new SolidColorBrush();

//at some point set the Background of the Button to this Brush in code behind. Loaded Event or maybe the Constructor
ledColor.Background = myChangingBackground;

private myAnimation = new ColorAnimation(Colors.LightGreen, new Duration(new TimeSpan(0, 0, 1)), FillBehavior.Stop);
myAnimation.AutoReverse = true;    

Setup the timer:

private System.Threading.Timer animationTimer = new Timer(_ => 
{
    //need dispatcher to execute on UI thread
    Dispatcher.Invoke(() => 
    {
       myChangingBackground.BeginAnimation(SolidColorBrush.ColorProperty, myAnimation);
    });
}, 0, 1000); //start immediately, and elapse every 1 second

Answer 2

This is a small modification of @Ginger Ninja's answer to a working example.

When I tried his answer out, I got an exception saying that you can't animate the background property of type Brush with ColorAnimation.

After some Googleing, I found this post about animating a background.

Saying that you actually should animate the Brush like so:

SolidColorBrush brush = new SolidColorBrush(Colors.Red);
buttonName.Background = brush;
 
ColorAnimation animation = new ColorAnimation(Colors.Red, Colors.Blue, 
               new Duration(TimeSpan.FromSeconds(5)));
 
animation.AutoReverse = true;
animation.RepeatBehavior = RepeatBehavior.Forever;
brush.BeginAnimation(SolidColorBrush.ColorProperty, animation);

But I did not want to set the initial Brush color in code so I tried to do something like this:

SolidColorBrush backgroundBrush = (SolidColorBrush)ledColor.Background;
backgroundBrush.BeginAnimation(SolidColorBrush.ColorProperty, _colorAnimation);

But this resulted in throwing another exception saying that you can't animated 'Frozen or Sealed' objects.

This answer said you should give a new mutable instance of a SolidColorBrush to the object you wish to animate. And this is what I did:

public partial class LedIndicator : UserControl
    {
        private System.Timers.Timer _timer;

        private readonly ColorAnimation _colorAnimation;

        public Timer Timer { get => _timer; set => _timer = value; }

        public LedIndicator()
        {
            InitializeComponent();

            _colorAnimation = new ColorAnimation(Colors.LightGreen, new Duration(new TimeSpan(0, 0, 0, 0, 50)), FillBehavior.Stop)
            {
                AutoReverse = true
            };

            Timer = new System.Timers.Timer
            {
                AutoReset = true,
                Interval = 500
            };
            Timer.Elapsed += OnTimerElapsed;
            Timer.Start();

        }

        public void OnTimerElapsed(object? sender, System.Timers.ElapsedEventArgs e)
        {
            Debug.WriteLine($"Timer elapsed");
            Dispatcher.Invoke(() =>
            {
                
                SolidColorBrush brush = new(((SolidColorBrush)ledColor.Background).Color);
                ledColor.Background = brush; //replace the original brush with a new mutable brush of the same color.
                brush.BeginAnimation(SolidColorBrush.ColorProperty, _colorAnimation); // start animation
            });
            

        }
    }

This is the result: