Making circle animation in WPF

This animation is like the circle animation of MS power point. You can set any geometry like ellipse geometry to define the visible region of a WPF UIelement type. To make it possible every WPF UIelement type has a clip property and you can set any geometry object to clip. However, for circle animation, we need circle geometry but WPF does not have built-in circle geometry.

How we can make circle geometry in WPF from ellipse Geometry?

An Ellipse Geometry is defined by a center point, an x-radius and a y-radius. As we know an ellipse geometry has two radius: radiousx and radiousy. If we keep the value of these two radiuses same, it will behave as circle. Just we will keep Radiousx = Radiousy all the time.

How this animation effect is achieved?

This trick is applicable to any UIelement type. Here I have taken image as the Uielement type to implement the circle animation. I have calculated the height and width of the image. Then set the centre of circle as (width/2, height/2) to start the animation from centre point. At first we keep the radius of the circle is 0. Then increment the radius proportion to time. For animation, we use double animation. Next thing is how much we will increase the radius. I have just compared the height and width of UIelement and set the radious equal to bigger one divided by two.

   1: EllipseGeometry ellipseGeometry = new EllipseGeometry();     

   2: ellipseGeometry.RadiusX = 0;

   3: ellipseGeometry.RadiusY = 0;

   4: double centrex = image.Source.Width / 2;

   5: double centrey = image.Source.Height / 2;

   6: ellipseGeometry.Center = new Point(centrex, centrey);

   7:  

   8: image.Clip = ellipseGeometry; //The most important line

   9:  

  10: if (image.Source.Width > image.Source.Height)

  11:    animationLength = image.Source.Width / 2;

  12: else

  13:    animationLength = image.Source.Height / 2;

  14: DoubleAnimation a = new DoubleAnimation();

  15: a.From = 0;

  16: a.To = animationLength+50;

  17: a.Duration = new Duration(TimeSpan.Parse("0:0:10"));

  18: ellipseGeometry.BeginAnimation(EllipseGeometry.RadiusXProperty, a);

  19: ellipseGeometry.BeginAnimation(EllipseGeometry.RadiusYProperty, a);

The used XAML for this is in the following

   1: <Window x:Class="circle.Window1"

   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:     Title="Window1" Height="300" Width="300">

   5:     <Canvas Name="canMain"    Height="300" Width="300"  >            

   6:         <Image   Canvas.Left="100" Canvas.Top="60"  Name="image"/>   

   7:     </Canvas>

   8: </Window>

You can download the sample code from here. Hope this will save some of your time.