Animate Drawing Circle in WPF with XAML

Question

I want to be able to smoothly draw a circle (ellipse) so that you can see it being drawn on screen.

Is there anyway possible using DoubleAnimation to do this? If not what is an alternative method?

An example of what I have:

• One outer ellipse (black)
• Inner ellipse (white) - this is the one I want to animate

Code:

<Ellipse Width="200" Height="200" Stroke="Black" StrokeThickness="20"/>
    <Ellipse Width="190" Height="190" Stroke="White" StrokeThickness="10" Canvas.Left="5"    Canvas.Top="5" x:Name="animatedEllipse">
        <Ellipse.Triggers>
            <EventTrigger RoutedEvent="Ellipse.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Ellipse.Triggers>
    </Ellipse>

I've look at a few examples for example:

• http://elegantcode.com/2009/08/21/a-simple-wpf-loading-animation/
• http://www.charlespetzold.com/blog/2012/03/The-Animated-Pie-Slice-in-Windows-8.html
• Ellipse Drawing WPF Animation

The first two are a bit confusimg for me being new to WPF animation. The latter has 7 votes as "Correct answer" but it is not working for me as I get error "the collection element StrokeDashArray[0] is not a dependency property" (and also I don't want dashes, Although I tried this even on an ellipse with dashes as per the above article and it still failed on this error.

Update:

A method I got sort of working using code is this:

public static class ExtensionMethods
{
    private static Action EmptyDelegate = delegate() { };

    public static void Refresh(this UIElement uiElement)
    {
        uiElement.Dispatcher.Invoke(DispatcherPriority.Render, EmptyDelegate);
    }
}

public partial class Page1 : Page
{
    private void Page_Loaded_1(object sender, RoutedEventArgs e)
    {
        path = new Path();
        group = new GeometryGroup();
        path.Data = group;

        path.Stroke = new SolidColorBrush(Colors.White);
        path.StrokeThickness = 3;

        canvas.Children.Add(path);
        BackgroundWorker worker = new BackgroundWorker();
        worker.DoWork += worker_DoWork;
        worker.RunWorkerAsync();
    }

    void worker_DoWork(object sender, DoWorkEventArgs e)
    {
        int radius = 90;
        for (double i = 0.0; i < 360.0; i += 1)
        {
            double angle = i * System.Math.PI / 180;
            double x = (int)(100 + radius * System.Math.Cos(angle));
            double y = (int)(100 + radius * System.Math.Sin(angle));
            canvas.Dispatcher.Invoke(new Action(delegate
            {
                group.Children.Add(new EllipseGeometry(new Point(x, y), 5, 5));
            }));
            canvas.Refresh();
            System.Threading.Thread.Sleep(1);

        }
    }

Answer 1

You might need three elements:

1. Outer circle (fill color will be light colors).

2. inner circle with transparent fill color.

3. Arc segment will be having thickness difference of radius between them.

4. Arc will be positioned at 45 angle , can be animated over the both circles.

This is just an idea, I might need to test it on my own.

Answer 2

You might get further by using an ArcSegment instead of an ellipse:

<PathFigure StartPoint="100,100">
    <PathFigure.Segments>
        <PathSegmentCollection>
            <ArcSegment Size="100,100" IsLargeArc="True"
                        SweepDirection="CounterClockwise" Point="200,200" />
        </PathSegmentCollection>
    </PathFigure.Segments>
</PathFigure>

It needs to be part of the PathFigure - where the start point is specified.

You can then animate Point which is the end point of the arc to go from the start point through 360 degrees to the end point.