Separate animations work, Storyboard doesn't. Why?

Question

EDIT 1 : In order to satisfy "Complete, Minimal And Verifiable" Example Requirement

TL:DR; Storyboard doesn't animate at all. Why?

I am attempting to create a storyboard which will animate the offsets of all the gradient stops within a gradient, shifting them from the left to the right.

I'm certain this is just a stupid syntax or argument error or something someplace on my part but I can't find it.

This is the XAML :

<Window
    x:Class="GradientShifting.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:GradientShiftDerping"
    mc:Ignorable="d" Title="MainWindow" Height="350" Width="525"
    AllowsTransparency="True" WindowStyle="None">
    <Window.Background>
        <LinearGradientBrush EndPoint="1,1" StartPoint="0,0">
            <GradientStop Color="Black" Offset="0"/>
            <GradientStop Color="White" Offset="1"/>
        </LinearGradientBrush>
    </Window.Background>
</Window>

This is the code behind :

using System;
using System.Linq;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace GradientShifting {
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window {
        private Storyboard _sbGradientShifter = new Storyboard( );          
        public MainWindow( ) {
            InitializeComponent( );
            this.Loaded += new RoutedEventHandler(
                ( S, E ) => this.SetupGradientShift( ) );
        }

    private void SetupGradientShift( ){
        GradientBrush BackBrush = this.Background as GradientBrush;
        if ( BackBrush != null ) {
            /* Ordering by offset is important because
               the last color in the gradient requires
               special consideration. */
            DoubleAnimationUsingKeyFrames DAUKF;
            GradientStopCollection GSC = new GradientStopCollection(
                BackBrush.GradientStops.OrderBy( GS => GS.Offset ) );
            foreach( GradientStop GS in GSC ){
                DAUKF = new DoubleAnimationUsingKeyFrames( ) {
                    KeyFrames = new DoubleKeyFrameCollection( ){
                        new LinearDoubleKeyFrame(
                            1.0D, KeyTime.FromPercent( 1.0D )
                }, Duration = TimeSpan.FromSeconds( 3 )
            };

            //Something I am doing from here...
            this._sbGradientShifter.Children.Add( DAUKF );

            Storyboard.SetTarget( DAUKF, GS );

            Storyboard.SetTargetProperty(
                DAUKF, new PropertyPath( GradientStop.OffsetProperty ) );
        }
        this._sbGradientShifter.Begin( this ); //THIS DOES NOTHING.         
    }
}

So, again - this code doesn't work. I have been able to start the the animation included within the storyboard by calling GradientStop.BeginAnimation, however Storyboard.Begin does not work.

Answer 1

For some reason, Storyboard.SetTarget only works with FrameworkElements or FrameworkContentElements. To do what you want, you can either start the individual animations yourself as you have in your "hack" (a perfectly reasonable way of doing animations, IMO).

Or you can register names for all your targets, e.g.:

foreach (var gs in gsc)
{
    var name = "GS_" + Guid.NewGuid().ToString("N");
    RegisterName(name, gs);
    Storyboard.SetTargetName(caukf, name);
}

If you decide to invoke the animations directly, you really don't need to save them in a separate list. Just start them immediately in the first loop as soon as they are created.

Storyboards are great if you need more coordination, such as pausing animations, using name scopes, advanced timing or animate from XAML. But in your case it seems simple Timelines would be adequate.

Answer 2

As noted in the other answer, this is an undocumented (as far as I know) limitation of WPF. Call it a bug. See previous posts such as Storyboard targetting multiple objects, using SetTarget method, doesn't work and Why don't these animations work when I'm using a storyboard? for additional details.

You can generate names dynamically as noted in Eli's answer. Other alternatives include specifying the names in XAML and then referencing them in the code-behind, or just declaring the entire thing in XAML. In all cases, you'll have to use the Storyboard.TargetName property instead of the Target property.

If you want to specify the names in XAML, there are a couple of ways you can use them in code-behind: you can hard-code the names explicitly, or you can look them up as you need them. The former would be appropriate if you had to deal with just the one animation and knew the names would not change. The latter would be appropriate if you want to apply a general-purpose algorithm to multiple scenarios.

Hard-coded:

private void SetupGradientShift()
{
    string[] names = { "stop1", "stop2" };

    foreach (string name in names)
    {
        DoubleAnimationUsingKeyFrames daukf =
            new DoubleAnimationUsingKeyFrames
            {
                KeyFrames =
                    new DoubleKeyFrameCollection
                    {
                        new LinearDoubleKeyFrame(1.0, KeyTime.FromPercent(1.0))
                    },
                Duration = TimeSpan.FromSeconds(3)
            };

        this._sbGradientShifter.Children.Add(daukf);
        Storyboard.SetTargetName(daukf, name);
        Storyboard.SetTargetProperty(
            daukf, new PropertyPath(GradientStop.OffsetProperty));
    }

    this._sbGradientShifter.Begin(this);
}

Look-up at runtime:

private void SetupGradientShift()
{
    GradientBrush BackBrush = this.Background as GradientBrush;
    if (BackBrush != null)
    {
        INameScopeDictionary nameScope = (INameScopeDictionary)NameScope.GetNameScope(this);

        foreach (GradientStop gradientStop in BackBrush.GradientStops.OrderBy(stop => stop.Offset))
        {
            DoubleAnimationUsingKeyFrames daukf =
                new DoubleAnimationUsingKeyFrames
                {
                    KeyFrames =
                        new DoubleKeyFrameCollection
                        {
                            new LinearDoubleKeyFrame(1.0, KeyTime.FromPercent(1.0))
                        },
                    Duration = TimeSpan.FromSeconds(3)
                };

            this._sbGradientShifter.Children.Add(daukf);

            string name = nameScope.First(kvp => kvp.Value == gradientStop).Key;

            Storyboard.SetTargetName(daukf, name);
            Storyboard.SetTargetProperty(
                daukf, new PropertyPath(GradientStop.OffsetProperty));
        }

        this._sbGradientShifter.Begin(this);
    }
}

Either way, you would need to declare the name in XAML:

<Window.Background>
  <LinearGradientBrush EndPoint="1,1" StartPoint="0,0">
    <GradientStop x:Name="stop1" Color="Black" Offset="0"/>
    <GradientStop x:Name="stop2" Color="White" Offset="1"/>
  </LinearGradientBrush>
</Window.Background>

But personally, I think it actually would be better to just do the entire animation in XAML and leave code-behind out of it:

<Window x:Class="TestSO38537640AnimateCodeBehind.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        AllowsTransparency="True" WindowStyle="None">

  <Window.Resources>
    <Storyboard x:Key="storyboard1">
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="stop1"
                                     Storyboard.TargetProperty="Offset"
                                     Duration="0:0:3">
        <LinearDoubleKeyFrame Value="1" KeyTime="100%"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="stop2"
                                     Storyboard.TargetProperty="Offset"
                                     Duration="0:0:3">
        <LinearDoubleKeyFrame Value="1" KeyTime="100%"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
  </Window.Resources>

  <Window.Background>
    <LinearGradientBrush EndPoint="1,1" StartPoint="0,0">
      <GradientStop x:Name="stop1" Color="Black" Offset="0"/>
      <GradientStop x:Name="stop2" Color="White" Offset="1"/>
    </LinearGradientBrush>
  </Window.Background>

  <Window.Triggers>
    <EventTrigger RoutedEvent="Loaded">
      <BeginStoryboard Storyboard="{StaticResource storyboard1}"/>
    </EventTrigger>
  </Window.Triggers>
</Window>