Snap Silverlight Animation to Click Button

Question

I am trying to start an animation with the click of a button. The following code seems reasonable, but causes a runtime error. Ideally, I would just like to indicate the storyboard to the team. Is this possible (I Googled and did not find anything to indicate that this is so)

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

Here is 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>

A runtime error says:

Microsoft JScript: Silverlight 2531 . [: 97 : 55] System.Windows.Application.LoadComponent( , Uri resourceLocator)   SilverlightApplication8.MainPage.InitializeComponent()   SilverlightApplication8.MainPage..ctor()   SilverlightApplication8.App.Application_Startup ( , StartupEventArgs e)   MS.Internal.CoreInvokeHandler.InvokeEventHandler(Int32 typeIndex, Delegate, , )   MS.Internal.JoltHelper.FireEvent(IntPtr unmanagedObj, IntPtr unmanagedObjArgs, Int32 argsTypeIndex, Int32 actualArgsTypeIndex, String eventName)

97:

<EventTrigger RoutedEvent="Button.Click">

Answer 1

, , Blend SDK. ControlStoryboardAction:

    <Button Width="50" Height="24" Content="X">
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="Click">
                <ei:ControlStoryboardAction Storyboard="{StaticResource ShowTemplateSelector}"/>
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </Button>

ei :

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

Answer 2

. StaticResource, 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>

Answer 3

Change it ...

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

to that...

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