Question

这里有一个简单的矩形旋转动画示例：WPF Rotate rectangle animation in XAML

但是，我只想在鼠标上旋转我的矩形，然后停止鼠标移出。到目前为止，这是我的xaml：

<Button Command="{Binding SettingsCommand}" Style="{DynamicResource SettingButton}">
    <Rectangle Width="15" Height="15" RenderTransformOrigin="0.5, 0.5">
        <Rectangle.RenderTransform>
            <RotateTransform/>
        </Rectangle.RenderTransform>
        <Rectangle.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="(Rectangle.RenderTransform).(RotateTransform.Angle)" To="-360" Duration="0:0:1" RepeatBehavior="Forever"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Rectangle.Triggers>
        <Rectangle.Fill>
            <VisualBrush Stretch="Fill" Visual="{StaticResource appbar_cog}"/>
        </Rectangle.Fill>
    </Rectangle>
</Button>

如何将其修改为仅适用于鼠标悬停？

谢谢！

Answer 1

您可以为MouseEnter和MouseLeave事件使用触发器：

<Button Command="{Binding SettingsCommand}" Style="{DynamicResource SettingButton}">
    <Rectangle Width="15" Height="15" RenderTransformOrigin="0.5, 0.5">
        <Rectangle.RenderTransform>
            <RotateTransform/>
        </Rectangle.RenderTransform>
        <Rectangle.Triggers>
            <EventTrigger RoutedEvent="MouseEnter">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
                            Storyboard.TargetProperty="RenderTransform.Angle"
                            To="-360" Duration="0:0:1" RepeatBehavior="Forever"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="MouseLeave">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
                            Storyboard.TargetProperty="RenderTransform.Angle"
                            To="0" Duration="0:0:0"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Rectangle.Triggers>
        <Rectangle.Fill>
            <VisualBrush Stretch="Fill" Visual="{StaticResource appbar_cog}"/>
        </Rectangle.Fill>
    </Rectangle>
</Button>

鼠标悬停时旋转矩形

1 个答案: