wpfrendertransform

Animating UserControl


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?


Solution

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