MVVM and Animations in Silverlight

Posted by Aligned on Geeks with Blogs See other posts from Geeks with Blogs or by Aligned
Published on Fri, 30 Mar 2012 14:44:38 GMT Indexed on 2012/04/02 11:31 UTC
Read the original article Hit count: 194

I wanted to spin an icon to show progress to my user while some content was downloading. I'm using MVVM (aren't you) and made a satisfactory Storyboard to spin the icon. However, it took longer than expected to trigger that animation from my ViewModel's property.

I used a combination of the GoToState action and the DataTrigger from the Microsoft.Expression.Interactions dll as described here.

Then I had problems getting it to start until I found this approach that saved the day. The DataTrigger didn't bind right away because "it doesn’t change visual state on load is because the StateTarget property of the GotoStateAction is null at the time the DataTrigger fires.". 

Here's my XAML, hopefully you can fill in the rest.

<Image x:Name="StatusIcon" AutomationProperties.AutomationId="StatusIcon" Width="16" Height="16" Stretch="Fill"

Source="inProgress.png" ToolTipService.ToolTip="{Binding StatusTooltip}">

<i:Interaction.Triggers>

<utilitiesBehaviors:DataTriggerWhichFiresOnLoad Value="True" Binding="{Binding IsDownloading, Mode=OneWay, TargetNullValue=True}">

<ei:GoToStateAction StateName="Downloading" />

</utilitiesBehaviors:DataTriggerWhichFiresOnLoad>

<utilitiesBehaviors:DataTriggerWhichFiresOnLoad Value="False" Binding="{Binding IsDownloading, Mode=OneWay, TargetNullValue=True}">

<ei:GoToStateAction StateName="Complete"/>

</utilitiesBehaviors:DataTriggerWhichFiresOnLoad>

</i:Interaction.Triggers>

<Image.Projection>

<PlaneProjection/>

</Image.Projection>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="VisualStateGroup">

<VisualStateGroup.Transitions>

<VisualTransition GeneratedDuration="0" To="Downloading">

<VisualTransition.GeneratedEasingFunction>

<QuadraticEase EasingMode="EaseInOut"/>

</VisualTransition.GeneratedEasingFunction>

<Storyboard RepeatBehavior="Forever">

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationZ)" Storyboard.TargetName="StatusIcon">

<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="-360"/>

<EasingDoubleKeyFrame KeyTime="0:0:2" Value="-360"/>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</VisualTransition>

<VisualTransition From="Downloading" GeneratedDuration="0"/>

</VisualStateGroup.Transitions>

<VisualState x:Name="Downloading"/>

<VisualState x:Name="Complete"/>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

</Image>

MVVMAnimations.zip

© Geeks with Blogs or respective owner