WPF Storyboard: A Complete Guide to Animations in WPF

byKailash Chandra Behera -
0

Animations can make a WPF application feel more interactive, responsive, and visually appealing. Whether you want to fade in a control, move an element across the screen, rotate an image, change a color, or create a smooth transition, WPF provides a powerful animation system for achieving these effects.

One of the key components of the WPF animation system is the Storyboard. A Storyboard acts as a timeline or container that controls one or more animations and determines how and when those animations are executed. It can be used with properties such as Opacity, Width, Height, Angle, and position-related properties to create a wide variety of UI effects.

In this article, we will learn what a WPF Storyboard is, how it works, and how to create animations using XAML. We will start with simple examples and gradually explore more practical scenarios, including fade effects, movement, rotation, resizing, color changes, multiple animations, triggers, and controlling Storyboards from C#.

By the end of this guide, you will have a clear understanding of how Storyboards work and how to use them to create smooth and engaging animations in your WPF applications.

What is WPF Storyboard?

A WPF Storyboard is a mechanism used in Windows Presentation Foundation (WPF) to organize, control, and execute one or more animations. It provides a timeline that defines how an animation should run, including its target property, starting and ending values, duration, and repetition.

A Storyboard itself does not perform the animation directly. Instead, it acts as a container for animation objects, such as DoubleAnimation, ColorAnimation, and PointAnimation.

For example, suppose you want to gradually change a button's opacity from invisible to fully visible. You can use a DoubleAnimation inside a Storyboard:

</> WPF
<Storyboard>
	<DoubleAnimation 
    	Storyboard.TargetName="MyButton" 
        Storyboard.TargetProperty="Opacity"
        From="0"
        To="1"
      	Duration="0:0:2" />
</Storyboard>
In this example:
  • Storyboard contains and controls the animation.
  • DoubleAnimation changes a numeric property over time.
  • TargetName specifies the element to animate.
  • TargetProperty specifies the property being animated.
  • From defines the starting value.
  • To defines the ending value.
  • Duration specifies how long the animation takes.

The major advantage is that multiple animations can be placed inside the same Storyboard and coordinated together. For example, a panel could fade in while simultaneously moving into position and changing its size.

Storyboard vs Animation

Animation defines what changes, while Storyboard controls how those animations are organized and played.

Storyboards can be started through WPF triggers or controlled programmatically from C#. They also provide methods and features for operations such as starting, stopping, pausing, resuming, and repeating animations.

Why Use a Storyboard?

A Storyboard becomes particularly useful when you need to coordinate multiple animations. For example, you could make a panel fade in while moving it from the top of the window. it provides a convenient way to group and control multiple animations as part of a single timeline.

Basic Storyboard example

Let's start with a simple example to understand how a Storyboard works in WPF. In this example, we will animate a button's opacity when the button is loaded. The button will gradually change from invisible to fully visible over two seconds.

</> WPF
<Window x:Class="WpfStoryboardExample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Storyboard Example"
Width="400"
Height="250">
  <Grid>
    <Button x:Name="MyButton"
    Content="Welcome to WPF"
    Width="180"
    Height="50"
    Opacity="0">
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Loaded">
          <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation
                Storyboard.TargetName="MyButton"
                Storyboard.TargetProperty="Opacity"
                From="0"
                To="1"
                Duration="0:0:2" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>
  </Grid>
</Window>

How the Example Works

When the button is loaded, the EventTrigger detects the Loaded event and starts the Storyboard.

The following part starts the Storyboard: 
</> WPF
<BeginStoryboard>
  <Storyboard>
  ...
  </Storyboard>
</BeginStoryboard>
Inside the Storyboard, we use a DoubleAnimation: 
</> WPF
<DoubleAnimation
  Storyboard.TargetName="MyButton"
  Storyboard.TargetProperty="Opacity"
  From="0"
  To="1"
  Duration="0:0:2" />
The important properties are:
  1. TargetName — Specifies the element that should be animated.
  2. TargetProperty — Specifies the property that should change. Here, it is Opacity.
  3. From — Specifies the starting value. The animation starts at 0, making the button invisible.
  4. To — Specifies the final value. The button ends at 1, making it fully visible.
  5. Duration — Specifies how long the animation takes. 0:0:2 means two seconds.

As a result, the button changes smoothly from: 
</> Output
Opacity = 0  →  Opacity = 1
Invisible       Fully Visible

Move an Element Using WPF Storyboard

Another common use of a WPF Storyboard is to move an element from one position to another. WPF provides the TranslateTransform class for this purpose. By animating its X and Y properties, you can smoothly move an element horizontally, vertically, or in both directions.

Moving an Element Horizontally: The following example moves a button from left to right when the button is loaded: 
</> WPF
<Window x:Class="WpfStoryboardExample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Move Element"
Width="500"
Height="250">
  <Canvas>
      <Button x:Name="MoveButton"
      Content="Move Me"
      Width="100"
      Height="40"
      Canvas.Left="20"
      Canvas.Top="80">
          <Button.RenderTransform>
          		<TranslateTransform x:Name="MoveTransform"/>
          </Button.RenderTransform>
        <Button.Triggers>
        	<EventTrigger RoutedEvent="Button.Loaded">
                  <BeginStoryboard>
                        <Storyboard>
                         	 <DoubleAnimation
                          		Storyboard.TargetName="MoveTransform"
                          		Storyboard.TargetProperty="X"
                                From="0"
                                To="300"
                          	Duration="0:0:3" />
                        </Storyboard>
                      </BeginStoryboard>
                  </EventTrigger>
        </Button.Triggers>     
      </Button>
  </Canvas>
</Window>
Moving an Element Vertically-To move an element vertically, animate the Y property instead: 
</> WPF
<DoubleAnimation
    Storyboard.TargetName="MoveTransform"
    Storyboard.TargetProperty="Y"
    From="0"
    To="150"
    Duration="0:0:3" />
Moving an Element in Both Directions 
</> WPF
<Storyboard>
    <DoubleAnimation
        Storyboard.TargetName="MoveTransform"
        Storyboard.TargetProperty="X"
        From="0"
        To="300"
        Duration="0:0:3" />
        <DoubleAnimation
        Storyboard.TargetName="MoveTransform"
        Storyboard.TargetProperty="Y"
        From="0"
        To="150"
        Duration="0:0:3" />
</Storyboard>

Rotate an Element Using WPF Storyboard

WPF Storyboards can also be used to rotate UI elements such as buttons, images, panels, and other controls. To create a rotation animation, WPF provides the RotateTransform class. By animating its Angle property with a DoubleAnimation, you can smoothly rotate an element over a specified period.

Basic Rotation Example

The above example rotates a button from 0 degrees to 360 degrees when the button is loaded

</> WPF
<Window x:Class="WpfStoryboardExample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Rotate Element"
Width="500"
Height="300">
    <Grid>
        <Button x:Name="RotateButton"
        Content="Rotate Me"
        Width="120"
        Height="50">
            <Button.RenderTransform>
            <RotateTransform
            x:Name="RotateTransform"
            CenterX="60"
            CenterY="25" />
            </Button.RenderTransform>
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                              Storyboard.TargetName="RotateTransform"
                              Storyboard.TargetProperty="Angle"
                              From="0"
                              To="360"
                              Duration="0:0:2" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>
</Window>

Rotate Continuously-You can make the element rotate continuously by using RepeatBehavior="Forever": 
</> WPF
<DoubleAnimation
  Storyboard.TargetName="RotateTransform"
  Storyboard.TargetProperty="Angle"
  From="0"
  To="360"
  Duration="0:0:2"
  RepeatBehavior="Forever" />

Rotate Back and Forth- You can also make an element rotate between two angles using AutoReverse="True": 
</> WPF
<DoubleAnimation
  Storyboard.TargetName="RotateTransform"
  Storyboard.TargetProperty="Angle"
  From="0"
  To="360"
  Duration="0:0:2"
  AutoReverse="True"
  RepeatBehavior="Forever" />

Resize an Element Using WPF Storyboard

In WPF, you can use a Storyboard with a DoubleAnimation to resize an element smoothly over a specified duration. For example, you can increase the width and height of a Button when the user clicks it.

</> XAML
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Storyboard Resize Example"
Height="300" Width="400">
    <Grid>
        <Button Content="Resize Me"
            Width="100"
            Height="40"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Click="Button_Click">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                            Storyboard.TargetProperty="Width"
                            To="200"
                            Duration="0:0:1"/>
                            <DoubleAnimation
                            Storyboard.TargetProperty="Height"
                            To="80"
                            Duration="0:0:1"/>
                        </Storyboard>
                    </BeginStoryboard>
            </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>
</Window>
How does it work?
  1. Storyboard: Groups and coordinates one or more animations.
  2. DoubleAnimation: Animates a numeric property, such as Width or Height.
  3. Storyboard.TargetProperty: Specifies the property to animate.
  4. To="200": Sets the target width to 200.
  5. Duration="0:0:1": Makes the animation last one second.
  6. EventTrigger: Starts the storyboard when the button is clicked.

Change Colors of an Element Using WPF Storyboard

In WPF, you can use a Storyboard with a ColorAnimation to smoothly change the background color, border color, or foreground color of an element over a specified duration.

For example, let's change a button's background color from blue to green when the user moves the mouse over it.

</> XAML
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Color Animation Example"
Height="300" Width="400">
    <Grid>
        <Button Content="Hover Over Me"
        Width="150"
        Height="50"
        Background="DodgerBlue"
        Foreground="White"
        FontSize="16">
        <Button.Triggers>
            <EventTrigger RoutedEvent="MouseEnter">
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation
                        Storyboard.TargetProperty=
                        "Background.Color"
                        To="Green"
                        Duration="0:0:1"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>
        </Button>
    </Grid>
</Window>
How Does It Work?
  1. ColorAnimation: Animates a color property from its current value to a target color.
  2. Storyboard: Coordinates the animation.
  3. Storyboard.TargetName: Identifies the brush to animate.
  4. Storyboard.TargetProperty="Color": Specifies the brush's color property.
  5. To="Green": Defines the final color.
  6. Duration="0:0:1": Specifies a one-second animation.
  7. MouseEnter: Starts the animation when the mouse enters the button.

Controlling Storyboard from C# in WPF

In WPF, you can control a Storyboard from C# code instead of starting an animation only through XAML triggers. This allows you to start, stop, pause, resume, and restart animations based on user actions or application logic.

Let's understand this with a simple example. In this example, we will animate a button's width from 100 to 250 over two seconds.

</> XAML
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Storyboard Control"
Height="350" Width="500">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Button x:Name="btnAnimate"
        Content="Animate Me"
        Width="100"
        Height="50"
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <Button.Resources>
        <Storyboard x:Key="ResizeStoryboard">
        <DoubleAnimation
        Storyboard.TargetName="btnAnimate"
        Storyboard.TargetProperty="Width"
        From="100"
        To="250"
        Duration="0:0:2"/>
        </Storyboard>
        </Button.Resources>
        </Button>
        <StackPanel Grid.Row="1"
        Orientation="Horizontal"
        HorizontalAlignment="Center"
        Margin="10">
        <Button Content="Start"
        Click="Start_Click"
        Margin="5"/>
        <Button Content="Stop"
        Click="Stop_Click"
        Margin="5"/>
        <Button Content="Pause"
        Click="Pause_Click"
        Margin="5"/>
        <Button Content="Resume"
        Click="Resume_Click"
        Margin="5"/>
        </StackPanel>
    </Grid>
</Window>
Now, use the following C# code in MainWindow.xaml.cs. 
</> C#
using System.Windows;
using System.Windows.Media.Animation;
namespace WpfApp1
{
  public partial class MainWindow : Window
  {
    private Storyboard storyboard;
    public MainWindow()
    {
      InitializeComponent();
      storyboard = (Storyboard)btnAnimate
      .Resources["ResizeStoryboard"];
    }
    private void Start_Click(object sender, RoutedEventArgs e)
    {
      storyboard.Begin(btnAnimate, true);
    }
    private void Stop_Click(object sender, RoutedEventArgs e)
    {
      storyboard.Stop(btnAnimate);
    }
    private void Pause_Click(object sender, RoutedEventArgs e)
    {
      storyboard.Pause(btnAnimate);
    }
    private void Resume_Click(object sender, RoutedEventArgs e)
    {
      storyboard.Resume(btnAnimate);
    }
  }
}

Important: The true argument in Begin(btnAnimate, true) enables controllable storyboard behavior. It allows methods such as Pause(), Resume(), and Stop() to control the running animation.

Summary

WPF Storyboard makes it easy to create smooth and interactive animations in WPF applications. By combining animations such as fade-in, movement, rotation, resizing, and color changes, you can improve the user experience and make your application more engaging.

You can also control Storyboard animations from C# to start, stop, pause, and resume them based on application events. Understanding Storyboard helps you build modern and visually appealing WPF user interfaces.

Thanks

Tags

Kailash Chandra Behera

I am an IT professional with over 12 years of experience in the full software development life cycle for Windows, services, and web-based applications using Microsoft .NET technologies.

You may like these posts

Previous Post Next Post

نموذج الاتصال