CODEWITHSUNDEEP
c#.netwpfpathdrawing
vdh_ant
vdh_ant

Reputation: 13156

WPF Drawing arrow heads along a path

Just wondering how I might go about drawing arrow heads along a path. The path will change direction and go through several different points. The arrow heads are designed to show the user which direction along the path they need to travel.

I've tried to use a brush but it didn't work as I need the arrow heads to orientate them selfs along the path...

Upvotes: 4

Views: 9263

Answers (1)

Bubblewrap
Bubblewrap

Reputation: 7516

See Path Animations Overview and MatrixAnimationUsingPath

It can be used to move a control along a PathGeometry and if you set DoesRotateWithTangent the control will also rotate along the direction of the path.

EDIT1:

<Page.Resources>
    <PathGeometry x:Key="Path" x:Shared="False" Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100"/>
</Page.Resources>
<Canvas Width="400" Height="400">
    <Path Data="{StaticResource Path}" Stroke="Blue" StrokeThickness="1"/>
    <Path
        x:Name="Arrow1"
        Stretch="Fill"
        Width="16" Height="16" StrokeLineJoin="Miter"
        Data="M 0 -5 L 10 -5 M 5 0 L 10 -5 L 5 -10" 
        Stroke="Black" StrokeThickness="3">
        <Path.RenderTransform>
            <TransformGroup>
                <TranslateTransform X="-8" Y="-8"/>
                <MatrixTransform>
                    <MatrixTransform.Matrix>
                        <Matrix/>
                    </MatrixTransform.Matrix>
                </MatrixTransform>
            </TransformGroup>
        </Path.RenderTransform>
        <Path.Triggers>
            <EventTrigger RoutedEvent="Path.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <MatrixAnimationUsingPath
                            Storyboard.TargetName="Arrow1"
                            Storyboard.TargetProperty="RenderTransform.Children[1].Matrix"                                
                            DoesRotateWithTangent="True"
                            Duration="0:0:5" 
                            BeginTime="0:0:0"
                            RepeatBehavior="Forever" PathGeometry="{StaticResource Path}" >                               
                        </MatrixAnimationUsingPath>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Path.Triggers>
    </Path>
</Canvas>

EDIT2: Calculating how many arrows you need

I assume you're creating a custom control and are programmatically adding arrows? If so i think the simplest way would be to specify a Duration for a single loop and a BeginTimeGap, the time between the BeginTimes of subsequent arrows. The number of arrows you have to add would be Duration/BeginTimeGap, or in simplified code:

while (BeginTime < Duration) 
{ 
    //add arrow with BeginTime and Duration; 
    BeginTime += BeginTimeGap; 
}

Getting the right speed and spacing between arrows would come down to tweaking these two values.

Upvotes: 5

Related Questions