title: How to rotate button image on pressed using style in WPF
body: <p>I am implementeing a design for a WPF application for the moment.</p>
  
  <p>I have on one of the pages a numeric keypad with the numbers 0 - 9 sitting inside a grid. In order to not inline style every button I have created a style for this button type.</p>
  
  <p>The button contains two items: An Image and a TextBlock.</p>
  
  <p>The Image is a small Svg image that looks like a metal phonebooth button.
  The TextBlock is just the numbers 0..9 for each button.</p>
  
  <p>Now I am trying to get the button to rotate its image 180 degrees when the button is pressed down. I can get the whole button to rotate on MouseOver but not the Image inside only...</p>
  
  <p>Here is the Style where the whole button rotates on MouseOver:</p>
  
  <pre><code>        &lt;Style x:Key="NumericKeypadButton" TargetType="Button"&gt;
              &lt;Setter Property="Background" Value="Transparent" /&gt;
              &lt;Setter Property="BorderThickness" Value="0" /&gt;
              &lt;Setter Property="BorderBrush" Value="Transparent" /&gt;
              &lt;Setter Property="Template"&gt;
                  &lt;Setter.Value&gt;
                      &lt;ControlTemplate TargetType="{x:Type Button}"&gt;
                          &lt;Grid&gt;
                              &lt;Border Background="{TemplateBinding Background}"&gt;
                                  &lt;ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" /&gt;
                              &lt;/Border&gt;
                              &lt;Image x:Name="MyRotation" Stretch="Fill" Source="{svgc:SvgImage Source=/Resources/Svg/keypad_key.svg}" RenderTransformOrigin=".5,.5"&gt;
                                  &lt;Image.RenderTransform&gt;
                                      &lt;RotateTransform Angle="0" /&gt;
                                  &lt;/Image.RenderTransform&gt;
                              &lt;/Image&gt;
                              &lt;TextBlock HorizontalAlignment="Center" Margin="0,8,0,0" Style="{DynamicResource Lato}" FontSize="80" Text="1" /&gt;
                          &lt;/Grid&gt;
                      &lt;/ControlTemplate&gt;
                  &lt;/Setter.Value&gt;
              &lt;/Setter&gt;
              &lt;Style.Triggers&gt;
                  &lt;Trigger Property="IsMouseOver" Value="True"&gt;
                      &lt;Setter Property="RenderTransform"&gt;
                          &lt;Setter.Value&gt;
                              &lt;RotateTransform Angle="180" /&gt;
                          &lt;/Setter.Value&gt;
                      &lt;/Setter&gt;
                  &lt;/Trigger&gt;
              &lt;/Style.Triggers&gt;
          &lt;/Style&gt;
  </code></pre>