Using data binding to run animations in WPF

Question

I am trying to adapt a simple WPF application to use the Model-View-ViewModel template. On my page, I have several animations:

<Page.Resources> <Storyboard x:Name="storyboardRight" x:Key="storyboardRight"> <DoubleAnimation x:Name="da3" Storyboard.TargetName="labelRight" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.5" /> <DoubleAnimation x:Name="da4" Storyboard.TargetName="labelRight" Storyboard.TargetProperty="Opacity" From="1" To="0" BeginTime="0:0:1" Duration="0:0:0.5" /> </Storyboard> ... </Page.Resources> 

I am currently starting the animation in the code behind and can listen to the Completed event to do something when it ends with the following code:

 storyboardRight = (Storyboard)TryFindResource("storyboardRight"); storyboardRight.Completed += new EventHandler(storyboardRight_Completed); storyboardRight.Begin(this); 

Is there a way to bind data to the storyboard to my ViewModel so that it starts with the event raised by the ViewModel and can it return to this ViewModel when it is complete?

Answer 1

I had the opportunity to ask this question Microsoft Josh Twist, who kindly took the time to give an answer to this problem. The solution is to use a DataTrigger in combination with an enumeration in the ViewModel to run the storyboard, and this, in turn, requires placing the page in ContentPresenter . To handle the completion of the animation, a small amount of code was required to call ICommand on the ViewModel.

Read the Josh post here for a full description of the solution.

Answer 2

You need to use EventTrigger . This article on animation in WPF can help. See Also Overview of Routed Events on MSDN and How to Use: Event Triggers to control the storyboard after it is launched .

Answer 3

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() { this.FlashingBackground = "ON"; } private string _FlashingBackround = "OFF"; public string FlashingBackground { get { return this._FlashingBackround; } private set { if (this.FlashingBackground == value) { return; } this._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"