如何围绕椭圆中心旋转ArcSegment

Question

I have 2 shapes: one ellipse and one circle.I want to rotate circle around ellipse's center.

<Path Stroke="Indigo" StrokeThickness="3" RenderTransformOrigin="0.5,0.5"
      Data="M 50 50 A 50 50 0 0 0 42.5 26.2">
      <Path.RenderTransform>
           <RotateTransform Angle="270"/>
      </Path.RenderTransform>
</Path>
<Ellipse Stroke="Black" Width="50" Height="50"/>

Here is what I want

Answer 1

First make sure that both shapes use the same coordinate system. You could draw both as a Path , one with an EllipseGeometry , the other with a PathGeometry , in a common Canvas parent. The upper left corner of the Canvas defines the coordinate origin.

<Canvas Margin="100">
    <Path Stroke="Black">
        <Path.Data>
            <EllipseGeometry RadiusX="50" RadiusY="50"/>
        </Path.Data>
    </Path>
    <Path Stroke="LightBlue" StrokeThickness="5">
        <Path.Data>
            <PathGeometry>
                <PathFigure StartPoint="0,-50">
                    <ArcSegment Point="42.5,-26.2" Size="50,50"
                                IsLargeArc="False" SweepDirection="Clockwise"/>
                </PathFigure>
                <PathGeometry.Transform>
                    <RotateTransform Angle="15"/>
                </PathGeometry.Transform>
            </PathGeometry>
        </Path.Data>
    </Path>
</Canvas>

Now adjust the ArcSegment's Point and the RotateTransform's Angle according to your needs.

---

Update: you could add an animation that constantly rotates the arc segment like this:

<Path Stroke="LightBlue" StrokeThickness="5">
    <Path.Data>
        <PathGeometry>
            <PathFigure StartPoint="0,-50">
                <ArcSegment Point="42.5,-26.2" Size="50,50"
                            IsLargeArc="False" SweepDirection="Clockwise"/>
            </PathFigure>
            <PathGeometry.Transform>
                <RotateTransform x:Name="transform"/>
            </PathGeometry.Transform>
        </PathGeometry>
    </Path.Data>
    <Path.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetName="transform"
                        Storyboard.TargetProperty="Angle"
                        To="360" Duration="0:0:2" RepeatBehavior="Forever"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Path.Triggers>
</Path>

Or without explictly naming the RotateTransform:

<Path Stroke="LightBlue" StrokeThickness="5">
    <Path.Data>
        <PathGeometry>
            <PathFigure StartPoint="0,-50">
                <ArcSegment Point="42.5,-26.2" Size="50,50"
                            IsLargeArc="False" SweepDirection="Clockwise"/>
            </PathFigure>
            <PathGeometry.Transform>
                <RotateTransform/>
            </PathGeometry.Transform>
        </PathGeometry>
    </Path.Data>
    <Path.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetProperty="Data.Transform.Angle"
                        To="360" Duration="0:0:2" RepeatBehavior="Forever"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Path.Triggers>
</Path>