WPF XAML Move/reposition a point in a Path using Storyboard - wpf

Question

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.
Gif demonstration here. Ideally, I would like my angle (<) 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).
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.
<DataTrigger Binding="{Binding RevealAdditionalInformation}" Value="False">
<DataTrigger.EnterActions>
<StopStoryboard BeginStoryboardName="ArrowPointUp"/>
<BeginStoryboard Name="ArrowPointDown">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(LayoutTransform).(RotateTransform.Angle)" From="180" To="0" Duration="0:0:0.6"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
Update:
I've been trying to find a new way to draw up my Path rather than just
<Path Data="m 0 0 5 5 5 -5">. 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 Name="Something", so they will be hard to access.
<Path Stroke="Black" StrokeThickness="1" Grid.Column="1">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure IsClosed="False" StartPoint="0,0">
<PathFigure.Segments>
<PathSegmentCollection>
<LineSegment Point="5,5" />
<LineSegment Point="10,0" />
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
Update 2:
<DataTrigger Binding="{Binding RevealAdditionalInformation}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Name="AnimateTrue">
<Storyboard>
<PointAnimationUsingPath Duration="0:0:0.5" Storyboard.TargetProperty="Figures">
<PointAnimationUsingPath.PathGeometry>
<PathGeometry Figures="m -5 0 0 5 5 0"/>
</PointAnimationUsingPath.PathGeometry>
</PointAnimationUsingPath>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
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 FiguresTest is the Style that uses the above Data Trigger.
<Path x:Name="_testPath" Stroke="Black" StrokeThickness="1" Style="{StaticResource FiguresTest}">
<Path.Data>
<PathGeometry Figures="m -5 5 0 0 5 5"/>
</Path.Data>
</Path>

Answer 1

You can animate individual points on the Path. In order to do that, you need to define your Path in a manner in which each point you want to animate is a property of a named element. This of course results in more verbose definition, but gets you what you're after. For example:
<Path Stroke="Black" StrokeThickness="1">
<Path.Data>
<PathGeometry>
<PathFigure x:Name="Figure" StartPoint="-5,5">
<LineSegment x:Name="Line1" Point="0,0" />
<LineSegment x:Name="Line2" Point="5,5" />
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
Then the animation could look like this:
<BeginStoryboard Name="AnimateTrue">
<Storyboard>
<PointAnimation To="-5,0" Duration="0:0:0.5"
Storyboard.TargetName="Figure"
Storyboard.TargetProperty="StartPoint" />
<PointAnimation To="0,5" Duration="0:0:0.5"
Storyboard.TargetName="Line1"
Storyboard.TargetProperty="Point" />
<PointAnimation To="5,0" Duration="0:0:0.5"
Storyboard.TargetName="Line2"
Storyboard.TargetProperty="Point" />
</Storyboard>
</BeginStoryboard>
EDIT
Since you're struggling with getting things working, below is an example in which the Path is part of ToggleButton template. It seems to be a good choice given it will be used to toggle expansion state.
<ToggleButton>
<ToggleButton.Template>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<ControlTemplate.Resources>
<Duration x:Key="AnimationDuration">0:0:0.2</Duration>
</ControlTemplate.Resources>
<Border Background="Transparent">
<Path Stroke="Black" StrokeThickness="1" Width="10" Height="5">
<Path.Data>
<PathGeometry>
<PathFigure x:Name="Figure" StartPoint="0,0">
<LineSegment x:Name="Line1" Point="5,5" />
<LineSegment x:Name="Line2" Point="10,0" />
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Name="ToggleOn">
<Storyboard>
<PointAnimation To="0,5" Duration="{StaticResource AnimationDuration}"
Storyboard.TargetName="Figure"
Storyboard.TargetProperty="StartPoint" />
<PointAnimation To="5,0" Duration="{StaticResource AnimationDuration}"
Storyboard.TargetName="Line1"
Storyboard.TargetProperty="Point" />
<PointAnimation To="10,5" Duration="{StaticResource AnimationDuration}"
Storyboard.TargetName="Line2"
Storyboard.TargetProperty="Point" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Name="ToggleOff">
<Storyboard>
<PointAnimation Duration="{StaticResource AnimationDuration}"
Storyboard.TargetName="Figure"
Storyboard.TargetProperty="StartPoint" />
<PointAnimation Duration="{StaticResource AnimationDuration}"
Storyboard.TargetName="Line1"
Storyboard.TargetProperty="Point" />
<PointAnimation Duration="{StaticResource AnimationDuration}"
Storyboard.TargetName="Line2"
Storyboard.TargetProperty="Point" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
Note that the animations are triggered only by ToggleButton.IsChecked property (as opposed to data triggers bound to view-model properties), so this control is potentially reusable (I suggest you move the template to a style first though). The only thing to do is to properly bind the ToggleButton.IsChecked property.