Storyboard.TargetProperty and Path


  • I have a Path containing a PathGeometry with PathFigures that I want to animate using a Storyboard. In the animations (such as DoubleAnimation), I need to access the Point property of the PathSegments (in my case, it will be an ArcSegment). What I am having trouble doing is figuring out how to specify the Storyboard.TargetProperty. Part of the reason for this is because the properties need converted (for example, the Data property of a path is of type Geometry, even though I have assigned it a PathGeometry). Also, I need to specify indexes for several of the properties (for example, the Figures property of PathGeometry). How do I specify the Storyboard.TargetProperty when I want to animate properties in this type of scenario? Thanks.

    Nathan Sokalski njsokalski@hotmail.com http://www.nathansokalski.com/

    Monday, May 12, 2014 6:38 PM

All replies

  • Hi, you can use PointAnimation if you want to apply animattion to a Path


    For example:

    a path:

    <Path Stroke="Blue" StrokeThickness="2" Name="path">
                            <LineSegment Point="0,100"/>
                            <LineSegment Point="300,100"/>
                            <ArcSegment x:Name="arc" Point="30,500" Size="10,10"/>
                            <LineSegment Point="20,100"/>

    and if apply animation to ArcSegment, you can try:

        <PointAnimation Duration="0:0:1" From="30,500" To="30,100" Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[2].(ArcSegment.Point)" EnableDependentAnimation="True"/>


        <PointAnimation Duration="0:0:1" From="30,500" To="30,100" Storyboard.TargetName="arc" Storyboard.TargetProperty="ArcSegment.Point" EnableDependentAnimation="True"/>

    • Proposed as answer by Dave SmitsMVP Tuesday, May 13, 2014 7:09 AM
    Tuesday, May 13, 2014 6:13 AM
  • That looks like it should be correct, but I need to use DoubleAnimation because I will eventually be using the EaseFunction SineEase, so I need to do the X and Y separately. I tried both of the following:


    Which gave the following errors:

    Cannot resolve TargetProperty (Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(ArcSegment.Point).X on specified object.
    Cannot resolve TargetProperty (Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(ArcSegment.Point.X) on specified object.

    I also tried using (0) instead of [0] (I am using VB.NET, although I don't think that is supposed to affect the XAML), but that did not make any difference either. Does this only work if I use the property/element syntax? I am currently using the Data attribute as follows:

    Data="M 22 496 A 200 200 0 0 0 422 496"

    I tried redefining the Path using property/element syntax, but same problem. What am I doing wrong? Thanks.

    Nathan Sokalski njsokalski@hotmail.com http://www.nathansokalski.com/

    Tuesday, May 13, 2014 3:48 PM