如何使用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>