How do I animate a custom components Rotation Transformation?

Question

Given the following :

<Viewbox>
    <Foo:Bar
        x:FieldModifier="private"
        x:Name="fooBar"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        RenderTransformOrigin="0.5,0.5">
        <Foo:Bar.RenderTransform>
            <TransformGroup>
                <ScaleTransform
                    x:FieldModifier="private"
                    x:Name="xfScale"/>
                <RotateTransform
                    x:FieldModifier="private"
                    x:Name="xfRotate"/>
            </TransformGroup>
        </Foo:Bar.RenderTransform>
        <Foo:Bar.Style>
            <Style TargetType="{x:Type Foo:Bar}">
                <Style.Triggers>
                    <DataTrigger
                        Binding="{
                            Binding Flip,
                            RelativeSource={
                                RelativeSource AncestorType={
                                    x:Type local:myFooBar}}}"
                        Value="True">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation
                                        Storyboard.TargetProperty=""/>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Foo:Bar.Style>
    </Foo:Bar>
</Viewbox>

Which is for a new component that is basically a fancy label stuck inside of a ViewBox (for auto-scaling the label), what do I need to point the Storyboard.TargetProperty at to be able to animate, say, the RotateTransform Angle property?

Answer 1

Your TargetName will need to be set for your xfScale / xfRotate named transforms respectfully.

Your TargetProperty will be the properties of the transforms used.

Like for Scale;

Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"

and

Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"

Except that only specifies the Property, you still need to provide a Value to animate to. So in it's entirety, it would become something like;

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="xfScale" 
                               Storyboard.TargetProperty="X">
   <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0" />
</DoubleAnimationUsingKeyFrames>

Or for Rotate you need your Angle Property. It's worth mentioning, Blend makes this stuff much quicker/easier to do than by hand, especially for complex animations.

Hope this helps, cheers.