Question

I just wanna ask if there’s a way where I could put an object (circle) at the end of a particular line path.

Similar to this:

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

Right now, I have the following code for tracing the line:

<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>

where the data of my path (e.g. M532,668 L523,695 361,663 101,678 117,638) varies.

my animation looks like this…

<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>

Any suggestions?

Answer 1

There are at least a couple of ways you could do this; which is best probably depends on the relationship of the circle to the line.

If the circle is conceptually part of the same shape as the line, change your Path to include an ellipse (arc) at the end of the line. This could be done by changing the path Data, either by adding a circle to the end or by adding another Figure to the PathGeometry.

If the circle is conceptually a separate component, and you just want to place that component next to the line, you can just use a StackPanel with its Orientation set to Horizontal:

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

(Note: in some scenarios, you can do this using the EndLineCap property. That won’t work in this case though because it looks like you want the circle to be bigger than the stroke thickness. Line caps are always the same thickness as the line.)