Reuse existing Storyboard

Question

This one possible way to do this:

<Button.Triggers>         
  <EventTrigger RoutedEvent="Button.Click">    
    <BeginStoryboard>
      <Storyboard>
        <ColorAnimation 
          Storyboard.TargetName="myAnimatedBrush"
          Storyboard.TargetProperty="Color"
          From="Red" To="Blue" Duration="0:0:7" />
      </Storyboard>
    </BeginStoryboard>
  </EventTrigger>
</Button.Triggers>

But let's say I have:

      <Storyboard x:Name="name">
        <ColorAnimation 
          Storyboard.TargetName="myAnimatedBrush"
          Storyboard.TargetProperty="Color"
          From="Red" To="Blue" Duration="0:0:7" />
      </Storyboard>

and want to reuse it a few times.

<Button.Triggers>         
  <EventTrigger RoutedEvent="Button.Click">    
    <BeginStoryboard>
      //
      // <--->  what whould I put here??
      //
    </BeginStoryboard>
  </EventTrigger>
</Button.Triggers>

I'm only interested in a XAML, not c#.

Edit:

After I used suggestions from answers I got an error:

Attribute {StaticResource myStoryboard} value is out of range.

Related - http://stackoverflow.com/questions/4367332/how-can-i-share-a-visualstatemanager-between-two-or-more-xaml-files — ChrisF, Nov 08 '11 at 20:13
Is this really Silverlight? Silverlight only supports EventTrigger for the `Loaded` event. — AnthonyWJones, Nov 08 '11 at 21:09

score 2 · Accepted Answer · answered Nov 08 '11 at 19:01

Make it a resource and use StaticResource to call it.

[considering all resources are defined in App.xaml]

<Application.Resources>
    <Storyboard x:Key="MyStoryboard">
        ....
    </Storyboard>
</Application.Resources>

Then, at the instance of the button

<Button.Triggers>         
    <EventTrigger RoutedEvent="Button.Click">    
        <BeginStoryboard Storyboard="{StaticResource MyStoryboard}"
                         x:Name="MyStoryboard_Begin"/>
    </EventTrigger>
<Button.Triggers>

NOTE: the x:Name is not necessary, but is useful if you want to make sure this storyboard is stopped before running another storyboard: in another trigger use StopStoryboard.

score 0 · Answer 2 · answered Nov 08 '11 at 19:03

You would use a StaticResource stored in a ResourceDictionary.

A ResourceDictionary can either be in a dedicated file, or defined within the concerning container; for instance, you can use a global, dedicated resources file to load use and throughout the application (an example of this is loading Themes in WPF), or locally, providing "private" resources exposed (though likely still accessible with fully qualified paths, or some kind of voodoo, I'm unsure) to the concerning control, say.

So, to define it...

<UserControl.Resources>
  <Storyboard x:Key="myStoryboard">
    <ColorAnimation 
      Storyboard.TargetName="myAnimatedBrush"
      Storyboard.TargetProperty="Color"
      From="Red" To="Blue" Duration="0:0:7" />
  </Storyboard>
</UserControl.Resources>

And to utilise it...

<... Storyboard="{StaticResource myStoryboard}" />

Reuse existing Storyboard

2 Answers2