Trigger a Storyboard on ViewModel changes (Trigger the Storyboard when the ViewModel is changed)

Original http://mark.mymonster.nl/2010/12/14/trigger-a-storyboard-on-viewmodel-changes/

Interactions based on ViewModel changes are easy as soon as you understand how it works. A lot of people have been hiding and showing elements in the UI based on a boolean in the ViewModel which is converted to fit the Visibility property. of course they used an IValueConverter that translates a bool to a Visibility enum.

But sometimes designers are tough, they don't want to show and hide, they want to play a full animation. of course I know about the ability to trigger a Storyboard by using EventTriggers (control Loaded or Clicked for example ). but did you know about the DataTrigger?

DataTrigger

The DataTrigger comes Expression Blend, you'll have to reference the Microsoft. Expression. Interactions library, which can be found here:C: \ Program Files (x86) \ Microsoft SDKs \ Expression \ Blend \ Silverlight \ v4.0 \ Libraries \ Microsoft. Expression. Interactions. dll

It's not really that complex to use. If you only want to start a Storyboard when a specific value is put in the bound property the binding looks very much like this.

?

1234567

<Grid x:Name="LoginGrid">  <i:Interaction.Triggers>    <ei:DataTrigger Binding="{Binding IsLoggedIn}" Value="true">      <ei:ControlStoryboardAction x:Name="FadeOutOnLogin" Storyboard="{StaticResource LoginFadeOut}"/>    </ei:DataTrigger>  </i:Interaction.Triggers></Grid>

Operators

If you have something more specific where you want to use an operator other than equal it will be just a little bit different. The below only starts the storyboard when the value is less than 1.

?

1234567

<Grid x:Name="LoginGrid">  <i:Interaction.Triggers>    <ei:DataTrigger Binding="{Binding IsLoggedIn}" Value="1" Comparison="LessThan">      <ei:ControlStoryboardAction x:Name="FadeOutOnLogin" Storyboard="{StaticResource LoginFadeOut}"/>    </ei:DataTrigger>  </i:Interaction.Triggers></Grid>

You can use any of the following operators:Equal, NotEqual, LessThan, LessThanOrEqual, GreaterThan, GreaterThanOrEqual.

Really complex scenario's

Alright, it will start to become more complex when you have more than just on condition that needs to be applied. it wocould be more clear to make use of a PropertyChangedTrigger in that case, and additional set Conditions. the below example gets a trigger ifIsLoggedIn is changed, And than will apply the conditions,Greater than 1AndLess than 10In this example. If the outcome of the conditions is true the Storyboard will start.

?

123456789101112131415

<Grid x:Name="LoginGrid">  <i:Interaction.Triggers>    <ei:PropertyChangedTrigger Binding="{Binding IsLoggedIn}">      <i:Interaction.Behaviors>        <ei:ConditionBehavior>          <ei:ConditionalExpression>            <ei:ComparisonCondition LeftOperand="{Binding IsLoggedIn}" Operator="GreaterThan" RightOperand="1"/>            <ei:ComparisonCondition LeftOperand="{Binding IsLoggedIn}" Operator="LessThan" RightOperand="10"/>          </ei:ConditionalExpression>        </ei:ConditionBehavior>      </i:Interaction.Behaviors>      <ei:ControlStoryboardAction x:Name="FadeOutOnLogin" Storyboard="{StaticResource LoginFadeOut}"/>    </ei:PropertyChangedTrigger>  </i:Interaction.Triggers></Grid>

Doing other things...

Yes this isn't limited to the controlling of a storyboard. you can also use the GoToStateAction or any other action, mentioned here. but it's not limited to built-in actions, you can build your own Trigger Action by implementing TriggerAction <T>.