WPF Dessiner des flèches le long d'un chemin

Question

Je me demandais comment je pourrais dessiner des têtes de flèches le long d'un chemin. Le chemin changera de direction et passera par plusieurs points différents. Les têtes de flèches sont conçues pour montrer à l'utilisateur la direction qu'il doit emprunter.

J'ai essayé d'utiliser un pinceau, mais cela n'a pas fonctionné comme je l'ai besoin des têtes de flèches pour les orienter selfs le long du chemin ...

Answer 1

Voir Path Animations Overview et MatrixAnimationUsingPath

Il peut être utilisé pour déplacer un contrôle le long d'un PathGeometry et si vous définissez DoesRotateWithTangent, le contrôle tournera également dans la direction du chemin.

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: Calcul combien de flèches vous avez besoin

Je suppose que vous créez un contrôle personnalisé et ajoutez des flèches programme? Si oui, je pense que le plus simple serait de spécifier une durée pour une seule boucle et un BeginTimeGap, le temps entre les BeginTimes des flèches suivantes. Le nombre de flèches, vous devez ajouter serait Durée/BeginTimeGap, ou dans le code simplifié:

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

Obtenir la bonne vitesse et de l'espacement entre les flèches descendraient pour peaufiner ces deux valeurs.