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: 170
Filed under:
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.
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>
© Geeks with Blogs or respective owner
