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
