Binding a line to the edge of an ellipse

Question

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?

Answer 1

I'm not sure what the problem is. You can add another element into your Canvas that lines up correctly and apply the transform to the canvas which will rotate both elements?

If you're asking if there's any way to say "line up with this" on the line then no, you can't do that as far as I now. For complicated layouts like this you can either trial and error with KaXaml/Bland, or use Illustrator to lay it out and then export to XAML.

Answer 2

Assuming I understand correctly, you're going to have to figure out the math to change your line's end point. Sorry, don't know the formula offhand, but you'll basically find your point on the ellipse, then figure out it's position given the angle of the rotation, and then change your line's end point using that information.

Answer 3

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"&gt;
    <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).

Answer 4

In order to connect two elements at their edges by a Line, I use a bounding box method as explained in http://stackoverflow.com/questions/1737509/connecting-two-wpf-canvas-elements-by-a-line-without-using-anchors/1737536#1737536.