allemannen allemannen - 23 days ago 7
C# Question

Center drawn Ellipse origin

I'm trying to make a simple animation with a circle that is expanding and fading away, the problem i have is that it is expanding from the top left and i want it to expand from the center, iv'e tried setting RenderTransformOrigin to (0.5, 0.5) but it still don't works.

This is my code:

Ellipse impact = new Ellipse();

impact.Width = 50;
impact.Height = 50;
impact.StrokeThickness = 1.5f;

impact.RenderTransformOrigin = new Point(0.5, 0.5);
MainCanvas.Children.Add(impact);


Storyboard story = new Storyboard();
DoubleAnimation anim = new DoubleAnimation(0, 60, TimeSpan.FromSeconds(0.9));
DoubleAnimation anim2 = new DoubleAnimation(0, 60, TimeSpan.FromSeconds(0.9));
DoubleAnimation anim3 = new DoubleAnimation(1, 0, TimeSpan.FromSeconds(0.9));


Storyboard.SetTargetProperty(anim, new PropertyPath("(Ellipse.Height)"));
Storyboard.SetTargetProperty(anim2, new PropertyPath("(Ellipse.Width)"));
Storyboard.SetTargetProperty(anim3, new PropertyPath("(Ellipse.Opacity)"));

story.Children.Add(anim);
story.Children.Add(anim2);
story.Children.Add(anim3);

impact.BeginStoryboard(story);

Answer

Setting the RenderTransformOrigin property without also setting a RenderTransform has no effect.

What you probably want to do is to animate a Path with an EllipseGeometry instead of an Ellipse:

var impact = new Path
{
    Data = new EllipseGeometry(new Point(25, 25), 25, 25),
    StrokeThickness = 1.5,
    Stroke = Brushes.Black
};

MainCanvas.Children.Add(impact);

Storyboard story = new Storyboard();
DoubleAnimation anim1 = new DoubleAnimation(0, 30, TimeSpan.FromSeconds(0.9));
DoubleAnimation anim2 = new DoubleAnimation(0, 30, TimeSpan.FromSeconds(0.9));
DoubleAnimation anim3 = new DoubleAnimation(1, 0, TimeSpan.FromSeconds(0.9));

Storyboard.SetTargetProperty(anim1, new PropertyPath("Data.RadiusX"));
Storyboard.SetTargetProperty(anim2, new PropertyPath("Data.RadiusY"));
Storyboard.SetTargetProperty(anim3, new PropertyPath("Opacity"));

story.Children.Add(anim1);
story.Children.Add(anim2);
story.Children.Add(anim3);

impact.BeginStoryboard(story);

You may now adjust the EllipseGoemetry's center and radius to achieve the desired effect. It is also not clear why your circle starts with a radius of 25, just to be immediately animated from 0 to 30.

Comments