Everything you need to know about WPF Storyboard


Isn't it fun,

to instantly listen to a blog on the go? PLAY !

 
 

wpf_storyboard

Table of Content

What is 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.

What is the use of Storyboard?

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.

How to Apply Animation with a Storyboard?

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.

Storyboard Fields

  1. TargetProperty: The use of this field just identifies the Target of the storyboard attached property.
  2. TargetNameProperty: The use of this field just identifies the TargetName of the storyboard attached property
  3. TargetPropertyProperty: Usage of this field just identifies the TargetProperty of the storyboard attached property.

Storyboard Events

  1. Changed: An Event can occur when the Freezable or an object it contains is modified.
  2. Completed: An Event can occur when the timeline has finished playing: it will no longer enter its active period.
  3. CurrentTimeInvalidated: When the timeline’s clock is updated on the storyboard for CurrentTime property that time event can occur.

Storyboard Properties

  1. BeginTime: Get or set the time at which this Timeline begins.
  2. Duration: Get or set the length of the time for which this element plays, not counting repetitions.
  3. IsFrozen: Get a value that indicates whether the object is currently modifiable.
  4. IsSealed: Get a value that indicates whether this instance is currently sealed.
  5. Name: Get or set the name of a Timeline.
  6. SpeedRatio: Get or set the rate, relative to its parent, at which time progress for this Timeline.

Storyboard Attached Properties

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.

   

How Storyboard can work?

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.
 


<grid background="black">
<rectangle fill="Red" height="100" width="70" x:name="rectanimate" />
</grid>

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.
 

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

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);
 }

main-window.png

Image: Double Animation Output Screen

Here we can see a storyboard example using code-behind now we can see one more storyboard example using XAML.

Control a Storyboard in XAML

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.

  1. etStoryboardSpeedRatio: To change the speed of the storyboard animation.
  2. PauseStoryboard: To pause the storyboard animation.
  3. ResumeStoryboard: To resume the paused storyboard animation.
  4. StopStoryboard: To stop the storyboard animation.
  5. RemoveStoryboard: To remove the storyboard animation.

<stackpanel>
      <rectangle fill="Red" height="150" name="Rect" width="150">
       </rectangle><button name="Begin">Begin</button><button name="Pause">Pause</button><button name="Resume">Resume</button><button name="SkipToFill">Skip To Fill</button><button name="Stop">Stop</button>

                <stackpanel.triggers>
                    <eventtrigger routedevent="Button.Click" sourcename="Begin">
                        <beginstoryboard name="BeginStory">
                            <storyboard>
                                <doubleanimation duration="0:0:5" from="1.0" storyboard.targetname="Rect" storyboard.targetproperty="(Rectangle.Opacity)" to="0.0" />
                            </storyboard>
                        </beginstoryboard>
                    </eventtrigger>
                    <eventtrigger routedevent="Button.Click" sourcename="Pause">
                        <pausestoryboard beginstoryboardname="BeginStory" />
                    </eventtrigger>
                    <eventtrigger routedevent="Button.Click" sourcename="Resume">
                        <resumestoryboard beginstoryboardname="BeginStory" />
                    </eventtrigger>
                    <eventtrigger routedevent="Button.Click" sourcename="SkipToFill">
                        <skipstoryboardtofill beginstoryboardname="BeginStory" />
                    </eventtrigger>
                    <eventtrigger routedevent="Button.Click" sourcename="Stop">
                        <stopstoryboard beginstoryboardname="BeginStory" />
                    </eventtrigger>
                </stackpanel.triggers>
            </stackpanel>

 

One Stop Solution for WPF Application Development

Your Search ends here.

 


Now, create one project in this project we can implement a storyboard using both XAML and code-behind.

XAML
 


<stackpanel>
        <rectangle height="100" name="Animrect" width="100">
            <rectangle.fill>
                <solidcolorbrush color="Blue" x:name="SolidColor" />
            </rectangle.fill>
            <rectangle.triggers>
                <eventtrigger routedevent="Rectangle.MouseEnter">
                    <beginstoryboard>
                        <storyboard>
                            <doubleanimation duration="0:0:1" from="100" storyboard.targetname="Animrect" storyboard.targetproperty="Width" to="200" />
                          <coloranimation duration="0:0:1" from="Blue" storyboard.targetname="SolidColor" storyboard.targetproperty="Color" to="Red" />
                        </storyboard>
                    </beginstoryboard>
                </eventtrigger>
            </rectangle.triggers>
        </rectangle>
</stackpanel>

.CS
 

using System.Windows.Media.Animation;
public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.Title = "Storyboard Animation";
            StackPanel SP = new StackPanel();
            SP.Margin = new Thickness(20);
            Rectangle Rect = new Rectangle();
            Rect.Name = "Animrect";
            NameScope.SetNameScope(this, new NameScope());
            this.RegisterName(Rect.Name, Rect);
            Rect.Width = 150;
            Rect.Height = 150;
            SolidColorBrush SolidColor = new SolidColorBrush(Colors.Red);
            this.RegisterName("SolidColor", SolidColor);
            Rect.Fill = SolidColor;

            DoubleAnimation DoubleAnim = new DoubleAnimation();
            DoubleAnim.From = 100;
            DoubleAnim.To = 200;
            DoubleAnim.Duration = new Duration(TimeSpan.FromSeconds(1));
            Storyboard.SetTargetName(DoubleAnim, Rect.Name);
            Storyboard.SetTargetProperty(DoubleAnim,
                new PropertyPath(Rectangle.WidthProperty));
            ColorAnimation ColorAnim = new ColorAnimation();
            ColorAnim.From = Colors.Blue;
            ColorAnim.To = Colors.Red;
            ColorAnim.Duration = new Duration(TimeSpan.FromSeconds(1));
            Storyboard.SetTargetName(ColorAnim, "SolidColor");
            Storyboard.SetTargetProperty(ColorAnim,
                new PropertyPath(SolidColorBrush.ColorProperty));
            Storyboard Storyb = new Storyboard();
            Storyb.Children.Add(DoubleAnim);
            Storyb.Children.Add(ColorAnim);

            Rect.MouseEnter += delegate (object sender, MouseEventArgs e)
            {
                Storyb.Begin(this);
            };
            SP.Children.Add(Rect);
            this.Content = SP;
        }
    }

story-board 

Image: Animation screen while hovering mouse (Before) 
 

strory-board1 

Image: Animation screen while hovering mouse (After)


In this example we can add mouse enter event when you enter the mouse in the width of the rectangle then you can see the animation of the rectangle.

EventTrigger can apply a set of action when the specified routed event occurs. You may want to use EventTriggers to start a set of animations when the mouse pointer is over a rectangle control.

Conclusion

WPF manages all the behind-the-scenes work of handling a timing. The Storyboard can be used for all sorts of animations, not certainly just control movement. Scaling, rotation and skewing are also convenient.

wpf_storyboard

Table of Content

What is 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.

What is the use of Storyboard?

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.

How to Apply Animation with a Storyboard?

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.

Storyboard Fields

  1. TargetProperty: The use of this field just identifies the Target of the storyboard attached property.
  2. TargetNameProperty: The use of this field just identifies the TargetName of the storyboard attached property
  3. TargetPropertyProperty: Usage of this field just identifies the TargetProperty of the storyboard attached property.

Storyboard Events

  1. Changed: An Event can occur when the Freezable or an object it contains is modified.
  2. Completed: An Event can occur when the timeline has finished playing: it will no longer enter its active period.
  3. CurrentTimeInvalidated: When the timeline’s clock is updated on the storyboard for CurrentTime property that time event can occur.

Storyboard Properties

  1. BeginTime: Get or set the time at which this Timeline begins.
  2. Duration: Get or set the length of the time for which this element plays, not counting repetitions.
  3. IsFrozen: Get a value that indicates whether the object is currently modifiable.
  4. IsSealed: Get a value that indicates whether this instance is currently sealed.
  5. Name: Get or set the name of a Timeline.
  6. SpeedRatio: Get or set the rate, relative to its parent, at which time progress for this Timeline.

Storyboard Attached Properties

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.

   

How Storyboard can work?

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.
 


<grid background="black">
<rectangle fill="Red" height="100" width="70" x:name="rectanimate" />
</grid>

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.
 

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

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);
 }

main-window.png

Image: Double Animation Output Screen

Here we can see a storyboard example using code-behind now we can see one more storyboard example using XAML.

Control a Storyboard in XAML

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.

  1. etStoryboardSpeedRatio: To change the speed of the storyboard animation.
  2. PauseStoryboard: To pause the storyboard animation.
  3. ResumeStoryboard: To resume the paused storyboard animation.
  4. StopStoryboard: To stop the storyboard animation.
  5. RemoveStoryboard: To remove the storyboard animation.

<stackpanel>
      <rectangle fill="Red" height="150" name="Rect" width="150">
       </rectangle><button name="Begin">Begin</button><button name="Pause">Pause</button><button name="Resume">Resume</button><button name="SkipToFill">Skip To Fill</button><button name="Stop">Stop</button>

                <stackpanel.triggers>
                    <eventtrigger routedevent="Button.Click" sourcename="Begin">
                        <beginstoryboard name="BeginStory">
                            <storyboard>
                                <doubleanimation duration="0:0:5" from="1.0" storyboard.targetname="Rect" storyboard.targetproperty="(Rectangle.Opacity)" to="0.0" />
                            </storyboard>
                        </beginstoryboard>
                    </eventtrigger>
                    <eventtrigger routedevent="Button.Click" sourcename="Pause">
                        <pausestoryboard beginstoryboardname="BeginStory" />
                    </eventtrigger>
                    <eventtrigger routedevent="Button.Click" sourcename="Resume">
                        <resumestoryboard beginstoryboardname="BeginStory" />
                    </eventtrigger>
                    <eventtrigger routedevent="Button.Click" sourcename="SkipToFill">
                        <skipstoryboardtofill beginstoryboardname="BeginStory" />
                    </eventtrigger>
                    <eventtrigger routedevent="Button.Click" sourcename="Stop">
                        <stopstoryboard beginstoryboardname="BeginStory" />
                    </eventtrigger>
                </stackpanel.triggers>
            </stackpanel>

 

One Stop Solution for WPF Application Development

Your Search ends here.

 


Now, create one project in this project we can implement a storyboard using both XAML and code-behind.

XAML
 


<stackpanel>
        <rectangle height="100" name="Animrect" width="100">
            <rectangle.fill>
                <solidcolorbrush color="Blue" x:name="SolidColor" />
            </rectangle.fill>
            <rectangle.triggers>
                <eventtrigger routedevent="Rectangle.MouseEnter">
                    <beginstoryboard>
                        <storyboard>
                            <doubleanimation duration="0:0:1" from="100" storyboard.targetname="Animrect" storyboard.targetproperty="Width" to="200" />
                          <coloranimation duration="0:0:1" from="Blue" storyboard.targetname="SolidColor" storyboard.targetproperty="Color" to="Red" />
                        </storyboard>
                    </beginstoryboard>
                </eventtrigger>
            </rectangle.triggers>
        </rectangle>
</stackpanel>

.CS
 

using System.Windows.Media.Animation;
public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.Title = "Storyboard Animation";
            StackPanel SP = new StackPanel();
            SP.Margin = new Thickness(20);
            Rectangle Rect = new Rectangle();
            Rect.Name = "Animrect";
            NameScope.SetNameScope(this, new NameScope());
            this.RegisterName(Rect.Name, Rect);
            Rect.Width = 150;
            Rect.Height = 150;
            SolidColorBrush SolidColor = new SolidColorBrush(Colors.Red);
            this.RegisterName("SolidColor", SolidColor);
            Rect.Fill = SolidColor;

            DoubleAnimation DoubleAnim = new DoubleAnimation();
            DoubleAnim.From = 100;
            DoubleAnim.To = 200;
            DoubleAnim.Duration = new Duration(TimeSpan.FromSeconds(1));
            Storyboard.SetTargetName(DoubleAnim, Rect.Name);
            Storyboard.SetTargetProperty(DoubleAnim,
                new PropertyPath(Rectangle.WidthProperty));
            ColorAnimation ColorAnim = new ColorAnimation();
            ColorAnim.From = Colors.Blue;
            ColorAnim.To = Colors.Red;
            ColorAnim.Duration = new Duration(TimeSpan.FromSeconds(1));
            Storyboard.SetTargetName(ColorAnim, "SolidColor");
            Storyboard.SetTargetProperty(ColorAnim,
                new PropertyPath(SolidColorBrush.ColorProperty));
            Storyboard Storyb = new Storyboard();
            Storyb.Children.Add(DoubleAnim);
            Storyb.Children.Add(ColorAnim);

            Rect.MouseEnter += delegate (object sender, MouseEventArgs e)
            {
                Storyb.Begin(this);
            };
            SP.Children.Add(Rect);
            this.Content = SP;
        }
    }

story-board 

Image: Animation screen while hovering mouse (Before) 
 

strory-board1 

Image: Animation screen while hovering mouse (After)


In this example we can add mouse enter event when you enter the mouse in the width of the rectangle then you can see the animation of the rectangle.

EventTrigger can apply a set of action when the specified routed event occurs. You may want to use EventTriggers to start a set of animations when the mouse pointer is over a rectangle control.

Conclusion

WPF manages all the behind-the-scenes work of handling a timing. The Storyboard can be used for all sorts of animations, not certainly just control movement. Scaling, rotation and skewing are also convenient.