title: WPF XAML Move/reposition a point in a Path using Storyboard
body: <p>So I have a project where I am making a list of items that can be expanded to reveal additional information. So far I have come up with a way to rotate the angles 180 degrees to indicate if the information panel is open or closed, but I feel it looks a little bit artificial.
  <a href="http://g.recordit.co/NAd1IUq200.gif" rel="nofollow noreferrer">Gif demonstration here.</a> Ideally, I would like my angle (&lt;) to morph into pointing the opposite way. So let's say the coordinates are -5,0 0,5 and 5,0 (Red) I would like to animate them going to -5,5 0,0 and 5,5 (Blue).
  <a href="https://i.stack.imgur.com/PdZVN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PdZVN.png" alt="enter image description here"></a></p>
  
  <p>I have been googling about this for a while, using keywords like animation / path / morph / storyboard. My theory now is that there could be a way where you could name each point in the Path data individually and add styles to them where they will move positions based on a common data trigger. Currently, it's all connected like shown below, and it's all linked up to a style that is attached to the Path. I would prefer to do all of this in XAML, so any help is appreciated. </p>
  
  <pre><code>&lt;DataTrigger Binding="{Binding RevealAdditionalInformation}" Value="False"&gt;
    &lt;DataTrigger.EnterActions&gt;
      &lt;StopStoryboard BeginStoryboardName="ArrowPointUp"/&gt;
      &lt;BeginStoryboard Name="ArrowPointDown"&gt;
        &lt;Storyboard&gt;
          &lt;DoubleAnimation Storyboard.TargetProperty="(LayoutTransform).(RotateTransform.Angle)" From="180" To="0" Duration="0:0:0.6"/&gt;
        &lt;/Storyboard&gt;
      &lt;/BeginStoryboard&gt;
    &lt;/DataTrigger.EnterActions&gt;
  &lt;/DataTrigger&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>Update</strong>:</p>
  
  <p>I've been trying to find a new way to draw up my Path rather than just 
  <code>&lt;Path Data="m 0 0 5 5 5 -5"&gt;</code>. So now I have the same shape written in a different way.  Perhaps this would be easier to manipulate each point separately. What's problematic here is that I am not allowed to name any of these points with <code>Name="Something"</code>, so they will be hard to access.</p>
  
  <pre><code>&lt;Path Stroke="Black" StrokeThickness="1" Grid.Column="1"&gt;
    &lt;Path.Data&gt;
      &lt;PathGeometry&gt;
        &lt;PathGeometry.Figures&gt;
          &lt;PathFigureCollection&gt;
            &lt;PathFigure IsClosed="False" StartPoint="0,0"&gt;
              &lt;PathFigure.Segments&gt;
                &lt;PathSegmentCollection&gt;
                  &lt;LineSegment Point="5,5" /&gt;
                    &lt;LineSegment Point="10,0" /&gt;
                  &lt;/PathSegmentCollection&gt;
                &lt;/PathFigure.Segments&gt;
              &lt;/PathFigure&gt;
            &lt;/PathFigureCollection&gt;
          &lt;/PathGeometry.Figures&gt;
        &lt;/PathGeometry&gt;
      &lt;/Path.Data&gt;
    &lt;/Path&gt;
  </code></pre>
  
  <p><strong>Update 2</strong>:</p>
  
  <pre><code>&lt;DataTrigger Binding="{Binding RevealAdditionalInformation}" Value="True"&gt;
    &lt;DataTrigger.EnterActions&gt;
      &lt;BeginStoryboard Name="AnimateTrue"&gt;
        &lt;Storyboard&gt;
          &lt;PointAnimationUsingPath Duration="0:0:0.5" Storyboard.TargetProperty="Figures"&gt;
            &lt;PointAnimationUsingPath.PathGeometry&gt;
              &lt;PathGeometry Figures="m -5 0 0 5 5 0"/&gt;
            &lt;/PointAnimationUsingPath.PathGeometry&gt;
          &lt;/PointAnimationUsingPath&gt;
        &lt;/Storyboard&gt;
      &lt;/BeginStoryboard&gt;
    &lt;/DataTrigger.EnterActions&gt;
  &lt;/DataTrigger&gt;
  </code></pre>
  
  <p>This is another take I've been experimenting with, the problem here seems to be The Storyboard.Target property, not perhaps a different sort of Animation is needed. The path I am experimenting with this on is this, where <code>FiguresTest</code> is the Style that uses the above Data Trigger.</p>
  
  <pre><code>&lt;Path x:Name="_testPath" Stroke="Black" StrokeThickness="1" Style="{StaticResource FiguresTest}"&gt;
    &lt;Path.Data&gt;
      &lt;PathGeometry Figures="m -5 5 0 0 5 5"/&gt;
    &lt;/Path.Data&gt;
  &lt;/Path&gt;
  </code></pre>