ボタンをクリックして画像を回転する

Question

ボタンをクリックしたときに、ボタンの画像を+90度または-90度（現在の角度に依存）回転させたい。私はいくつかの解決策を試しましたが、内部の画像だけではなく、ボタン全体を回転させることができました。

<Button Width="110"> 
    <StackPanel Orientation="Horizontal"> 
     <TextBlock Text="Options" /> 
     <Image RenderTransformOrigin="0.5, 0.5" Source="../../Images/gt.png"> 
      <Image.RenderTransform> 
       <RotateTransform x:Name="AnimatedRotateTransform" Angle="0" /> 
      </Image.RenderTransform> 
      <Image.Triggers> 
       <EventTrigger RoutedEvent="Button.Click"> 
        <BeginStoryboard> 
         <Storyboard> 
          <DoubleAnimation Storyboard.TargetName="AnimatedRotateTransform" Storyboard.TargetProperty="Angle" To="90" Duration="0:0:5" FillBehavior="Stop" /> 
         </Storyboard> 
        </BeginStoryboard> 
       </EventTrigger> 
      </Image.Triggers> 
     </Image> 
    </StackPanel> 
</Button>

これは、ボタン（小さな矢印が、私は一度クリックしたときにダウンポイント、および必要があるポイントのようになります。ここでは

は（スタイル属性などは読みやすくするために省略）私がこれまで持っているコードです右私はもう一度クリックすると：

誰もが考えている

編集：？.NET 4.0、Visual Studioの2010を使用します。ああ、この「コードビハインド」を解決することは選択肢ではありません。 Imageがイベントをトリガしません

Answer 1

を設定することができます注意すべき最初の事はそれだけに泡ので、そのイメージは、Button.Clickイベントを受け取ることはありませんですボタンの祖先はその子孫ではありません。効果を確認するには、たとえば次のようにトリガーする必要があります。マウスダウン。

この効果を達成する1つの方法は、ボタンの代わりにトグルボタンを使用し、矢印を回転させるためにその「押した」状態を変更することです。これは次のようになります：

<ToggleButton Content="Options"> 
    <ToggleButton.Style> 
     <Style TargetType="{x:Type ToggleButton}"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type ToggleButton}"> 
         <StackPanel Orientation="Horizontal"> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="CommonStates"> 
            <VisualStateGroup.Transitions> 
             <VisualTransition GeneratedDuration="0:0:0.5"/> 
            </VisualStateGroup.Transitions> 
            <VisualState x:Name="Normal"/> 
            <VisualState x:Name="MouseOver"/> 
            <VisualState x:Name="Pressed"> 
             <Storyboard> 
              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="ArrowImage"> 
               <EasingDoubleKeyFrame KeyTime="0" Value="-90"/> 
              </DoubleAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Disabled"/> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <ContentPresenter Height="100"/> 
          <Image x:Name="ArrowImage" Width="48" Height="48" RenderTransformOrigin="0.5,0.5"> 
           <Image.RenderTransform> 
            <TransformGroup> 
             <ScaleTransform/> 
             <SkewTransform/> 
             <RotateTransform/> 
             <TranslateTransform/> 
            </TransformGroup> 
           </Image.RenderTransform> 
          </Image> 
         </StackPanel> 

        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </ToggleButton.Style> 
</ToggleButton> 

Answer 2

、あなたがButtonに名前をしようとEventTrigger.SourceName