Reverse storyboard on pointer release windows 8.1

Question

I have this storyboard in pointer over visualstate in button:

<VisualState x:Name="PointerOver">
   <Storyboard x:Name="Storyboard1" AutoReverse="True">
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="image">
     <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
     <SplineDoubleKeyFrame KeyTime="0:0:0.1" Value="20"/>
     <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="40"/>
     <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="60"/>
     <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="80"/>
     <SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="100"/>
     <SplineDoubleKeyFrame KeyTime="0:0:0.6" Value="120"/>
     <SplineDoubleKeyFrame KeyTime="0:0:0.7" Value="140"/>
     <SplineDoubleKeyFrame KeyTime="0:0:0.8" Value="160"/>
     <SplineDoubleKeyFrame KeyTime="0:0:0.9" Value="180"/>
     </DoubleAnimationUsingKeyFrames>
   </Storyboard>
</VisualState>

I want to reverse this storyboard in pointer release from the point of stop not from the end

Is that possible ??

Answer 1

You can use VisualStateGroup for this.

On pointerRelease event select Normal state .

   <VisualStateManager.VisualStateGroups>            
          <VisualStateGroup x:Name="CommonStates">
                      <VisualState x:Name="Normal" />
                      <VisualState x:Name="PointerOver">
                                <Storyboard x:Name="Storyboard1" AutoReverse="True">
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="image">
                                        <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
                                        <SplineDoubleKeyFrame KeyTime="0:0:0.1" Value="20"/>
                                        <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="40"/>
                                        <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="60"/>
                                        <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="80"/>
                                        <SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="100"/>
                                        <SplineDoubleKeyFrame KeyTime="0:0:0.6" Value="120"/>
                                        <SplineDoubleKeyFrame KeyTime="0:0:0.7" Value="140"/>
                                        <SplineDoubleKeyFrame KeyTime="0:0:0.8" Value="160"/>
                                        <SplineDoubleKeyFrame KeyTime="0:0:0.9" Value="180"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>