Storyboards
A Storyboard is a container Timeline that groups one or more child animations (DoubleAnimation, ColorAnimation, and so on) and coordinates when each one starts relative to the Storyboard's own timeline, letting you choreograph a complex sequence — like a card flipping while fading and growing simultaneously — as a single unit. Each child animation is targeted at a specific element and property using the attached properties Storyboard.TargetName (or Storyboard.Target for code-set targets) and Storyboard.TargetProperty, with the latter using a PropertyPath syntax such as "(UIElement.RenderTransform).(ScaleTransform.ScaleX)" to reach into nested transform objects.
Cricket analogy: This is like a match director's run sheet that coordinates the toss ceremony, national anthem, and pitch inspection to start at precise offsets from the actual start time, similar to how a Storyboard coordinates each child animation's start relative to its own timeline.
Triggering a Storyboard
The most common declarative trigger is an EventTrigger wrapping a BeginStoryboard, commonly attached to a control's Loaded event or a Button's Click event, which starts the Storyboard automatically when that routed event fires. From code-behind, a named Storyboard resource can be started imperatively with storyboard.Begin(this) after retrieving it via FindResource or TryFindResource, and this same code path supports Pause(), Resume(), Stop(), and Seek() for full playback control — useful for scenarios like a pausable progress indicator. Style- and ControlTemplate-based Triggers, and the newer VisualStateManager pattern used heavily in custom controls, are the two other major places Storyboards are declared and fired.
Cricket analogy: This is like a stadium's automated LED celebration sequence that fires the instant the umpire signals a six, the way an EventTrigger fires a BeginStoryboard automatically when a routed event like Click occurs.
<Border x:Name="NotificationCard" Opacity="0" Background="#FF2D2D30"
RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<ScaleTransform ScaleX="0.8" ScaleY="0.8" />
</Border.RenderTransform>
<Border.Triggers>
<EventTrigger RoutedEvent="Border.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="NotificationCard"
Storyboard.TargetProperty="Opacity"
From="0" To="1" Duration="0:0:0.3" />
<DoubleAnimation Storyboard.TargetName="NotificationCard"
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
From="0.8" To="1" Duration="0:0:0.3">
<DoubleAnimation.EasingFunction>
<BackEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
</Border>Sequencing with BeginTime and SlipBehavior
Each child Timeline inside a Storyboard can specify its own BeginTime as a TimeSpan offset, which lets you sequence effects — for example a fade-in that finishes before a slide-in begins two-tenths of a second later — purely declaratively without code-behind delays or nested storyboards. When a Storyboard targets multiple elements, RepeatBehavior can be set per-child ("Forever" for a looping pulse, or a fixed count) or on the Storyboard as a whole, and AutoReverse causes the animation to play backward to its starting value after reaching its target, commonly combined with RepeatBehavior="Forever" to build a breathing or pulsing highlight effect.
Cricket analogy: This is like a scheduled TV broadcast that cuts to the pitch report exactly ninety seconds after the toss segment ends, purely by a preset offset rather than a producer manually cueing it, similar to BeginTime sequencing a child animation declaratively.
AutoReverse combined with RepeatBehavior="Forever" is the standard recipe for a 'breathing' or pulsing highlight — for example, gently animating a Button's Opacity between 1.0 and 0.6 to draw attention to a call-to-action without any code-behind loop.
Storyboards started via Style Triggers or ControlTemplate Triggers target the templated element's own properties by default, and referencing a name from outside the template's scope will throw at runtime because Storyboard.TargetName resolution is scoped to the current NameScope. When animating across template boundaries, use TemplateBinding or route the animation through a VisualStateManager state instead.
- A Storyboard groups multiple child Timelines and coordinates their relative start times as one choreographed sequence.
- Storyboard.TargetName and Storyboard.TargetProperty (with PropertyPath syntax) direct each child animation to a specific element and property.
- EventTrigger with BeginStoryboard is the most common declarative way to fire a Storyboard, often on Loaded or Click.
- Code-behind can Begin, Pause, Resume, Stop, and Seek a Storyboard for full imperative playback control.
- BeginTime lets each child Timeline start at a declarative offset, sequencing effects without code-behind delays.
- AutoReverse plus RepeatBehavior="Forever" is the standard pattern for pulsing or breathing highlight effects.
- Storyboard.TargetName resolution is scoped to the current NameScope, which matters inside ControlTemplates and Styles.
Practice what you learned
1. What is the primary purpose of a Storyboard in WPF?
2. Which attached properties direct a child animation inside a Storyboard to a specific element and property?
3. Which pattern is the idiomatic way to create a looping 'breathing' pulse animation on a Button's Opacity?
4. What does setting BeginTime on a child Timeline inside a Storyboard achieve?
5. Why might referencing Storyboard.TargetName from outside a ControlTemplate throw a runtime error?
Was this page helpful?
You May Also Like
Animations in WPF
Understand WPF's animation system — timelines, easing functions, and how From/To/By animations drive property changes over time.
Custom Controls and User Controls
Compare WPF's two approaches to building reusable controls — lightweight, composition-based UserControl versus fully templatable, lookless custom Control.
Shapes and Brushes
Learn how WPF's Shape classes (Rectangle, Ellipse, Path, Polygon) draw vector graphics and how Brush types paint their interiors and outlines.
Related Reading
Related Study Notes in Microsoft Technologies
Browse all study notesWindows 10 / UWP Development Study Notes
.NET · 30 topics
Microsoft TechnologiesWindows Batch Scripting Study Notes
Batch · 30 topics
Microsoft TechnologiesMFC (Microsoft Foundation Classes) Study Notes
C++ · 30 topics
Microsoft TechnologiesSilverlight Study Notes
.NET · 30 topics
Microsoft TechnologiesXAML Study Notes
.NET · 30 topics
Microsoft TechnologiesMVVM Design Pattern Study Notes
.NET · 30 topics