WPF: Comment mettre un objet / forme à la fin d'un chemin de ligne / course?

Question

Je veux juste demander s'il y a un moyen où je pourrais mettre un objet (cercle) à la fin d'une ligne de chemin particulier.

Tout comme ceci:

--------------------------------------------O 
Start                                      End

En ce moment, je le code suivant pour tracer la ligne:

<Grid x:Name="LayoutRoot" >
  <Path Stroke="Red"  StrokeThickness="4"  x:Name="path4" Data="{Binding MyProperty1}"  >
    <Path.StrokeDashArray>
      <System:Double>500</System:Double>
      <System:Double>1000</System:Double>
    </Path.StrokeDashArray>
  </Path>
</Grid>

où les données de mon chemin (par exemple M532,668 L523,695 361663 101678 117638) varie.

mon animation ressemble à ...

<Storyboard x:Key="Story1" RepeatBehavior="Forever">
  <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                 Storyboard.TargetName="path1"
                                 Storyboard.TargetProperty="(Shape.StrokeDashOffset)">
    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="500"/>
    <SplineDoubleKeyFrame KeyTime="00:00:08" Value="0"/>
  </DoubleAnimationUsingKeyFrames>
</Storyboard>

Toutes les suggestions?

Answer 1

Il y a au moins deux façons dont vous pouvez le faire; qui est le mieux dépend probablement de la relation du cercle à la ligne.

Si le cercle est conceptuellement partie de la même forme que la ligne, modifiez votre chemin d'inclure une ellipse (arc) à la fin de la ligne. Cela pourrait se faire en changeant le chemin de données, soit en ajoutant un cercle à la fin ou en ajoutant une autre figure au PathGeometry.

Si le cercle est une composante distincte sur le plan conceptuel, et vous voulez juste placer ce composant à côté de la ligne, vous pouvez simplement utiliser un StackPanel avec son orientation définie à l'horizontale:

<StackPanel Orientation="Horizontal">
  <Path />  <!-- The line -->
  <Ellipse />  <!-- The circle -->
</StackPanel>

(Remarque: dans certains scénarios, vous pouvez le faire en utilisant la propriété EndLineCap Cela ne marchera pas dans ce cas, mais parce qu'il semble que vous voulez que le cercle soit plus grand que l'épaisseur de la course Les fins de ligne sont toujours les mêmes.. épaisseur que la ligne).