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:

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?