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?

I noticed the same. When you use Blend visually to drag an edge out it works internally using RenderTransform. Modifying a margin by hand has the same effect. I guess it's a bug or not implemented feature.. — Wouter, Oct 31 '12 at 13:53

Ramon de Klein · Accepted Answer · 2014-08-12T20:58:54.713

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

Annoying but useful! Cheers. – GazTheDestroyer Aug 07 '14 at 14:19 — GazTheDestroyer, Aug 07 '14 at 14:19

score 0 · Answer 2 · answered Oct 05 '12 at 14:29

0

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

answered Oct 05 '12 at 14:29

Raúl Otaño

4,640
3
31
65

Thanks, but Unfortunately this is an animation. VisualStates require static storyboards since they set known states. I could define the above as a transition but this is what I'm trying to avoid. – GazTheDestroyer Oct 05 '12 at 14:43

VisualStateManager can't generate transitions for ThicknessAnimations

2 Answers2

Linked