Bild im Button bei Klick drehen - .net, wpf, xaml, .net-4.0

Ich möchte, dass das Bild in der Schaltfläche um +90 gedreht wirdGrad oder -90 Grad (abhängig vom aktuellen Winkel), wenn auf die Schaltfläche geklickt wird. Ich habe ein paar Lösungen ausprobiert, aber ich konnte nur den ganzen Knopf drehen, anstatt nur das Bild darin.

Hier ist der Code, den ich bisher hatte (Stilattribute usw. wurden zur besseren Lesbarkeit ausgelassen):

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

So sieht die Schaltfläche aus (der kleine Pfeil sollte beim einmaligen Klicken nach unten zeigen und beim erneuten Klicken nach rechts zeigen:

Jeder hat eine Idee?

Bearbeiten Sie: .NET 4.0 mit Visual Studio 2010. Oh, und das Lösen dieses "Code-Behind" ist keine Option.

Antworten:

Das erste, was zu bemerken ist, ist das BildErhalten Sie niemals das Button.Click-Ereignis, da es nur zu den Vorfahren der Schaltfläche und nicht zu den Nachkommen der Schaltfläche führt. Um einen Effekt zu beobachten, müssen Sie z. Maus nach unten.

Eine Möglichkeit, diesen Effekt zu erzielen, wäre die Verwendung eines ToggleButton anstelle eines Buttons und der Änderung des Status "Gedrückt", um den Pfeil zu drehen. Loosy, das würde so aussehen:

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

Das Image löst das Ereignis nicht aus, Sie könnten versuchen, den Namen zu benennen Button und setze die EventTrigger.SourceName