XAML Storyboard DependencyObject Error

Question

I am encountering an error in my XAML application.

The error I am receiving is

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

I searched around and found out that something needs to go inside <Image.RenderTransform> tag in Page.XAML for RotateTransform, but I am not sure what since I am new to XAML and still learning.

App.XAML

<Storyboard x:Key="spin">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" 
                                           Storyboard.TargetName="{Binding}"
                                           RepeatBehavior="Forever">
                <EasingDoubleKeyFrame KeyTime="0:0:1" 
                                      Value="360"/>
            </DoubleAnimationUsingKeyFrames>
</Storyboard>

Page.XAML

<Page.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{DynamicResource spin}"/>
        </EventTrigger>
</Page.Triggers>

<Image x:Name="image1" 
       Margin="0, 0, 5, 0" 
       Source="{StaticResource inProcessImage}"
       Width="18" 
       RenderTransformOrigin="0.5,0.5">
    <Image.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform/>
            <TranslateTransform/>
        </TransformGroup>
    </Image.RenderTransform>
</Image>

<Image x:Name="image2" 
       Margin="0, 0, 5, 0"  
       Source="{StaticResource inProcessImage}"
       Width="18"  
       RenderTransformOrigin="0.5,0.5">
    <Image.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform/>
            <TranslateTransform/>
        </TransformGroup>
    </Image.RenderTransform>
</Image>

Code Behind

startAni("spin", image1.Name);
startAni("spin", image2.Name);

void startAni(string storyboardName, string objectName)
{
    Storyboard sb = FindResource(storyboardName) as Storyboard;

    foreach (var child in sb.Children)
        Storyboard.SetTargetName(child, objectName);

    sb.Begin(this); // do not forget the this keyword
}

Answer 1

The error is caused by this part:

<Page.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{DynamicResource spin}"/>
        </EventTrigger>
</Page.Triggers>

The Event Trigger doesn't load the storyboard properly (does not set TargetName ). So you're seeing this error.

---

You could put the startAni call in the loaded event of the page (in code behind.) This worked perfectly fine for me:

    public Page() {

        InitializeComponent();

        Loaded += Page_Loaded;

    }

    private void Page_Loaded(object sender, RoutedEventArgs e)
    {
        startAni("spin", image1.Name);
        startAni("spin", image2.Name);
    }

---

A XAML only solution would look like this:

<TimelineCollection x:Key="Ani">
            <DoubleAnimationUsingKeyFrames 

                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" 
                                           Storyboard.TargetName="{Binding}"
                                           RepeatBehavior="Forever">
                <EasingDoubleKeyFrame KeyTime="0:0:1" 
                                      Value="360"/>
            </DoubleAnimationUsingKeyFrames>
</TimelineCollection>

Use a TimelineCollection instead of a storyboard, then you can set the TargetName in the Page.XAML. This does not need code behind at all.

<EventTrigger RoutedEvent="FrameworkElement.Loaded">
    <BeginStoryboard>
        <Storyboard TargetName="image1" Children="{DynamicResource Ani}" />
    </BeginStoryboard>
    <BeginStoryboard>
        <Storyboard TargetName="image2" Children="{DynamicResource Ani}" />
    </BeginStoryboard>
</EventTrigger>

Another approach would be to put the storyboard inside a style and apply the style to each image. This would be clearer and more reusable. You can get a rough idea how to do that here