单击时旋转按钮中的图像答案

【问题标题】：Rotate Image in Button on Click单击时旋转按钮中的图像
【发布时间】：2012-01-11 09:36:14
【问题描述】：

我希望按钮中的图像在单击按钮时旋转 +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。哦，解决这个“代码隐藏”不是一个选项。

【问题讨论】：

您使用的是什么版本的 .NET？你在使用 Expression Blend 吗？
@Jens .NET 4 和 Visual Studio 2010
嗯.. 棘手 =) 请问为什么后面的代码不是一个选项？这可以通过子类化按钮或附加行为来完成，而不必为每个按钮重复代码，使用 ValueConverter。
@Jens Code behind 不是一个选项，因为我使用 Caliburn Micro MVVM。也就是说，ValueConverter 可以工作，因为我可以从 XAML 中引用转换器。
尝试命名图像并使用 TargetName 属性值 = 图像名称..

标签： .net wpf xaml .net-4.0

【解决方案1】：

首先要注意的是 Image 永远不会接收到 Button.Click 事件，因为它只会冒泡到按钮的祖先而不是它的后代。要观察任何效果，您需要触发例如鼠标按下。

实现此效果的一种方法是使用 ToggleButton 而不是 Button 并修改其“按下”状态以旋转箭头。 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>

【讨论】：

这行得通 - 经过一些小改动。感谢您的努力。

【解决方案2】：

Image 不会触发事件，您可以尝试命名Button 并设置EventTrigger.SourceName

【讨论】：

已经尝试过了，但它给出了错误消息“在图像中找不到元素 MyFirstButton” - 假设我将按钮命名为“MyFirstButton”。我在按钮上尝试了“名称”和“x：名称”。