100% Free Forever
AI-Powered Learning
Industry Expert Content
Certificates & Badges
Learn At Your Own Pace
.NET

Storyboards

Learn how WPF Storyboards group and orchestrate multiple Timelines, target elements and properties, and trigger animations from XAML or code.

Graphics and AnimationIntermediate8 min readJul 10, 2026
Analogies

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.

xml
<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

Was this page helpful?

Topics covered

#NET#WPFWindowsPresentationFoundationStudyNotes#MicrosoftTechnologies#Storyboards#Triggering#Storyboard#Sequencing#BeginTime#StudyNotes#SkillVeris