Home/ Questions/Q 157375
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T10:29:35+00:00

On a canvas I have an ellipse rotated by a RotateTransform through animation. I

  • 0

On a canvas I have an ellipse rotated by a RotateTransform through animation. I wish to add a line with one end attached to a point on the ellipse. Can I somehow bind to a point on the ellipse?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. You can animate both the Ellipse and the line together, like so:

    <Canvas xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>     <Canvas.Resources>         <PathGeometry x:Key='lineEndPath'>             <PathFigure StartPoint='25,50'>                 <ArcSegment IsLargeArc='True' Point='100,50' Size='25,25' SweepDirection='Clockwise'/>                 <ArcSegment IsLargeArc='True' Point='25,50' Size='25,25' SweepDirection='Clockwise'/>             </PathFigure>         </PathGeometry>     </Canvas.Resources>     <Canvas.Triggers>         <EventTrigger RoutedEvent='Canvas.Loaded'>             <BeginStoryboard>                 <Storyboard>                     <DoubleAnimation Duration='0:0:5' From='0' RepeatBehavior='Forever' Storyboard.TargetName='rotTF' Storyboard.TargetProperty='Angle' To='360'/>                     <PointAnimationUsingPath Duration='0:0:5' PathGeometry='{StaticResource lineEndPath}' RepeatBehavior='Forever' Storyboard.TargetName='lineEndPoint' Storyboard.TargetProperty='Point'/>                 </Storyboard>             </BeginStoryboard>         </EventTrigger>     </Canvas.Triggers>     <Ellipse Width='75' Height='50' Canvas.Left='25' Canvas.Top='25' Stroke='Black'>         <Ellipse.RenderTransform>             <RotateTransform x:Name='rotTF' CenterX='37.5' CenterY='25'/>         </Ellipse.RenderTransform>     </Ellipse>     <Path Stroke='Black' StrokeThickness='1.0'>         <Path.Data>             <PathGeometry>                 <PathFigure StartPoint='0,0'>                     <LineSegment x:Name='lineEndPoint'/>                 </PathFigure>             </PathGeometry>         </Path.Data>     </Path>     <Path Data='{StaticResource lineEndPath}' Stroke='Black' StrokeDashArray='2,0,0' StrokeThickness='1.0'/> </Canvas>

    We animate one end of a LineSegment with a PointAnimationUsingPath, and set the path to a circle (shown by the dotted line).

    • 0