单击时在按钮中旋转图像

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.

当点击按钮时，我希望按钮中的图像旋转+90度或-90度(取决于当前角度)。我尝试了一些解决方案，但我只能让整个按钮旋转，而不能只让里面的图像旋转。

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.

编辑:。net 4.0，使用Visual Studio 2010。哦，解决这个“代码隐藏”不是一个选项。

2 个解决方案

#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而不是按钮，并修改它的“pressed”状态来旋转箭头。看起来是这样的:

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

#2

The Image does not trigger the event, you could try to name the Button and set the EventTrigger.SourceName

该映像不会触发事件，您可以尝试命名该按钮并设置EventTrigger.SourceName。