单击按钮时旋转图像

单击按钮时，我希望按钮中的图像旋转+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>

这是按钮的样子（小箭头应指向下来，当我点击一次，然后点权当我再次点击：

This is what the button looks like

任何人有一个想法

编辑：.NET 4.0，使用Visual Studio 2010。哦，解决这个“代码隐藏”不是一种选择。

来源

2012-01-11 KBoek

你使用的是什么版本的.NET？你在使用Expression Blend吗？ – Jens 2012-01-11 09:39:18

@Jens .NET 4和Visual Studio 2010 – KBoek 2012-01-11 09:41:26

嗯.. tricky =）请问为什么后面的代码不是一个选项？这可以不必重复每个按钮的代码，使用ValueConverter，通过子类别按钮或附加行为来完成。 – Jens 2012-01-11 09:47:17

要注意的第一件事是，图片永远不会收到Button.Click事件，因为它只是泡到按钮的祖先不是它的后代。要观察任何效果，你需要触发例如的MouseDown。

实现此效果的一种方法是使用ToggleButton而不是Button并修改其“按下”状态以旋转箭头。松散，这看起来像这样：

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

来源

2012-01-11 10:17:50 Jens

这工作 - 在一些小的变化后。感谢您的努力。 – KBoek 2012-01-11 11:33:25

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

来源

2012-01-11 10:03:29

尝试过，但它给出了一个错误消息“在图像中找不到元素MyFirstButton” - 假设我将按钮命名为“MyFirstButton”。我尝试了按钮上的“名称”和“x：名称”。 – KBoek 2012-01-11 10:10:47

单击按钮时旋转图像

回答

相关问题