Как повернуть изображение кнопки при нажатии в стиле в WPF

Question

Я реализую проект для приложения WPF на данный момент.

У меня на одной из страниц цифровая клавиатура с цифрами 0-9, сидящими внутри сетки. Чтобы не встраивать стиль каждой кнопки, я создал стиль для этой кнопки.

Эта кнопка содержит два элемента: Изображение и блок текста.

Изображение маленькое изображение Svg, которое выглядит как металлическая кнопка телефонной кнопки. TextBlock - это всего лишь цифры 0..9 для каждой кнопки.

Теперь я пытаюсь заставить кнопку поворачивать изображение на 180 градусов, когда кнопка нажата. Я могу получить кнопку, чтобы повернуть весь на MouseOver, но не изображение внутри только ...

Вот стиль, где кнопка вся вращается на 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

Вы могли бы сделать поворот в " Прессованные»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>