How to draw this WPF Path in C#

Question

I have been struggling to convert this piece of WPF code to C#. I am relatively new to WPF, and I really hope someone can help me out here :)

    <Path Fill="Blue" Margin="15,15,15,15">
        <Path.Data>
            <EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
                Center="10,100" RadiusX="15" RadiusY="15" />
        </Path.Data>
        <Path.Triggers>
            <EventTrigger RoutedEvent="Path.Loaded">
                <BeginStoryboard Name="MyBeginStoryboard">
                    <Storyboard>

                        <!-- Animates the ellipse along the path. -->
                        <PointAnimationUsingPath
                            Storyboard.TargetName="MyAnimatedEllipseGeometry"
                            Storyboard.TargetProperty="Center"
                            Duration="0:0:5" 
                            RepeatBehavior="Forever" >
                            <PointAnimationUsingPath.PathGeometry>
                                <PathGeometry 
                                    Figures="M 10,100 C 35,0 135,0 160,100 135,0 35,0 10,100"
                                />
                            </PointAnimationUsingPath.PathGeometry>
                        </PointAnimationUsingPath>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Path.Triggers>
    </Path>
</Canvas>

I seemed to get along just fine until I got to the PathGeometry Figures... If anyone can supply me with a C# code snippet of this WPF code, it will be greatly appreciated!

score 3 · Accepted Answer · answered Apr 16 '12 at 08:09

I'd recommend reading following msdn article.

"M 10,100 C 35,0 135,0 160,100 135,0 35,0 10,100"

Means following: start at (10,100). Add "cubic Bezier curve" ending at 10,100 with control points (35,0), (135,0), (160,100), (135,0), (35,0).

As I understand it. Such text should be easy to render into PathSegmentCollection.

gliderkite · Answer 2 · 2012-04-16T10:26:15.620

This is what you are looking for: PointAnimationUsingPath.PathGeometry. There's a detailed example of how to solve your problem, that shows how to use a PointAnimationUsingPath object to animate a Point along a curved path. For a complete sample; and if you don't want to use Storyboard: How to: Animate a Property Without Using a Storyboard. Bear in mind that MSDN is stocked with examples and detailed explanations.

How to draw this WPF Path in C#

2 Answers2