Unable to apply Storyboard to multiple controls

Question

I have a Storyboard in my resource file that I want to apply to multiple controls. I get my resource and loop through the Storyboards children and apply it to my controls. However, only 1 control get the animation when it runs. I can run it on either one, but not bot

Storyboard flashingStoryboard = Application.Current.Resources["FlashingStoryboard"] as Storyboard;
foreach (var child in flashingStoryboard.Children)
{
Storyboard.SetTarget(child, this.flashingControl1.FindChildByName("FlashingBorder"));
Storyboard.SetTarget(child, this.flashingControl2.FindChildByName("FlashingBorder"));
}
flashingStoryboard.Begin();

Accepted Answer

Hi,
You can animate property and bind this property to many Controls and all showed animations will be synchonously.

XAML MainWindow:

Classes:

using System;  
using System.Collections.ObjectModel;  
using System.ComponentModel;  
using System.Runtime.CompilerServices;  
using System.Windows;  
using System.Windows.Controls;  
using System.Windows.Input;  
using System.Windows.Media;  
using System.Windows.Media.Animation;  
using WpfControlLibrary1;  
  
namespace WpfApp004  
{  
  public class ViewModel : INotifyPropertyChanged  
  {  
    public ViewModel()  
    {  
      Animating = new AnimatedProperties();  
      Animating.AnimationCompleted += (sender, e) => OnPropertyChanged(nameof(Cmd));  
    }  
    public ObservableCollection UserControls { get; } = new ObservableCollection();  
    public AnimatedProperties Animating { get; }  
    public ICommand Cmd { get => new RelayCommand(CmdExec, CanCmdExec); }  
    private void CmdExec(Object parameter)  
    {  
      switch (parameter.ToString())  
      {  
        case "StartAnimation":  
          Animating.StartAnimation();  
          break;  
        case "AddUserControl":  
          UserControls.Add(new Window004UC1());  
          break;  
        default:  
          break;  
      }  
    }  
    private bool CanCmdExec(object obj) => Animating.ca == null;  
    public event PropertyChangedEventHandler PropertyChanged;  
    private void OnPropertyChanged([CallerMemberName] string propName = "") => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName));  
  }  
  
  public class AnimatedProperties : DependencyObject  
  {  
    public AnimatedProperties() => sb.Completed += (sender, e) => { ca = null; AnimationCompleted?.Invoke(this, new EventArgs()); };  
  
    public static readonly DependencyProperty AnimatedColorProperty =  
      DependencyProperty.RegisterAttached("AnimatedColor",  
        typeof(Color), typeof(AnimatedProperties), new UIPropertyMetadata(Colors.Red));  
  
    public static Color GetAnimatedColor(DependencyObject d) => (Color)(d.GetValue(AnimatedColorProperty));  
    public static void SetAnimatedColor(DependencyObject d, Color value) => d.SetValue(AnimatedColorProperty, value);  
  
    public ColorAnimation ca;  
    private Storyboard sb = new Storyboard();  
    public event EventHandler AnimationCompleted;  
  
    public void StartAnimation()  
    {  
      if (ca == null)  
      {  
        ca = new ColorAnimation()  
        {  
          From = Colors.Yellow,  
          To = Colors.Blue,  
          Duration = new Duration(TimeSpan.FromSeconds(2.0)),  
          RepeatBehavior = new RepeatBehavior(1),  
          AutoReverse = true  
        };  
        sb.Children.Clear();  
        sb.Children.Add(ca);  
        Storyboard.SetTarget(ca, this);  
        Storyboard.SetTargetProperty(ca, new PropertyPath(AnimatedProperties.AnimatedColorProperty));  
        sb.Begin();  
      }  
    }  
  }  
  
  public class RelayCommand : ICommand  
  {  
    private readonly Predicate

Answer

Hi;
see my other answer (in other thread). You can animate property in ViewModel and bind this property to many Controls and all showed animations will be synchonously.

Answer

Hello, CraigMuckleston

Welcome to Microsoft Q&A!

Unable to apply Storyboard to multiple controls

The problem is that the Storyboard will be covered when you call SetTarget method at last time. so it can only apply last one control. For your requirement, we suggest you place the Storyboard in the UserControl like the following.

Code Bebehind

public sealed partial class FlashControl : UserControl  
{  
    public FlashControl()  
    {  
        this.InitializeComponent();  
          
    }  
    public bool IsStartAnimation  
    {  
        get { return (bool)GetValue(IsStartAnimationProperty); }  
        set { SetValue(IsStartAnimationProperty, value); }  
    }  
  
    // Using a DependencyProperty as the backing store for IsStartAnimation.  This enables animation, styling, binding, etc...  
    public static readonly DependencyProperty IsStartAnimationProperty =  
        DependencyProperty.Register("IsStartAnimation", typeof(bool), typeof(FlashControl), new PropertyMetadata(null));  
}

Usage

  

private void Button_Click(object sender, RoutedEventArgs e)  
{  
  
    ((Setting)Application.Current.Resources["Setting"]).ShowAnimation = true;  
}

For global setting class please refer this case reply.

Thank you.
Nico Zhu

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Share via

Unable to apply Storyboard to multiple controls

2 additional answers

Your answer