如何使用WPF中的样式按下按钮图像

Question

我现在正在为WPF应用程序实现一个设计。

我在其中一页上有一个数字小键盘，数字键盘坐在网格内。为了不内联每个按钮的样式，我为此按钮类型创建了一个样式。

该按钮包含两个项目：一个图像和一个TextBlock。

该图像是一个看起来像金属电话按钮的小Svg图像。 TextBlock只是每个按钮的数字0..9。

现在我试图让按钮在按下按钮时将其图像旋转180度。我可以得到整个按钮在鼠标悬停回转，但不是图像内唯一的......

这里是哪里风格全键鼠标悬停旋转：

 <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>