Поворот изображения в кнопку при нажатии

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. О, иРешение этого «кода позади» не вариант.

Answer 1

Первое, на что нужно обратить внимание, это то, что Image никогда не получит событие 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>

Answer 2

Image не вызывает событие, вы можете попробовать назвать Button и установить EventTrigger.SourceName