Question

I wrote a style for a button to let it rotate a bit when the mouse is over it. Unfortunately the animation does not start.

I have a created a similar style for another button type in my application which uses the VisualStateManager as well and works perfectly well so I don’t think it is a problem with the VSM.

Seems there is a problem with the animation but I can’t find the issue.

This is what the style looks like:

<Style x:Key="MyButton" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <ContentPresenter Content="{TemplateBinding Content}">
                        <ContentPresenter.RenderTransform>
                            <TransformGroup>
                                <RotateTransform CenterX="0.5" CenterY="0.5" Angle="0" x:Name="content"/>
                            </TransformGroup>
                        </ContentPresenter.RenderTransform>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="MouseOverState">
                                    <Storyboard AutoReverse="True" RepeatBehavior="Forever">
                                        <DoubleAnimation From="0"  To="10" Duration="0:0:1" 
                                                 Storyboard.TargetProperty="Angle"
                                                         Storyboard.TargetName="content"/>
                                        <DoubleAnimation From="10"  To="0" Duration="0:0:1" BeginTime="0:0:1" 
                                                 Storyboard.TargetProperty="Angle"
                                                         Storyboard.TargetName="content"/>
                                        <DoubleAnimation From="0"  To="-10" Duration="0:0:1" BeginTime="0:0:2" 
                                                 Storyboard.TargetProperty="Angle"
                                                         Storyboard.TargetName="content"/>
                                        <DoubleAnimation From="-10"  To="0" Duration="0:0:1" BeginTime="0:0:3" 
                                                 Storyboard.TargetProperty="Angle"
                                                         Storyboard.TargetName="content"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </ContentPresenter>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I have also tried

 Storyboard.TargetProperty="(ContentPresenter.RenderTransform).(RotateTransform.Angle)"

Answer 1

You have a few problems with this template:

• The VisualStateManager.VisualStateGroups elements needs to be the child of your first FrameworkElement, which in this case is a Grid
• The VisualState “MouseOverState” should be renamed “MouseOver”
• Each storyboard can animate each dependency property once. You have 4 double animations all attempting to animate the Angle property. What you need to use here is a DoubleAnimationUsingKeyframes that has either LinearDoubleKeyframes or EasingDoubleKeyframes.

Here is a working version of this template:

<Style TargetType="Button" x:Key="MyButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="MouseOver">
                                <Storyboard AutoReverse="True" RepeatBehavior="Forever">
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Angle" Storyboard.TargetName="content">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="10"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:3" Value="-10"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:4" Value="0"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentPresenter Content="{TemplateBinding Content}">
                        <ContentPresenter.RenderTransform>
                            <TransformGroup>
                                <RotateTransform CenterX="0.5" CenterY="0.5" Angle="0" x:Name="content"/>
                            </TransformGroup>
                        </ContentPresenter.RenderTransform>

                    </ContentPresenter>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>