title: Animate ScaleTransform of a Button using VisualStateManager
body: <p>I created a control template for a button which contains a grid and a content control. What I want to do is the following: when the button is pressed, the scale of the button should animate to 0.5 and when the button leaves the pressed state, the button's scale should animate back to 1.0.</p>
  
  <p>In my current solution the animation to scale = 0.5 works nice, if the button is pressed. But as soon as i release the button, the animation doesn't scale slowly back to scale 1. Instead its immediate at scale 1.</p>
  
  <p>My implementation looks like this:</p>
  
  <pre><code>&lt;Style TargetType="Button" x:Name="MyButtonStyle"&gt;
          &lt;Setter Property="Margin" Value="0"/&gt;
          &lt;Setter Property="Padding" Value="0"/&gt;
          &lt;Setter Property="Template"&gt;
              &lt;Setter.Value&gt;
                  &lt;ControlTemplate TargetType="Button"&gt;
                      &lt;Grid Background="{TemplateBinding Background}" x:Name="buttonLayoutRoot"&gt;
                          &lt;Grid.RenderTransform&gt;
                              &lt;ScaleTransform ScaleX="1" ScaleY="1"/&gt;
                          &lt;/Grid.RenderTransform&gt;
                          &lt;VisualStateManager.VisualStateGroups&gt;
                              &lt;VisualStateGroup x:Name="CommonStates"&gt;
                                  &lt;VisualStateGroup.Transitions&gt;
                                      &lt;VisualTransition To="Pressed" GeneratedDuration="0:0:2.5"&gt;
                                          &lt;Storyboard&gt;
                                              &lt;DoubleAnimation 
                                              Storyboard.TargetName="buttonLayoutRoot"
                                              Storyboard.TargetProperty="(Grid.RenderTransform).(ScaleTransform.ScaleX)"
                                              To="0.5" Duration="0:0:2.5"/&gt;
                                              &lt;DoubleAnimation 
                                              Storyboard.TargetName="buttonLayoutRoot"
                                              Storyboard.TargetProperty="(Grid.RenderTransform).(ScaleTransform.ScaleY)"
                                              To="0.5" Duration="0:0:2.5"/&gt;
                                          &lt;/Storyboard&gt;
                                      &lt;/VisualTransition&gt;
                                      &lt;VisualTransition To="Normal" GeneratedDuration="0:0:2.5"&gt;
                                          &lt;Storyboard&gt;
                                              &lt;DoubleAnimation 
                                              Storyboard.TargetName="buttonLayoutRoot"
                                              Storyboard.TargetProperty="(Grid.RenderTransform).(ScaleTransform.ScaleX)"
                                              To="1.0" Duration="0:0:2.5"/&gt;
                                              &lt;DoubleAnimation 
                                              Storyboard.TargetName="buttonLayoutRoot"
                                              Storyboard.TargetProperty="(Grid.RenderTransform).(ScaleTransform.ScaleY)"
                                              To="1.0" Duration="0:0:2.5"/&gt;
                                          &lt;/Storyboard&gt;
                                      &lt;/VisualTransition&gt;
                                  &lt;/VisualStateGroup.Transitions&gt;
                                  &lt;VisualState x:Name="Normal"/&gt;
                                  &lt;VisualState x:Name="MouseOver" /&gt;
                                  &lt;VisualState x:Name="Pressed"/&gt;
                                  &lt;VisualState x:Name="Disabled"/&gt;
                              &lt;/VisualStateGroup&gt;
  
                          &lt;/VisualStateManager.VisualStateGroups&gt;
                          &lt;ContentControl
                              x:Name="ButtonContent"
                              Content="{TemplateBinding Content}"
                              ContentTemplate="{TemplateBinding ContentTemplate}"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                              Margin="{TemplateBinding Padding}"&gt;
                          &lt;/ContentControl&gt;
                      &lt;/Grid&gt;
                  &lt;/ControlTemplate&gt;
              &lt;/Setter.Value&gt;
          &lt;/Setter&gt;
      &lt;/Style&gt;
  </code></pre>
  
  <p>I also tried to put the animations into the visual states "normal" and "pressed" without any transitions. But the outcome was the same. It just snaps back to scale = 1 when the button isn't pressed anymore.</p>
  
  <p>I'm programming for windows phone 8.0 silverlight.</p>
  
  <p>Hope you guys can help me.</p>
  
  <p>Thanks, Kevin</p>