Geeks With Blogs

News Please visit me at my new blog!!

profile for Aligned at Stack Overflow, Q&A for professional and enthusiast programmers
"free in Christ Jesus from the law of sin and death." Romans 8:2 (ESV) Check out the Falling Plates video on YouTube.
more about the Gospel
And then listen to Francis Chan speaking at LifeLight in SD.



Programming and Learning from SD
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>

Posted on Friday, March 30, 2012 4:44 PM Silverlight | Back to top


Comments on this post: MVVM and Animations in Silverlight

# re: MVVM and Animations in Silverlight
Requesting Gravatar...
I am using MVVM & that looks great. I found this very useful. Thanks for the post.
white ceramic
Left by white ceramic on Mar 31, 2012 12:37 AM

# re: MVVM and Animations in Silverlight
Requesting Gravatar...
Great! I'm glad it was useful. You are welcome.
Left by Kevin on Apr 02, 2012 8:14 AM

# re: MVVM and Animations in Silverlight
Requesting Gravatar...
Awesome. I was looking for something similar to improve visual experience for clients.
Left by Mike on Jul 09, 2012 3:36 PM

Your comment:
 (will show your gravatar)


Copyright © Aligned | Powered by: GeeksWithBlogs.net