Bind Silverlight Animation to Button Click

Question

I'm trying to kick off an animation at the click of a button. The following code looks reasonable, but is throwing a runtime error. Ideally I'd like to just point the storyboard to a command. Is that possible (I Googled and found nothing to indicate that it is)

                <Button Width="50" Height="24" Content="X">
                    <Button.Triggers>
                        <EventTrigger RoutedEvent="Button.Click">
                            <BeginStoryboard Storyboard="{StaticResource ShowTemplateSelector}">
                            </BeginStoryboard>
                        </EventTrigger>
                    </Button.Triggers>
                </Button>

Here's the storyboard:

<UserControl.Resources>
    <Storyboard x:Name="ShowTemplateSelector">
        <DoubleAnimation Storyboard.TargetName="canvasStyleSelected" Storyboard.TargetProperty="Width" From="0" To="332" Duration="0:0:0.4" />
        <DoubleAnimation Storyboard.TargetName="canvasStyleSelected" Storyboard.TargetProperty="Height" From="0" To="100" Duration="0:0:0.4" />
    </Storyboard>

The runtime error says:

Microsoft JScript runtime error: Unhandled Error in Silverlight Application 2531 An error has occurred. [Line: 97 Position: 55] at System.Windows.Application.LoadComponent(Object component, Uri resourceLocator) at SilverlightApplication8.MainPage.InitializeComponent() at SilverlightApplication8.MainPage..ctor() at SilverlightApplication8.App.Application_Startup(Object sender, StartupEventArgs e) at MS.Internal.CoreInvokeHandler.InvokeEventHandler(Int32 typeIndex, Delegate handlerDelegate, Object sender, Object args) at MS.Internal.JoltHelper.FireEvent(IntPtr unmanagedObj, IntPtr unmanagedObjArgs, Int32 argsTypeIndex, Int32 actualArgsTypeIndex, String eventName)

Line 97 is this:

<EventTrigger RoutedEvent="Button.Click">

Answer 1

Change this...

<BeginStoryboard Storyboard="{StaticResource ShowTemplateSelector}">
</BeginStoryboard>

to this...

<BeginStoryboard Storyboard="{DynamicResource ShowTemplateSelector}">
</BeginStoryboard>

Answer 2

You need to move your storyboard into the trigger. If you try to reference it as a StaticResource it is unable to resolve the names in the naming scope of the ResourceDictionary

<EventTrigger RoutedEvent="Button.Click">
  <BeginStoryboard>
    <BeginStoryboard.Storyboard>
      <Storyboard x:Name="ShowTemplateSelector">
        <DoubleAnimation Storyboard.TargetName="canvasStyleSelected" Storyboard.TargetProperty="Width" From="0" To="332" Duration="0:0:0.4" />
        <DoubleAnimation Storyboard.TargetName="canvasStyleSelected" Storyboard.TargetProperty="Height" From="0" To="100" Duration="0:0:0.4" />
      </Storyboard>
  </BeginStoryboard.Storyboard>
</BeginStoryboard>