How to rotate button image on pressed using style in WPF - wpf

Question

I am implementeing a design for a WPF application for the moment.
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.
The button contains two items: An Image and a TextBlock.
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.
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...
Here is the Style where the whole button rotates on MouseOver:
<Style x:Key="NumericKeypadButton" TargetType="Button">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<Image x:Name="MyRotation" Stretch="Fill" Source="{svgc:SvgImage Source=/Resources/Svg/keypad_key.svg}" RenderTransformOrigin=".5,.5">
<Image.RenderTransform>
<RotateTransform Angle="0" />
</Image.RenderTransform>
</Image>
<TextBlock HorizontalAlignment="Center" Margin="0,8,0,0" Style="{DynamicResource Lato}" FontSize="80" Text="1" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="180" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>

Answer 1

You could do the rotation in the "Pressed" VisualState:
<Style x:Key="NumericKeypadButton" TargetType="Button">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="rotation"
Storyboard.TargetProperty="Angle"
To="180" Duration="0"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border Background="{TemplateBinding Background}">
<ContentPresenter
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
<Image Stretch="Fill"
Source="{svgc:SvgImage Source=/Resources/Svg/keypad_key.svg}"
RenderTransformOrigin=".5,.5">
<Image.RenderTransform>
<RotateTransform x:Name="rotation" Angle="0" />
</Image.RenderTransform>
</Image>
<TextBlock HorizontalAlignment="Center"
Margin="0,8,0,0" FontSize="80" Text="1" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>