Surface project - part 17 (Major Demo - Rich Media Map - Animation)

It will be interesting to see some animation inside the demo. I have found one place to demonstrate it. When user searches the push pin based on tag information, an animating ellipse will be displayed around matched push pins. WPF provide three animation class, DoubleAnimation, ColorAnimation and PointAnimation.

To implement the animation on the ellipse is not quite straightforward, as if you attach the color animation on the ellipse to change color of the stroke, then you will receive exception says that color cannot apply to brush.

The solution is to attach the color animation on the stroke of the ellipse.

Following code shows how to attach color animation on ellipse's stroke.

ColorAnimation cAnimation = new ColorAnimation();
            cAnimation.From = Colors.Red;
            cAnimation.To = Colors.Green;
            cAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
 
            cAnimation.AutoReverse = true;
            cAnimation.RepeatBehavior = RepeatBehavior.Forever;
            string name = GetUniqueName();
            Mediator.TheWindow.RegisterName(name, ellipseborder);
            myStoryboard.Children.Add(cAnimation);
            Storyboard.SetTargetName(cAnimation, name);
            Storyboard.SetTargetProperty(cAnimation, new PropertyPath(SolidColorBrush.ColorProperty));

Following snaps show the effect of the ellipse around the push pin.

The color of the stroke of the ellipse is changing from red to green.