Animating UserControl

Question

I've made an opacity animation using Blend on one my two UserControls, deleted <UserControl.Resources>, <UserControl.Triggers> and Storyboard.TargetName from that, placed it in App.xaml and it looks like:

<Storyboard x:Key="Loaded">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" >
        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="0:0:3" Value="1"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

when I call it in code like this before setting the Content of my ContentControl:

Storyboard sb = FindResource("Loaded") as Storyboard;
sb.begin(uc1);
content.Content = uc1;

//and

Storyboard sb = FindResource("Loaded") as Storyboard;
sb.begin(uc2);
content.Content = uc2;

it works as expected. For the transform animation, I've deleted the TransformGroup as well in addition to those above and now it looks like:

<Storyboard x:Key="Unloaded">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="0:0:3" Value="-800"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

If I call it in the same way, I get this error:

System.InvalidOperationException: ''[Unknown]' property does not point to a DependencyObject in path '(0).(1)[3].(2)'.'

How to fix the problem?

Answer 1

You will need to add a RenderTransform to your UserControl which is similar to the Storyboard.TargetProperty which currently expects a TransformGroup with 4th child as TranslateTransform.

Add the below code to each of your two UserControls:

<UserControl x:Class="YourUserControl"
        ...>

    <UserControl.RenderTransform>
        <TransformGroup>
            <RotateTransform/>
            <ScaleTransform/>
            <SkewTransform/>
            <TranslateTransform/>
        </TransformGroup>
    </UserControl.RenderTransform>