Rotate a rectangle when moused over

Question

There is a great example of a simple rotation animation of a rectangle here: WPF Rotate rectangle animation in XAML

However, I only want to rotate my rectangle on mouse over, and stop on mouse out. Here is my xaml so far:

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

How can I modify this to only work on mouse over?

Thanks!

Clemens · Accepted Answer · 2013-08-09T15:44:51.407

You may use triggers for the MouseEnter and MouseLeave events:

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

Rotate a rectangle when moused over

1 Answers1