VisualStateManager messes up when I specify a default duration

Question

I'm trying to use the VisualStateManager to manage my control states. The following works fine and gives me a one second animation between states.

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup Name="EditStates">

        <!-- Default transition time commented out
        <VisualStateGroup.Transitions>
            <VisualTransition GeneratedDuration="0:0:2"></VisualTransition>
        </VisualStateGroup.Transitions>-->

        <VisualState Name="Normal">
            <Storyboard>
                <ThicknessAnimation Storyboard.TargetName="ViewBorder"
                    Storyboard.TargetProperty="Margin" To="0"/>
                <DoubleAnimation Storyboard.TargetName="HeaderTransform"
                    Storyboard.TargetProperty="ScaleY" To="0" />
            </Storyboard>
        </VisualState>

        <VisualState Name="Editing">
            <Storyboard>
                <ThicknessAnimation Storyboard.TargetName="ViewBorder"
                    Storyboard.TargetProperty="Margin" To="100,0,100,100"/>
                <DoubleAnimation Storyboard.TargetName="HeaderTransform"
                    Storyboard.TargetProperty="ScaleY" To="1" />
            </Storyboard>
        </VisualState>

    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

However, if I uncomment the transition code to try and set a 2 second animation time, it messes up spectacularly.

When "Editing" is set:

• The DoubleAnimation snaps to 1 instantly, with no animation.
• The ThicknessAnimation waits for 2 seconds and then animates over 1 second

When "Normal" is set:

• The ThicknessAnimation snaps to 0 instantly, with no animation.
• The DoubleAnimation waits for 2 seconds and then animates over 1 second.

Can anyone explain what the heck is going on?

I've tried setting Duration="0" on all animations like certain samples seem to do, but all this does is remove the animation that does work. I still get the 2 second delays, then snapping rather than animating.

Answer 1

Well I've discovered enough to know this isn't anything to do with GeneratedTransition. I was just unlucky enough to be using two animations that VisualStateManager doesn't like.

Firstly, the animations within the VisualStates should have Duration="0", since these are the steady states. I was removing them because it was the only way I was getting any kind of animation between states. However, what I was actually seeing was animation during the steady state period (ie after the transitions, hence the pause introduced when I added a default transition length).

The only reason I realised the above was by adding a ColorAnimation, which worked just fine.

My DoubleAnimation of LayoutTransform.ScaleY was failing because I was targeting the transform itself. Thanks to this question, although the reason is unknown, I got it working by targeting the element instead:

<DoubleAnimation Storyboard.TargetName="Header" To="0" Duration="0"
 Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleY)" />

This just leaves my ThicknessAnimation, which is still just snapping to values. I have raised another question for this now I have narrowed the problem down.