How to draw this WPF Path in C#

Johan Aspeling picture Johan Aspeling · Apr 16, 2012 · Viewed 15.4k times · Source

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!

Answer

Dmitry Reznik picture Dmitry Reznik · Apr 16, 2012

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.