Running animation from ViewModel in WPF / MVVM

Question

I am writing an MVVM application and started embedding some animations. I want to call something on the ViewModel that launches the storyboard. This blog has had a promising approach to it , but it actually doesn't work. The IDChanged handler never fires for any reason.

I also found that you can run animation on EventTriggers, but I don’t know how to raise it on ViewModel.

Answer 1

In the end, I added an AnimationStarted event to my ViewModel with a key line for which animation. Then in the view, I create the animation programmatically, subscribe to the AnimationStarted event, and delete the corresponding animation when it fires.

Answer 2

I did this with a DataTrigger and bound it to a property in my ViewModel. When the FlashingBackGround property is set to ON, the storyboard animation begins.

Also do not forget to include in your project a link to "Microsoft.Expression.Interactions"

XAML: (this happens directly in the root of the node)

<Window xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" x:Name="window" > ... <i:Interaction.Triggers> <ei:DataTrigger Binding="{Binding FlashingBackground, Mode=OneWay}" Value="ON"> <ei:ControlStoryboardAction Storyboard="{StaticResource MyAnimation}" ControlStoryboardOption="Play"/> </ei:DataTrigger> </i:Interaction.Triggers> ... </Window> 

ViewModel:

  private void TurnOnFlashingBackround() { FlashingBackground = "ON"; } private string _FlashingBackround = "OFF"; public string FlashingBackground { get { return _FlashingBackround; } private set { if (FlashingBackground == value) { return; } _FlashingBackround = value; this.OnPropertyChanged("FlashingBackground"); } } public new event PropertyChangedEventHandler PropertyChanged; private void OnPropertyChanged(string propertyName) { if (this.PropertyChanged != null) { this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } } 

Finally, the Viewmodel must inherit from "INotifyPropertyChanged"

Answer 3

I have a property in my virtual machine that reflects the state of the application. Elements in an animated view have a data trigger that triggers a storyboard when the VM property has a specific value.

Answer 4

I ran into the same problem and none of these messages helped because the animations were in code, and some of them were large and complex and required variable variables, so they had to stay in the code. I resolved it by adding dependency properties to the user control (view) that trigger the animation, and binding them to the properties in the view model. I don’t know (/ care) if this violates something, because it works very well! cheers, stepp

excerpt:

(view) Usercontrol code behind:

  public override void OnApplyTemplate() { base.OnApplyTemplate(); SetAnimationBindings(); } private void SetAnimationBindings() { _dialogStartPosition = mbFolderBrowse.Margin; var propName = "StartDialogAnimation"; var binding = new Binding(propName) { Mode = BindingMode.TwoWay }; this.SetBinding(DialogAnimationProperty, binding); propName = "StartProgressAnimation"; binding = new Binding(propName) { Mode = BindingMode.TwoWay }; this.SetBinding(ProgressAnimationProperty, binding); } #region Animation Properties #region DialogAnimation public static readonly DependencyProperty DialogAnimationProperty = DependencyProperty.Register("DialogAnimation", typeof(bool), typeof(Manage), new FrameworkPropertyMetadata(false, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, OnDialogAnimationChanged)); public bool DialogAnimation { get { return (bool)this.GetValue(DialogAnimationProperty); } set { var oldValue = (bool)this.GetValue(DialogAnimationProperty); if (oldValue != value) this.SetValue(DialogAnimationProperty, value); } } private static void OnDialogAnimationChanged(DependencyObject o, DependencyPropertyChangedEventArgs e) { Manage m = o as Manage; if ((bool)e.NewValue == true) m.SlideInDialogPanel(); // animations else m.SlideOutDialogPanel(); } #endregion 

View model:

 public bool StartDialogAnimation { get { return _startDialogAnimation; } set { if (_startDialogAnimation != value) { _startDialogAnimation = value; RaisePropertyChanged("StartDialogAnimation"); } } }