Fade with a DispatcherTimer

Question

In my uwp project i have 3 different color overlays on pictures (Green, yellow and red). These colors are supposed to indicate if a Room (In this case the room is a picture) is booked or not.

If the room is booked it should fade out the green color and fade over the red color, and then after 7 seconds the red color should fade over to yellow color, and then finally the yellow color should fade over to green color again.

For the fade i´m using Windows Animation extension for UWP.
Green Color is set as default.

Right now when a room is booked the the first fade is working (Red to yellow), but there is no fade for Yellow to Green.

    public void RedIndicatorColorToYellowIndicatorColor()
    {
        StatusColor.Fade(duration: 1000, delay: 2000, value: 0).Start();
        StatusColor.Fill = RedBrush;
        DispatcherTimer ColorTimer = new DispatcherTimer();
        ColorTimer.Interval = TimeSpan.FromSeconds(7);
        ColorTimer.Tick += (Sender, args) =>
        {
            YellowindIcatorColorToGreenIndicatorColor();
            ColorTimer.Stop();
        };
        ColorTimer.Start();
    }

    public void YellowindIcatorColorToGreenIndicatorColor()
    {
        StatusColor.Fade(duration: 1000, delay: 0, value: 1).Start();
        StatusColor.Fill = YellowBrush;
        DispatcherTimer ColorTimer2 = new DispatcherTimer();
        ColorTimer2.Interval = TimeSpan.FromSeconds(7);
        ColorTimer2.Tick += (Zender, Args) =>
        {
            StatusColor.Fill = GreenBrush;
            ColorTimer2.Stop();
        };
        ColorTimer2.Start();
    }

StatusColor is the Rectangle that holds the color overlays.

Your above code works well in my side using the [Fade](https://learn.microsoft.com/en-us/windows/uwpcommunitytoolkit/animations/Fade). It fades from Red to Yellow then from Yellow to Green. What is your xaml code? I can not reproduce your issue, could you provide a minum sample to help me see it? — Breeze Liu - MSFT, May 25 '18 at 07:48
@BreezeLiu-MSFT Thanks for the answer! I have solved the problem already, but i forgot to remove the question... But thanks for trying to help :) — luddep, May 25 '18 at 08:25
@BreezeLiu-MSFT Thanks! I suould remove the question right? :) — luddep, May 25 '18 at 09:36
You might want to switch to using a color animation/storyboard instead. That takes away the timer code. — Emond, May 25 '18 at 15:20

score 0 · Accepted Answer · answered May 25 '18 at 14:18

Solved the problem!

public void RedIndicatorColorToYellowIndicatorColor()
            {
                StatusColor.Fill = GreenBrush;
                DispatcherTimer ColorTimer = new DispatcherTimer();
                ColorTimer.Interval = TimeSpan.FromSeconds(7);
                ColorTimer.Tick += async (Sender, args) =>
                {
                    await StatusColor.Fade(duration: 1000, delay: 0, value: 0).StartAsync();
                    StatusColor.Fill = RedBrush;
                    await StatusColor.Fade(duration: 1200, delay: 0, value: 1).StartAsync();

                    YellowindIcatorColorToGreenIndicatorColor();
                    ColorTimer.Stop();
                };
                ColorTimer.Start();
            }

            public void YellowindIcatorColorToGreenIndicatorColor()
            {
                DispatcherTimer ColorTimer2 = new DispatcherTimer();
                ColorTimer2.Interval = TimeSpan.FromSeconds(7);
                ColorTimer2.Tick += async (Zender, Args) =>
                {
                    await StatusColor.Fade(duration: 1000, delay: 0, value: 0).StartAsync();
                    StatusColor.Fill = YellowBrush;
                    await StatusColor.Fade(duration: 1200, delay: 0, value: 1).StartAsync();

                    red2green();
                    ColorTimer2.Stop();
                };
                ColorTimer2.Start();
            }

Fade with a DispatcherTimer

1 Answers1

Solved the problem!