Is it possible to animate a PolyLineSegment in Silverlight, i.e. the PointCollection?

Question

I'm clipping a Canvas I have with a diamond-shaped PolyLineSegment in a PathGeometry. I'm trying to animate the PointCollection of it though, and cannot seem to resolve the TargetProperty. This is the only other reference all of Google found that is pretty much what I'm trying to do and the the same PropertyPath: http://forums.silverlight.net/forums/p/22239/78225.aspx

Is it even possible to get a Point from a PointCollection in order to change it's values in an animation?

Answer 1

Unfortunately I don't think that is possible to animate the Polyline.Points...

Those points object are from "System.Windows.Point" and the problem is that their "X" and "Y" properties are not dependency properties. Unfortunately there is no way to animate a property that is not a dependency property with a DoubleAnimation.

In the example you provided the animation is based on PathFigure Segment (that have dependency properties) and not a System.Windows.Point.

I would try to avoid using the PolyLineSegement in your Path if you want to animate those.

Answer 2

You could animate the point collection like this:

      <Canvas Background="Tan" Width="100" Height="300" Margin="5,0,0,0">
        <Path Stroke="RosyBrown" StrokeThickness="4" >
          <Path.Data>
            <PathGeometry>
              <PathGeometry.Figures>
                <PathFigure StartPoint="5,50">
                  <PolyLineSegment x:Name="PLS" ></PolyLineSegment>
                </PathFigure>
              </PathGeometry.Figures>
            </PathGeometry>
          </Path.Data>
        </Path>
        <Canvas.Triggers>
          <EventTrigger RoutedEvent="Canvas.Loaded" >
            <BeginStoryboard>
              <Storyboard x:Name="sbPathUpDown" BeginTime="0:0:0">
                <ObjectAnimationUsingKeyFrames x:Name="objAni"
                                  Duration="0:0:2"
                                 AutoReverse="True"  RepeatBehavior="Forever"
                                  Storyboard.TargetName="PLS"
                                  Storyboard.TargetProperty="Points"  >
                  <DiscreteObjectKeyFrame Value="10,50 90,50" KeyTime="0:0:0.05"></DiscreteObjectKeyFrame>
                  <DiscreteObjectKeyFrame Value="10,60 90,50" KeyTime="0:0:0.5"></DiscreteObjectKeyFrame>
                  <DiscreteObjectKeyFrame Value="10,70 105,50" KeyTime="0:0:0.9"></DiscreteObjectKeyFrame>
                  <DiscreteObjectKeyFrame Value="10,60 100,40" KeyTime="0:0:1.2"></DiscreteObjectKeyFrame>
                  <DiscreteObjectKeyFrame Value="10,50 100,50" KeyTime="0:0:1.5"></DiscreteObjectKeyFrame>
                  <DiscreteObjectKeyFrame Value="10,60 90,50" KeyTime="0:0:1.7" ></DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>
        </Canvas.Triggers>
      </Canvas>

(animates some linepoints - looks bad but illustrates the point :o)

And if you want to compute the points and get it more smooth etc. you can fill it up in code:

  objAni.KeyFrames.Clear();
  double offsetx = 10.0; double offsety = 50;
  double w = 40; double h = 40;
  for (int i = 0; i < 20; i++)
  {
    var scale = i * 0.1;
    var ww = w * scale;
    var hh = h * scale;
    var pts = new PointCollection();
    pts.Add(new Point(offsetx, offsety));
    pts.Add(new Point(offsetx + ww, offsety));
    pts.Add(new Point(offsetx + ww, offsety + hh));
    pts.Add(new Point(offsetx, offsety + hh));
    pts.Add(new Point(offsetx, offsety));

    objAni.KeyFrames.Add(new DiscreteObjectKeyFrame { Value = pts, KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(i / 10.0)) });
  }

Draws a box that changes size - you could add any points to it and get the effect you want more or less.