c# - WPF Clipping with a shape -

i trying create 3..2..1 countdown in form of user control. this. idea create 2 rectangles on top of each other, 1 light , 1 dark , have radial circle clipper dark rectangle. radial circle have angle property animated turn around.

i found implementation of radial circle , bound clip property of rectangle on renderedgeometry property of circle. here result :

the red stroke shape of clipper. seems odd behavior of clipping sort of understand know if there way of going around fact clipped object seems use renderedgeometry in weird way.

edit 1 : effect looking http://www.youtube.com/watch?v=9fphto5v2bq

the simple derived shape control shown below draws countdown rectangle. have set fill (and perhaps stroke), width, height , angle properties, , can animate angle 0 360.

public class countdownrect : shape {     static countdownrect()     {         widthproperty.overridemetadata(typeof(countdownrect),             new frameworkpropertymetadata((o, e) => ((countdownrect)o).updategeometry()));          heightproperty.overridemetadata(typeof(countdownrect),             new frameworkpropertymetadata((o, e) => ((countdownrect)o).updategeometry()));          strokelinejoinproperty.overridemetadata(typeof(countdownrect),             new frameworkpropertymetadata(penlinejoin.round));     }      public static readonly dependencyproperty angleproperty =         dependencyproperty.register("angle", typeof(double), typeof(countdownrect),             new frameworkpropertymetadata((o, e) => ((countdownrect)o).updategeometry()));      public double angle     {         { return (double)getvalue(angleproperty); }         set { setvalue(angleproperty, value); }     }      private readonly streamgeometry geometry = new streamgeometry();      protected override geometry defininggeometry     {         { return geometry; }     }      private void updategeometry()     {         if (!double.isnan(width) && !double.isnan(height))         {             var angle = ((angle % 360d) + 360d) % 360d;             var margin = strokethickness / 2d;             var p0 = new point(margin, margin);             var p1 = new point(width - margin, margin);             var p2 = new point(width - margin, height - margin);             var p3 = new point(margin, height - margin);              using (var context = geometry.open())             {                 if (angle == 0d)                 {                     context.beginfigure(p0, true, true);                     context.lineto(p1, true, false);                     context.lineto(p2, true, false);                     context.lineto(p3, true, false);                 }                 else                 {                     var x = p2.x / 2d;                     var y = p2.y / 2d;                     var = math.atan2(x, y) / math.pi * 180d;                     var t = math.tan(angle * math.pi / 180d);                      context.beginfigure(new point(x, y), true, true);                      if (angle < a)                     {                         context.lineto(new point(x + y * t, p0.y), true, false);                         context.lineto(p1, true, false);                         context.lineto(p2, true, false);                         context.lineto(p3, true, false);                         context.lineto(p0, true, false);                     }                     else if (angle < 180d - a)                     {                         context.lineto(new point(p2.x, y - x / t), true, false);                         context.lineto(p2, true, false);                         context.lineto(p3, true, false);                         context.lineto(p0, true, false);                     }                     else if (angle < 180d + a)                     {                         context.lineto(new point(x - y * t, p2.y), true, false);                         context.lineto(p3, true, false);                         context.lineto(p0, true, false);                     }                     else if (angle < 360d - a)                     {                         context.lineto(new point(p0.x, y + x / t), true, false);                         context.lineto(p0, true, false);                     }                     else                     {                         context.lineto(new point(x + y * t, p0.y), true, false);                     }                      context.lineto(new point(x, p0.y), true, false);                 }             }         }     } }