Draw line using storyboard animation windows phone

Question

I have a line in windows phone runtime app.

<Line x:Name="Line1" Height="178" Width="166" Stretch="Fill" StrokeDashArray="4,4" StrokeThickness="1" Stroke="Black" X1="100" Y1="150" X2="105" Y2="108" RenderTransformOrigin="0.5,0.5">

I want to animate this line so that its length will start increasing from (X1,Y1) and will increase till (X2,Y2), to have a line drawing effect.

PS: I am using Line not Path.

Here is what I have done:

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Line1" Storyboard.TargetProperty="X2" EnableDependentAnimation="True">
                            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="101" />
                            <EasingDoubleKeyFrame KeyTime="0:0:2.5" Value="102" />
                            <EasingDoubleKeyFrame KeyTime="0:0:4" Value="103" />
                            <EasingDoubleKeyFrame KeyTime="0:0:5" Value="104" />
                            <EasingDoubleKeyFrame KeyTime="0:0:8" Value="105" />
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Line1" Storyboard.TargetProperty="Y2" EnableDependentAnimation="True">
                            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="120" />
                            <EasingDoubleKeyFrame KeyTime="0:0:4" Value="110" />
                            <EasingDoubleKeyFrame KeyTime="0:1:0" Value="108" />
                        </DoubleAnimationUsingKeyFrames>

Also Have tried ScaleTransform but does not meet my expectations.

Any solution to this will be really appreciated.

Answer 1

I would put a RectangleGeometry Clip region on the Line, apply a Transform to the geometry, set the rotation on the transform to correspond to the line orientation, the Rect on the geometry to correspond to line length/thickness and animate the scale of the Transform from 0 to 1.

The should get you a line that doesn't move while it's drawing and a smooth animation.