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?

<

Answer 1

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:

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