How to animate GradientStop color?

Question

I've tried code below, but there's something wrong in line "Storyboard.SetTargetProperty(ca1, new PropertyPath("GradientStop.ColorProperty"));

sb.Begin(this) threw an InvalidOperationException and couldn't resolve „gradStop1.ColorProperty”.

How to properly animate GradientStop colors?

private void UserControl_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        LinearGradientBrush lgb = new LinearGradientBrush(
           (Color)ColorConverter.ConvertFromString("#FF1E2838"),
           (Color)ColorConverter.ConvertFromString("#FF2B364F"),
           new Point(0.5, 0),
           new Point(0.5, 1));
        UCBody.Background = lgb;

        ColorAnimation ca1 = new ColorAnimation(
            (Color)ColorConverter.ConvertFromString("#FF1E2838"),
            (Color)ColorConverter.ConvertFromString("#FF1E1E1E"),
            TimeSpan.FromMilliseconds(600));

        ColorAnimation ca2 = new ColorAnimation(
            (Color)ColorConverter.ConvertFromString("#FF2B364F"),
            (Color)ColorConverter.ConvertFromString("#FF2B2B38"),
            TimeSpan.FromMilliseconds(600));

        Storyboard sb = new Storyboard();
        sb.Children.Add(ca1);
        sb.Children.Add(ca2);
        Storyboard.SetTargetName(ca1, "gradStop1");
        Storyboard.SetTargetProperty(ca1, new PropertyPath("GradientStop.ColorProperty"));
        Storyboard.SetTargetName(ca2, "gradStop2");
        Storyboard.SetTargetProperty(ca2, new PropertyPath("GradientStop.ColorProperty"));

        sb.Begin(this);
    }
}

Why don't you define your animation in XAML? it would be much more simpler and you won't need to handle a lot of conversions as well. It will be easier to animate a XAML defined gradient brush as well. Should I guide you to do so instead? — iam.Carrot, Jun 04 '17 at 16:56
First of all, use `new PropertyPath(GradientStop.ColorProperty)` or `new PropertyPath(GradientStop.ColorProperty.Name)` instead of string literal. And secondly, what is the `gradStop1` and `gradStop2`? I don't see where objects with these names are defined. — Maxim, Jun 05 '17 at 06:37

score 0 · Accepted Answer · answered Jun 05 '17 at 16:10

You have no objects named "gradStop1" or "gradStop2" but you could animate the gradient stops of the LinearGradientBrush using the BeginAnimation method:

private void UserControl_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    LinearGradientBrush lgb = new LinearGradientBrush(
       (Color)ColorConverter.ConvertFromString("#FF1E2838"),
       (Color)ColorConverter.ConvertFromString("#FF2B364F"),
       new Point(0.5, 0),
       new Point(0.5, 1));
    UCBody.Background = lgb;

    ColorAnimation ca1 = new ColorAnimation(
        (Color)ColorConverter.ConvertFromString("#FF1E2838"),
        (Color)ColorConverter.ConvertFromString("#FF1E1E1E"),
        TimeSpan.FromMilliseconds(600));

    ColorAnimation ca2 = new ColorAnimation(
        (Color)ColorConverter.ConvertFromString("#FF2B364F"),
        (Color)ColorConverter.ConvertFromString("#FF2B2B38"),
        TimeSpan.FromMilliseconds(600));

    lgb.GradientStops[0].BeginAnimation(GradientStop.ColorProperty, ca1);
    lgb.GradientStops[1].BeginAnimation(GradientStop.ColorProperty, ca2);
}

How to animate GradientStop color?

1 Answers1