0

我在按钮样式中有以下内容，用于刷新按钮 - 当用户将鼠标悬停在按钮上时，其上的图像（在本例中为圆形箭头）旋转：

<Style x:Key="RefreshButton" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid Name="buttonContent">
                    <Image Source="/View/Images/Retry Green2.png" x:Name="Picture" RenderTransformOrigin="0.5,0.5">
                        <Image.RenderTransform>
                            <RotateTransform x:Name="AnimatedRotateTransform" Angle="0" />
                        </Image.RenderTransform>
                        <Image.Triggers>
                            <EventTrigger RoutedEvent="MouseEnter">
                                <BeginStoryboard Name="Spinner">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="AnimatedRotateTransform"
                                                         Storyboard.TargetProperty="Angle" 
                                                         From="0" To="360" Duration="0:0:1"
                                                         RepeatBehavior="Forever"
                                             />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="MouseLeave">
                                <StopStoryboard BeginStoryboardName="Spinner"/>
                            </EventTrigger>
                        </Image.Triggers>
                    </Image>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="RenderTransform" TargetName="buttonContent">
                            <Setter.Value>
                                <TranslateTransform X="0" Y="2"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

当用户将鼠标从按钮上移开时，它会停止旋转，这很好，但它也会在零旋转时恢复到其原始位置（用户单击按钮时也会发生同样的情况）。在样式中是否有任何方法可以更改行为，使其停止旋转并保持新的旋转方向，无论是当用户将鼠标移开还是单击按钮时，它都会在第二个 RenderTransform 中向下转换两个点?

如果用户再次将鼠标悬停在按钮上，动画应该从停止的地方开始。

我知道这是一件非常小的事情，但它是一个不会消失的小问题，每次我使用这个模板时，我都会再次尝试解决问题，但没有成功。我忍不住想我错过了什么。我发现的所有相关问题都与动画根本没有停止有关，这对我没有帮助 - 缩小搜索范围已被证明非常困难。

4

1 回答 1

1

我相信你正在寻找这个：

https://docs.microsoft.com/en-us/dotnet/api/system.windows.media.animation.doubleanimation.isadditive?view=net-5.0

添加到您的 DoubleAnimation。

编辑：加上替换StopStoryBoard应该PauseStoryBoard可以解决问题。最终的 xaml 在 Image.Triggers 节点中应如下所示：

<Image.Triggers>
    <EventTrigger RoutedEvent="MouseEnter">
        <BeginStoryboard Name="Spinner">
            <Storyboard>
                <DoubleAnimation Storyboard.TargetName="AnimatedRotateTransform"
                                    Storyboard.TargetProperty="Angle"
                                    IsAdditive="true"
                                    From="0" To="360" Duration="0:0:1"
                                    RepeatBehavior="Forever"
                        />
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
    <EventTrigger RoutedEvent="MouseLeave">
        <PauseStoryboard BeginStoryboardName="Spinner"/>
    </EventTrigger>
</Image.Triggers>
于 2021-01-07T09:52:46.790 回答