Animate TranslateTransform.Y to a control's height (purpose is to slide element off sight)

Question

Given: Control (x:Name="border1") with a VisualStateManager. Control's RenderTransform is set to a TransformGroup that contains a TranslateTransform.

In VisualState "NotShown", TranslateTransforms Y property should be animated to a Value that is (at least) the height of the control being translated (effectively rendering it invisible - ClipToBounds set true).

This is the code Blend generates:

<VisualState x:Name="NotShown">
    <Storyboard>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="border1">
            <EasingDoubleKeyFrame KeyTime="0" Value="{Binding ActualHeight, ElementName=border1}"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

EDIT (2): {Binding ActualHeight, ElementName=border1}does not work at all. When run from VS instead of Blend, there is a hint:

Cannot find governing FrameworkElement or FrameworkContentElement for target element. BindingExpression:Path=ActualHeight; DataItem=null; target element is 'EasingDoubleKeyFrame' (HashCode=57957548); target property is 'Value' (type 'Double')

How do I properly set things up for the purpose of this animation?

Changed the part with speculation about what might go wrong... including VS output that I was not aware of before. — user1282998, Apr 10 '12 at 17:42
Update: Made EasingDoubleKeyFrame a Resource of border1. Now at least binding works. More to come... — user1282998, Apr 10 '12 at 18:03
... and works as intended. May I blame Blend for generating that code? — user1282998, Apr 10 '12 at 18:15
Not working well though... and Blend crashes when switching between states. :-/ Any comments on the hole topic? — user1282998, Apr 10 '12 at 23:55

score 0 · Answer 1 · answered Sep 13 '12 at 07:30

You are in the ControlTemplate, so you have to use TemplateBinding instead of Binding.
Binding/TemplateBinding only "works" on FrameworkElement (EasingDoubleKeyFrame is a DependencyObject, not a FrameworkElement). So you have to do your animation in code-behind.

Animate TranslateTransform.Y to a control's height (purpose is to slide element off sight)

1 Answers1