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);
}
}