ControlStoryboardAction in DataTemplate has inconsistent behavior in Anniversary Update

[MartinZikmund]

While building a UWP app I have noticed a very unusual behavior with ControlStoryboardAction running on Anniversary Update PCs.

Code sample

<ListView ItemsPanel="{StaticResource HorizontalPanel}" ItemsSource="{x:Bind Items}">
     <ListView.ItemTemplate>
         <DataTemplate>
             <Border x:Name="Container">
                 <Border.Background>
                     <SolidColorBrush Color="Transparent" />
                 </Border.Background>
                 <Border.Resources>
                     <Storyboard x:Key="BlinkingAnimation" RepeatBehavior="Forever" AutoReverse="True">
                         <ColorAnimation Duration="0:0:1" To="Red" Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Container">
                         </ColorAnimation>
                     </Storyboard>
                  </Border.Resources>
                  <StackPanel VerticalAlignment="Center">
                     <TextBlock Text="Is animating:" FontWeight="Bold" HorizontalAlignment="Center" />
                     <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="{Binding IsAnimating}" />
                   </StackPanel>
                   <interactivity:Interaction.Behaviors>
                       <core:DataTriggerBehavior 
                                Binding="{Binding IsAnimating, Mode=OneWay}" 
                                ComparisonCondition="Equal"
                                Value="true">
                                <media:ControlStoryboardAction ControlStoryboardOption="Play" Storyboard="{StaticResource BlinkingAnimation}" />
                       </core:DataTriggerBehavior>
                       <core:DataTriggerBehavior 
                                Binding="{Binding IsAnimating, Mode=OneWay}" 
                                ComparisonCondition="Equal"
                                Value="false">
                                <media:ControlStoryboardAction ControlStoryboardOption="Stop" Storyboard="{StaticResource BlinkingAnimation}" />
                        </core:DataTriggerBehavior>
                 </interactivity:Interaction.Behaviors>
             </Border>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Download sample

You can download the sample solution here: AnimationInDataTemplateProblem.zip

Expected behavior

When I set Items[2].IsAnimating = true, the third item in the ListView should start animating its border's background.

Actual behavior

The actual behavior is in line with expectations on PCs and phones running 10586 (November update) and 15063 (Creators Update). However, on 14393 (Anniversary Update) whichever item's IsAnimating property is set, the storyboard always runs on the first item in the list. In fact, stepping through the code it seems that each ControlStoryboardAction has set the first item's Storyboard, which it then manipulates.

Interesting thing to note is that compiling the app against different SDK versions has no effect. Whether the app's target SDK is NU, AU or CU, the results are always the same.

Workaround

The only workaround I have found so far is to wrap the contents of the DataTemplate into a UserControl (this approach is also demonstrated in the sample solution), which works consistently everywhere. Still it is a very strange problem and I think it warrants investigation (also because AU is currently the most widely used version of W10).

[nigel-sampson]

It looks like there's a change in behavior when dealing with Static Resources that are declared in the item template. Definitely curious, glad you found a work around.