Can't resolve TargetName when triggering using XamlBehaviors

Question

I was attempting to get an image to rotate indefinitely as a waiting throbber when State is in a running state, and to reset it's angle and stop rotating when in any other state. I took XAML UWP - How to use animations in RenderTransform on elements in a ItemsControl (Data Binding) as my inspiration.

Here's my code:

<Page
    x:Class="GUI.Views.Content.Ingest"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GUI.Views.Content"
    xmlns:dcd="using:GUI.Views.DCD"
    xmlns:helper="using:GUI.Helpers"
    xmlns:conv="using:GUI.Converters"
    xmlns:lc ="using:GuiSharedLibrary.LoggingControls"
    xmlns:localConv="using:GUI.Converters.Localization_Converters"
    xmlns:tms="using:TMSClient.TMSService"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:permissionConv="using:GUI.Converters.Permission_Converters"
    
    xmlns:Interactions="using:Microsoft.Xaml.Interactions.Core"
    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:Media="using:Microsoft.Xaml.Interactions.Media"
    
    mc:Ignorable="d"
    DataContext = "{Binding Source={StaticResource Locator}, Path=IngestViewModel }">
    <Page.Resources>
        <!-- Storyboard to rotate icon indefinitely -->
        <Storyboard x:Name="StoryboardRotate">
            <DoubleAnimation
                Storyboard.TargetName="stateIcon"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
                From="0" To="360" Duration="0:0:5" RepeatBehavior="Forever"/>
        </Storyboard>

        <!-- Storyboard to reset and stop rotating icon -->
        <Storyboard x:Name="StoryboardStopRotate">
            <DoubleAnimation
                Storyboard.TargetName="stateIcon"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
                From="0" To="0" RepeatBehavior="1x"/>
        </Storyboard>
        
        <conv:IsRunningStateConverter x:Key="IsRunningStateConverter"/>
...
            <Image x:Name="stateIcon" Grid.Column="4" Grid.Row="0" Grid.RowSpan="4" Source="{Binding State, Converter={StaticResource IngestJobStateToIconConverter}}" RenderTransformOrigin=".5, .5">
                <Image.RenderTransform>
                    <RotateTransform />
                </Image.RenderTransform>
                <Interactivity:Interaction.Behaviors>
                    <Interactions:DataTriggerBehavior
                            Binding="{Binding State, Converter={StaticResource IsRunningStateConverter}}"
                            ComparisonCondition="Equal"
                            Value="true">
                        <Media:ControlStoryboardAction Storyboard="{StaticResource StoryboardRotate}" />
                    </Interactions:DataTriggerBehavior>
                    <Interactions:DataTriggerBehavior
                            Binding="{Binding State, Converter={StaticResource IsRunningStateConverter}}"
                            ComparisonCondition="Equal"
                            Value="false">
                        <Media:ControlStoryboardAction Storyboard="{StaticResource StoryboardStopRotate}" />
                    </Interactions:DataTriggerBehavior>
                </Interactivity:Interaction.Behaviors>
            </Image>
...

However, when State changes value, the converter is hit (correct) that returns a bool and then I get an exception in the code saying:

System.Runtime.InteropServices.COMException was unhandled by user code
  ErrorCode=-2146496512
  HResult=-2146496512
  Message=No installed components were detected.

Cannot resolve TargetName stateIcon.

The exception happens where State is being assigned a value.

The Image tag is named stateIcon. I've even attempted to do what was done in the answer from where I drew my inspiration from and named the RotateTransform element and used that in my TargetName, but it just changed the error to not being able to resolve that name.

What am I missing?

Answer 1

So the problem was caused by the Image tag being in an ItemControl.ItemTemplate tag (something I didn't realise I should have added to the question). This is because (I would assume) that the image with that name is one of many instances. Because of this, having the StoryBoards in the Page.Resources results in having many tags that have the same x:Name, thus not being able to determine which Image tag to change. That or the Image tag doesn't exist and isn't updated outside of the template when an instance is generated.

Moving the StoryBoards from the Page.Resources to the local Grid.Resources within the ItemControl.ItemTemplate tag, fixed the issue because within that scope, there was only one instance of an Image tag with the name stateIcon. That or the resource is generated at the same time as the image, so it can reference it.