is it Possible to apply ColorAnimationUsingKeyFrames to a DropShadowPanel?

Question

I'm using UWP and I'm trying to apply Color animation using Keyframes to a DropShadowPanel from the UWP Community Toolkit.

but I haven't been able to succeed so far I've been able to apply DoubleAnimation to BlurRadius Property and Opacity Property but everytime I try to apply Color animation my program breaks.

I also applied Color Animation to a Polygon Shape at my Canvas and it worked great, I'm using almost the same code, can somebody give me a hint please:

This is the code from my polygon it WORKS:

<ColorAnimationUsingKeyFrames Storyboard.TargetName="ChristmasStarUpperPosition"
                                                      Storyboard.TargetProperty="(Polygon.Fill).(SolidColorBrush.Color)"
                                                      RepeatBehavior="Forever"
                                                      AutoReverse="True">
                            <LinearColorKeyFrame Value="Silver" KeyTime="0:0:5"/>
                            <LinearColorKeyFrame Value="LightGray" KeyTime="0:0:2"/>
                            <SplineColorKeyFrame Value="Gray" KeyTime="0:0:2.5" KeySpline="0.6,0.0 0.9,0.00"/>
                            <DiscreteColorKeyFrame Value="Blue" KeyTime="0:0:3"/>
                            <LinearColorKeyFrame Value="Blue" KeyTime="0:0:5"/>
                            <LinearColorKeyFrame Value="LightBlue" KeyTime="0:0:2"/>
                            <SplineColorKeyFrame Value="DeepSkyBlue" KeyTime="0:0:2.5" KeySpline="0.6,0.0 0.9,0.00"/>
                            <DiscreteColorKeyFrame Value="Goldenrod" KeyTime="0:0:3"/>
                            <LinearColorKeyFrame Value="Goldenrod" KeyTime="0:0:5"/>
                        </ColorAnimationUsingKeyFrames>

and this is the code I'm trying to apply to my DropShadowPanel this code makes mas program fail at xaml level.

<ColorAnimationUsingKeyFrames Storyboard.TargetName="ChristmasBonusStarUpperDropShadowPolygonColor"
                                                      Storyboard.TargetProperty="(DropShadowPanel.Color).(SolidColorBrush.Color)"
                                                      RepeatBehavior="Forever"
                                                      AutoReverse="True">
                            <LinearColorKeyFrame Value="Silver" KeyTime="0:0:5"/>
                            <LinearColorKeyFrame Value="LightGray" KeyTime="0:0:2"/>
                            <SplineColorKeyFrame Value="Gray" KeyTime="0:0:2.5" KeySpline="0.6,0.0 0.9,0.00"/>
                            <DiscreteColorKeyFrame Value="Blue" KeyTime="0:0:3"/>
                            <LinearColorKeyFrame Value="Blue" KeyTime="0:0:5"/>
                            <LinearColorKeyFrame Value="LightBlue" KeyTime="0:0:2"/>
                            <SplineColorKeyFrame Value="DeepSkyBlue" KeyTime="0:0:2.5" KeySpline="0.6,0.0 0.9,0.00"/>
                            <DiscreteColorKeyFrame Value="Goldenrod" KeyTime="0:0:3"/>
                            <LinearColorKeyFrame Value="Goldenrod" KeyTime="0:0:5"/>
                        </ColorAnimationUsingKeyFrames>

hopefully someone can help me out!!!

Thanks!!!

Answer 1

Although the Color property is a dependency property, it merely acts like a proxy that updates the Color of an inner DropShadow (see code below) that comes from Windows.UI.Composition. A traditional XAML storyboard simply won't work.

private void OnColorChanged(Color newValue)
{
    if (_dropShadow != null)
    {
        _dropShadow.Color = newValue;
    }
}

But what you want can be easily achieved by using the new color animation API (i.e. CreateColorKeyFrameAnimation) from Composition. Here's an example for your particular case:

var compositor = Window.Current.Compositor;
var easeIn = compositor.CreateCubicBezierEasingFunction(new Vector2(0.6f, 0.0f), new Vector2(0.9f, 0.0f));
var linear = compositor.CreateLinearEasingFunction();

var colorAnimation = compositor.CreateColorKeyFrameAnimation();
// 0.0f means at 0% of the total duration of 5s, 0.2f means 20%, etc.
colorAnimation.InsertKeyFrame(0.0f, Colors.Red, linear);
colorAnimation.InsertKeyFrame(0.2f, Colors.DarkOrange, easeIn);
colorAnimation.InsertKeyFrame(0.4f, Colors.Green, linear);
colorAnimation.InsertKeyFrame(0.6f, Colors.Purple, easeIn);
colorAnimation.InsertKeyFrame(0.8f, Colors.DarkSlateGray, linear);
colorAnimation.InsertKeyFrame(1.0f, Colors.Black, linear);
colorAnimation.Duration = TimeSpan.FromSeconds(5);
colorAnimation.IterationBehavior = AnimationIterationBehavior.Forever;

// Note the control exposes the inner DropShadow property, and this is the property we want to animate
ChristmasBonusStarUpperDropShadowPolygon.DropShadow.StartAnimation("Color", colorAnimation);

Answer 2

As Erno de Weerd answered his code works but I'll like to complement this question with my answer firstable the answer from Erno works if apply like he showed. you could also can call the alias since DropShadowPanel is a third party control and belong to another namespace its necessarily to call the proper namespace in your page or usercontrol like this:

<UserControl
x:Class="Ceneam.UserControlViews.ChristmasBonusCalculatorControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="using:Ceneam.ViewModels"
xmlns:toolkitscontrols="using:Microsoft.Toolkit.Uwp.UI.Controls"
...>

then you can make the code works or better said not to break you xaml or your program you should use the proper ColorAnimationUsingKeyFrames like this for any property of the DropShadowPanel Control like this:

<ColorAnimationUsingKeyFrames Storyboard.TargetName="ChristmasBonusStarUpperDropShadowPolygon"
                                                      Storyboard.TargetProperty="toolkitscontrols:DropShadowPanel.Color"
                                                      RepeatBehavior="Forever"
                                                      AutoReverse="True">
                            <LinearColorKeyFrame Value="Red" KeyTime="0:0:5"/>
                            <LinearColorKeyFrame Value="DarkGreen" KeyTime="0:0:2"/>
                            <SplineColorKeyFrame Value="DarkOrange" KeyTime="0:0:2.5" KeySpline="0.6,0.0 0.9,0.00"/>
                            <DiscreteColorKeyFrame Value="DarkRed" KeyTime="0:0:3"/>
                            <LinearColorKeyFrame Value="Green" KeyTime="0:0:5"/>
                            <LinearColorKeyFrame Value="Crimson" KeyTime="0:0:2"/>
                            <SplineColorKeyFrame Value="Purple" KeyTime="0:0:2.5" KeySpline="0.6,0.0 0.9,0.00"/>
                            <DiscreteColorKeyFrame Value="DarkSlateGray" KeyTime="0:0:3"/>
                            <LinearColorKeyFrame Value="Black" KeyTime="0:0:5"/>
                        </ColorAnimationUsingKeyFrames>

as you can see this code won't break your xaml however, animation won't be apply to your control, just doesn't break it, but animation as I repeated won't work on your control.

I already reported this issue to UWP Community Toolkit project at GitHub, because I believe its a bug, because also BlurRadius and ShadowOpacity never change if try to apply DoubleAnimation or DoubleAnimationUsingKeyFrames.

So right now answering my own question it is not possible to apply ColorAnimationUsingKeyFrames to a DropShadowPanel, you can make the code DONT BREAK YOUR XAML, but IT WONT BE APPLY to your CONTROL!!!!