Question

我正试图在第一次单击中将按钮内的字体图标旋转90°，然后在第二次单击中将字体图标旋转回0°。

目前，我有：

 <Page.Resources>
   <Storyboard x:Name="RotateButton90Degrees">
        <DoubleAnimation
            EnableDependentAnimation="True"
            Storyboard.TargetName="ShowSubTasks_ButtonRotateTransform"
            Storyboard.TargetProperty="Angle"
            From="0"
            To="90"
            Duration="350" />
    </Storyboard>
</Page.Resources>
<Button
   x:Name="ShowSubTasks_Button"
   Background="Transparent">
   <interactivity:Interaction.Behaviors>
       <core:EventTriggerBehavior EventName="Click">
           <media:ControlStoryboardAction Storyboard="{StaticResource RotateButton90Degrees}" />
        </core:EventTriggerBehavior>
   </interactivity:Interaction.Behaviors>
   <FontIcon
      FontFamily="Segoe MDL2 Assets"
      Glyph="&#xE974;"
      RenderTransformOrigin="0.5, 0.5">
      <FontIcon.RenderTransform>
            <RotateTransform x:Name="ShowSubTasks_ButtonRotateTransform" />
       </FontIcon.RenderTransform>
   </FontIcon>
</Button>

问题在于，当我单击按钮时，应用程序崩溃了（找不到ShowSubTasks_ButtonRotateTransform）。第二个是第一次单击（第一次单击-> 90°，第二次单击-> 0°，第三次单击-> 90°等等）后，我不知道如何恢复旋转效果。

任何帮助将不胜感激。

Answer 1

在我的情况下，应用程序不会崩溃，但是图标不会旋转，因为持续时间设置为350，这基本上意味着350小时。如果将此值更改为0:0:0.5之类的值，则它将在0.5秒内旋转。要进行反向动画，可能需要以编程方式设置动画目标，但是在这种情况下，您可以只在Click事件处理程序中运行情节提要。

如果您的目标是Windows 10 15063或更高版本，则可以使用Implicit Animations in XAML。在那种情况下，您可以在图标的旋转上设置隐式动画，然后在相应的代码后面设置旋转属性，隐式动画将负责动画本身。

Answer 2

好吧，我遇到了问题，问题是我在DataTemplate中运行了所有代码...因此可以解释为什么它崩溃了。对于修复，我使用了@Dishant的建议，创建了两个情节提要，并使用DataTriggerBehavior更改了旋转变换的角度

  <StackPanel.Resources>
      <Storyboard x:Name="RotateButtonTo90Degrees">
          <DoubleAnimation
              EnableDependentAnimation="True"
              Storyboard.TargetName="ShowSubTasks_ButtonRotateTransform"
              Storyboard.TargetProperty="Angle"
              From="0"
              To="90"
              Duration="0:0:0.1" />
      </Storyboard>
     <Storyboard x:Name="RotateButtonTo0Degrees">
          <DoubleAnimation
              EnableDependentAnimation="True"
              Storyboard.TargetName="ShowSubTasks_ButtonRotateTransform"
              Storyboard.TargetProperty="Angle"
              From="90"
              To="0"
              Duration="0:0:0.1" />
     </Storyboard>
 </StackPanel.Resources>
  <Button
     Background="Transparent"
     Visibility="{Binding HasSubTasks, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}">
      <interactivity:Interaction.Behaviors>
           <core:DataTriggerBehavior Binding="{Binding ShowSubTasks, Mode=OneWay}" Value="True">
               <media:ControlStoryboardAction Storyboard="{StaticResource RotateButtonTo90Degrees}" />
           </core:DataTriggerBehavior>
           <core:DataTriggerBehavior Binding="{Binding ShowSubTasks, Mode=OneWay}" Value="False">
                <media:ControlStoryboardAction Storyboard="{StaticResource RotateButtonTo0Degrees}" />
           </core:DataTriggerBehavior>
      </interactivity:Interaction.Behaviors>
      <FontIcon
           FontFamily="Segoe MDL2 Assets"
           Glyph="&#xE974;"
           RenderTransformOrigin="0.5, 0.5">
           <FontIcon.RenderTransform>
              <RotateTransform x:Name="ShowSubTasks_ButtonRotateTransform" />
            </FontIcon.RenderTransform>
       </FontIcon>
  </Button>

也正如@MartinZikmund所建议的，我需要将持续时间从350更改为0：0：0.5

在按钮UWP中旋转图像

2 个答案: