在按钮 UWP 内旋转图像答案

【问题标题】：Rotate image inside a button UWP在按钮 UWP 内旋转图像
【发布时间】：2018-08-11 08:34:47
【问题描述】：

我试图在第一次点击时将按钮内的字体图标旋转 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°等等）。

任何帮助将不胜感激。

【问题讨论】：

您需要创建两个 Storyboard，并在附加变量的帮助下记住是从 0->90 还是 90->0 旋转并相应地调用 Storyboard。参考this

标签： c# xaml uwp

【解决方案1】：

好的，我遇到了问题，问题是我在 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 之类的值

【讨论】：

【解决方案2】：

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

如果您的目标是 Windows 10 15063 或更高版本，则可以使用 Implicit Animations in XAML。在这种情况下，您可以在图标的旋转上设置一个隐式动画，然后只需在代码隐藏中相应地设置旋转属性，隐式动画就会处理动画本身。

【讨论】：