Question

I want the image in the button to rotate +90 degrees or -90 degrees (dependent on the current angle) when the button is clicked. I tried a few solutions, but I only could make the whole button rotate instead of only the image inside it.

Here’s the code I have so far (style attributes etc. omitted for readability):

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

This is what the button looks like (the little arrow should point down when I click once, and then point right when I click again:

Anyone has an idea?

Edit: .NET 4.0, using Visual Studio 2010. Oh, and solving this "code-behind" is not an option.

Answer 1

The first thing to notice is that Image will never receive the Button.Click event, since it bubbles only to the button’s ancestors not to its descendents. To observe any effect, you’d need to trigger on e.g. MouseDown.

One way to achieve this effect would be to use a ToggleButton instead of a Button and modify its “pressed” state to rotate the arrow. Loosy, this would look like this:

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