VisualStateManager can't generate transitions for ThicknessAnimations

Question

I have the following Visual States defined:

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

        <VisualStateGroup.Transitions>
            <VisualTransition GeneratedDuration="0:0:2"/>
        </VisualStateGroup.Transitions>

        <VisualState Name="Editing" />                          
        <VisualState Name="Normal">
            <Storyboard>
                <ThicknessAnimation Storyboard.TargetName="ViewBorder" Storyboard.TargetProperty="Margin" To="0" Duration="0"/>
                <DoubleAnimation    Storyboard.TargetName="Header"     Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleY)" To="0" Duration="0"/>
                <ColorAnimation     Storyboard.TargetName="EditBorder" Storyboard.TargetProperty="Background.Color" To="Red" Duration="0"/>
            </Storyboard>
        </VisualState>                                          

    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

The DoubleAnimation and ColorAnimation work fine, with VisualStateManager generating transition animations over 2 seconds for them.

However, the ThicknessAnimation does not animate. Instead it snaps to the finish value at the end of the transition period.

Is there any way to get VisualStateManager to generate transitions for it, or am I going to be forced to supply manual transitions?

Answer 1

I analyzed the problem and fired up .NET Reflector and found that the VisualStateManager only supports the following animations:

• ColorAnimation
• DoubleAnimation
• PointAnimation

It's kind of crappy, because it's not documented anywhere.

To prove that it cannot generate the animations take a look at the reversed code of the VisualStageManager.GenerateToAnimation method. There is also a VisualStageManager.GenerateFromAnimation that supports the same subset of animations.

private static Timeline GenerateToAnimation(FrameworkElement root, Timeline timeline, IEasingFunction easingFunction, bool isEntering)
{
  Timeline destination = null;

  if (destination == null)
  {
    var targetColor = GetTargetColor(timeline, isEntering);
    if (targetColor.HasValue)
      destination = new ColorAnimation { To = targetColor, EasingFunction = easingFunction };
  }

  if (destination == null)
  {
    var targetDouble = GetTargetDouble(timeline, isEntering);
    if (targetDouble.HasValue)
        destination = new DoubleAnimation { To = targetDouble, EasingFunction = easingFunction };

  }

  if (destination == null)
  {
    var targetPoint = GetTargetPoint(timeline, isEntering);
    if (targetPoint.HasValue)
        destination = new PointAnimation { To = targetPoint, EasingFunction = easingFunction };
  }

  if (destination != null)
    CopyStoryboardTargetProperties(root, timeline, destination);

  return destination;
}

Bottomline... You can only use Color, Double or Point animations in the VisualStageManager. Revert to old-fashioned triggers if you need something else...

Answer 2

Maybe your ThicknessAnimation statement is not complete, i search the flowing code sample from MSDN in the topic "ThicknessAnimation Class".

<ThicknessAnimation
                  Storyboard.TargetProperty="BorderThickness"
                  Duration="0:0:1.5" FillBehavior="HoldEnd" From="1,1,1,1" To="28,14,28,14" />

Hope this could help you...