How to draw ArcSegment using PointAnimation?

Emon Haque 3,176 Reputation points
2021-04-03T04:26:19.773+00:00

I've these in Mainwindow.xaml:

<Grid Margin="20">  
    <Path x:Name="ellipse" Fill="Blue">  
        <Path.Data>  
            <EllipseGeometry RadiusX="10" RadiusY="10"/>  
        </Path.Data>  
    </Path>  
    <Path x:Name="arc" Stroke="Red" StrokeThickness="3">  
        <Path.Data>  
            <PathGeometry>  
                <PathFigure StartPoint="300, 100">  
                    <PathSegmentCollection>  
                        <ArcSegment Point="400,200" Size="1 1" SweepDirection="Clockwise"/>  
                    </PathSegmentCollection>  
                </PathFigure>  
            </PathGeometry>  
        </Path.Data>  
    </Path>  
    <Path x:Name="circle" Stroke="Green" StrokeThickness="3">  
        <Path.Data>  
            <PathGeometry>  
                <PathFigure StartPoint="300, 100">  
                    <PathSegmentCollection>  
                        <ArcSegment Point="400,200" Size="1 1" SweepDirection="Clockwise"/>  
                        <!--<ArcSegment Point="300,100" Size="1 1" SweepDirection="Clockwise"/>-->  
                    </PathSegmentCollection>  
                </PathFigure>  
            </PathGeometry>  
        </Path.Data>  
    </Path>  
</Grid>  

and in Mainwindow.xaml.cs these:

public MainWindow() {  
    InitializeComponent();  
    var geo = circle.Data as PathGeometry;  
    var a = (arc.Data as PathGeometry).Figures[0].Segments[0] as ArcSegment;  
    var e = ellipse;  
    e.RenderTransform = new MatrixTransform();  
    var anim1 = new PointAnimationUsingPath() {  
        PathGeometry = geo,  
        Duration = TimeSpan.FromSeconds(2),  
        RepeatBehavior = RepeatBehavior.Forever  
    };  
    var anim2 = new MatrixAnimationUsingPath() {  
        PathGeometry = geo,  
        Duration = TimeSpan.FromSeconds(2),  
        RepeatBehavior = RepeatBehavior.Forever  
    };  
    a.BeginAnimation(ArcSegment.PointProperty, anim1);  
    e.RenderTransform.BeginAnimation(MatrixTransform.MatrixProperty, anim2);  
}  

this is what I see when I run the App:

84156-test1.gif

So the PointAnimation makes different red arc instead of drawing it over the green arc. I want the red to be drawn over the green, how to do that?

Windows Presentation Foundation
Windows Presentation Foundation
A part of the .NET Framework that provides a unified programming model for building line-of-business desktop applications on Windows.
2,824 questions
0 comments No comments
{count} votes

Accepted answer
  1. Viorel 119.7K Reputation points
    2021-04-03T09:24:16.91+00:00

    It seems to work if you set Size="70.711 70.711" to both of arcs and also change the order of paths in XAML.

    1 person found this answer helpful.

0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.