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!!!

score 1 · Accepted Answer · answered Aug 29 '18 at 03:41

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);

Would you mind adding why a XAML ColorAnimation won't work? (To me this seems very counter-intuitive, especially because Color is a dependency property) — Emond, Aug 29 '18 at 12:10
I'm also curious to know, the reason of XAML ColorAnimation doesn't work, Although the solution for my particular case seem could work, it would be great that DropShadowPanel could work with normal XAML. — Enrique A. Pinelo Novelo, Aug 29 '18 at 18:57
@ErnodeWeerd `Color` of `DropShadow` is not a dependency property though. It's part of the new Composition API that's meant to do more than the traditional Storyboard animations. We do have a lot of helpers in Windows Community Toolkit that wraps Comp API in XAML friendly attached properties. — Justin XL, Aug 31 '18 at 00:48
@JustinXL - So the first line of this answer is not correct? — Emond, Aug 31 '18 at 03:46
@EnriqueA.PineloNovelo it is. The `Color` dependency property of the `DropShadowPanel` is merely for updating the inner `Color` (clr property) of the `DropShadow`. Note these two `Color`s are different. — Justin XL, Aug 31 '18 at 03:49

score 0 · Answer 2 · answered Aug 24 '18 at 13:08

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!!!!

do you have a link to that issue you created? I didn't see it. — Michael Hawker - MSFT, Aug 24 '18 at 19:03
Here is the link: https://github.com/MicrosoftDocs/WindowsCommunityToolkitDocs/issues/92 — Enrique A. Pinelo Novelo, Aug 24 '18 at 20:27
Hey man, Michael Hawker - MSFT are you able to solve this question?? — Enrique A. Pinelo Novelo, Aug 25 '18 at 18:06
Ah, I was looking on the [main source repo](https://github.com/Microsoft/WindowsCommunityToolkit/issues) as you mentioned it as a bug. I did see Nikola asked Justin about it on the docs repo though; he may be more familiar with this type of issue than I am. — Michael Hawker - MSFT, Aug 28 '18 at 03:21

is it Possible to apply ColorAnimationUsingKeyFrames to a DropShadowPanel?

2 Answers2