Everything you need to know about WPF Storyboard

A Story Board is just a place to stored information about animation. You can also create a storyboard with XAML or code-behind capabilities (C# or VB.NET). In storyboard when the window is loaded animation trigger can start automatically. The BeginStoryboard action was run storyboard. This storyboard use DoubleAnimation.

A Story Board is used to set the duration, timespan, etc. for the shape of the animation. In the storyboard determine what time the frame will occupy the specific position and specific properties.

We know that how different themes can be applied using WPF. Now let us discuss something about applying animation with a Storyboard. To use the storyboard and apply animation you should add the child timeline of the storyboard. The storyboard class can also provide the attached properties like Storyboard.TargetName and Storyboard.TargetProperty. To use these properties on animation to specify their target property and object.

To apply the animation to their target, you can start with the Storyboard using a trigger action or a method. In a XAML you can use the BeginStoryboard object with a Trigger, DataTrigger, and EventTrigger. And in code-behind, you can use the Begin method.

Target: The use of this property is to get or set the object that should be animated.

TargetName: The Usage of this property is to get or set the name of the object to animate.

using System.Windows.Media.Animation;
using System.Windows.Shapes;
 
public MainWindow()
{
    InitializeComponent();
    StoryBoard(250, TimeSpan.FromSeconds(2));
}
				

• 1. First, you have to select the WPF source in a visual studio then after adding the rectangle control in XAML.

• 2. Add their specific name, color, height, and width of the rectangle.

• 3. After that you have to add one method in the .cs file and give it to the specific name in below example StoryBoard is a method name.

• 4. Now just add their parameters, the first parameter is the width of the rectangle and the second parameter is the duration of the animation.

Here we can add DoubleAnimation. When we want to animate a property that takes double values, that time use a DoubleAnimation. TargetName and TargetProperty can specify the object and property to which animation is applied. You can use the DoubleAnimation in your project by using the namespace System.Windows.Media.Animation.

private void StoryBoard(int widthofrect, TimeSpan animationduration)
{
     DoubleAnimation animationrect = new DoubleAnimation(widthofrect,   	animationduration);
     rectanimate.BeginAnimation(Rectangle.WidthProperty,   animationrect);
 }
				

Image: Double Animation Output Screen

If you want to control a storyboard with a XAML you should use the BeginStoryBoard trigger action. BeginStoryBoard distributes the animation to the objects and properties they animate, and start the storyboard. Here following is a list of controllable storyboard actions that you can use with event triggers to control a storyboard.

 
      
       BeginPauseResumeSkip To FillStop