WPF Timelines in VB.NET
In this article you will learn about the Timelines in WPF.
A timeline represents a stretch of time. It usually also describes one or more things that happen during that time. All timeline types derive from the Timeline base class, which defines various common properties. Each timeline is a time series of data points which quickly convey historical events, steps in the narrative of a business process or workflow, project milestones, key frames in a video, or any sequence of occurrences. Complete control template support allows you to design timelines that have both compelling styling and rich interactivity.
Properties of Timeline:
| Property |
Usage |
| AccelerationRatio |
Causes the timeline to ramp up to speed at the start |
| AutoReverse |
Makes the timeline run in reverse once it reaches the end |
| BeginTime |
Start time, relative to parent |
| DecelerationRatio |
Causes the timeline to slow down toward the end |
| SpeedRatio |
The speed at which this timeline runs relative to its parent's speed |
| RepeatBehavior |
Indicates whether the timeline repeats |
| Name |
An optional name |
| FillBehavior |
How the timeline behaves when it reaches its natural end |
| Duration |
The length of the timeline |
Example of Timeline
<Window x:Class="WpfApplication21.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<StackPanel Orientation="Vertical" VerticalAlignment="Center">
<StackPanel.Triggers>
<EventTrigger RoutedEvent="StackPanel.Loaded">
<BeginStoryboard>
<Storyboard>
<ParallelTimeline RepeatBehavior="Forever">
<DoubleAnimation BeginTime="0:0:0" Duration="0:0:0.2"
Storyboard.TargetName="button1"
Storyboard.TargetProperty="(Button.Height)"By="30" AutoReverse="True" />
<DoubleAnimation BeginTime="0:0:1" Duration="0:0:0.2"
Storyboard.TargetName="button2"
Storyboard.TargetProperty="(Button.Height)"
By="30" AutoReverse="True" />
<ParallelTimeline BeginTime="0:0:2">
<DoubleAnimation BeginTime="0:0:0" Duration="0:0:0.2"
Storyboard.TargetName="button3"
Storyboard.TargetProperty="(Button.Height)"
By="30" AutoReverse="True" />
<DoubleAnimation BeginTime="0:0:1" Duration="0:0:0.2"
Storyboard.TargetName="button4"
Storyboard.TargetProperty="(Button.Height)"
By="30" AutoReverse="True" />
<ParallelTimeline BeginTime="0:0:2">
<DoubleAnimation BeginTime="0:0:0" Duration="0:0:0.2"
Storyboard.TargetName="button5"
Storyboard.TargetProperty="(Button.Height)"
By="30" AutoReverse="True" />
</ParallelTimeline>
</ParallelTimeline>
</ParallelTimeline>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</StackPanel.Triggers>
<Button Name="button1" Height="25">Rahul</Button>
<Button Name="button2" Height="25">Sam</Button>
<Button Name="button3" Height="25">Ramesh</Button>
<Button Name="button4" Height="25">Praveen</Button>
<Button Name="button5" Height="25">Manish</Button>
</StackPanel>
</Window>
Output Window
Conclusion
Hope this article would have helped you in understanding Timeline in WPF.