Завъртане на изображението в бутон върху кликване - .net, wpf, xaml, .net-4.0

Искам изображението в бутона да се завърти +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. О, и решаването на този "код-зад" не е опция.

Отговори:

Първото нещо, което трябва да забележите е, че изображението ще бъденикога не получавате събитие Button.Click, тъй като то се мести само от предците на бутона, а не от неговите потомци. За да наблюдавате всеки ефект, ще трябва да задействате напр. MouseDown.

Един от начините за постигане на този ефект би бил използването на ToggleButton вместо бутон и промяна на "натиснатото" състояние, за да завъртите стрелката. Loosy, това ще изглежда така:

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

Най- Image не задейства събитието, можете да опитате да напишете името Button и задайте EventTrigger.SourceName