WynApse Home Page
Home    Blog    About    Contact       
Latest Article:


My Tags:
My Sponsors:







Lifetime Member:

Basic Silverlight Straight-Line Animation




Animating a line takes a little more consideration than animating an ellipse.

Taking the single-ellipse animation and transferring it to a line, we see the black horizontal line above, but that's not quite what we wanted.

If we examine the xaml:

The Storyboard.TargetProperty="(Canvas.Left)" coupled with the To="100" gets the line to animate, but it animates from the TargetProperty, which is "(Canvas.Left)". While it is an interesting effect, my first intent was to have the line progress down the screen.

There are two major Storyboard.TargetProperty's defined, and those are "(Canvas.Left)" and "(Canvas.Top)". In this situation, what we really want is "(Canvas.Top)".

The red line in the animation has it's target as "(Canvas.Top)", and as you can see, it is moving down the canvas as expected.

Adding a third line to the animation, vertical this time, the blue line is added to the Storyboard beneath the second horizontal line, but there's no TargetProperty listed. In this case, the TargetProperty reverts back to that of the Storyboard which is "(Canvas.Left)", and the line moves left-to-right as expected.

You can easily see that the only addition to the Storyboard is another DoubleAnimation entry, with a Storyboard.TargetName pointing to ellipse2, as described above.

And once again, while reformatting for Beta 1, I added RepeatBeavior="Forever" to the Storyboard.

XAML for producing this page:

<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard x:Name="animation"
Storyboard.TargetName="Horizontal1"
Storyboard.TargetProperty="(Canvas.Left)" RepeatBehavior="Forever">
<DoubleAnimation To="100" Duration="0:0:10" />
<DoubleAnimation Storyboard.TargetName="Horizontal2" Storyboard.TargetProperty="(Canvas.Top)" To="99" Duration="0:0:10" />
<DoubleAnimation Storyboard.TargetName="Vertical" To="299" Duration="0:0:10" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Canvas.Triggers>

<Line x:Name="Horizontal1" X1="1" Y1="1" X2="300" Y2="1" Stroke="#000000" StrokeThickness="1"/>
<Line x:Name="Horizontal2" X1="1" Y1="1" X2="300" Y2="1" Stroke="#CC0000" StrokeThickness="1"/>
<Line x:Name="Vertical" X1="1" Y1="1" X2="1" Y2="100" Stroke="#0000CC" StrokeThickness="1"/>

</Canvas>




Microsoft MVP

Member of WPF and Silverlight Insiders
Silverlight Control
Creative Commons License

Copyright © 2006-2014, WynApse