Question

I thought this task is easy, but I have no clue how to realize it in a smooth way.

I have a two-sided arrow, I built in the following way:

<Line Stroke="#99CCFF" StrokeThickness="8" X1="0" X2="720" Y1="10" Y2="10"/>
<Polygon Stroke="Black" StrokeThickness="2" Points="0,30 40,0 40,60" Canvas.Left="-20" Canvas.Top="-20" Fill="#99CCFF"/>
<Polygon Stroke="Black" StrokeThickness="2" Points="0,0 0,60 40,30" Canvas.Left="720" Canvas.Top="-20" Fill="#99CCFF"/>

Now I would like to animate this arrow:

1. Shift the whole arrow to the left
2. Shrink the arrow, but shrink only the line of the arrow, not the arrow heads

The shift and shrink animation is with RenderTransform, no problem at all. But when shrinking the arrow line, the arrow heads are not attached anymore to the line, at least as long as the animation is executed.

How can I implement a dependency or something similiar in order to let the arrow heads move along with the shrinking line.

Answer 1

to shift the entire arrow just put everything in a canvas and shift the canvas with TranslateTransform.

as to the sizing of the arrow that’s more problematic – it’s obviously not that hard to solve, but i don’t know of a quick solution for this.