将Silverlight动画绑定到按钮单击事件

Question

我想在点击按钮时启动动画。以下代码看起来合理，但会引发运行时错误。理想情况下，我希望只需将Storyboard指向一个命令即可。这可能吗（我已经搜索了一下，没有找到任何迹象表明可以这样做）？

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

这是一个故事板：

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

运行时错误提示如下：

Microsoft JScript运行时错误：Silverlight应用程序中的未处理错误2531。[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)

第97行是这样的：

<EventTrigger RoutedEvent="Button.Click">

- Adam Rackis

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>

其中i和ei定义如下：

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

- Mike Post

Answer 2

你需要将故事板移动到触发器中。如果尝试将其作为静态资源引用，则无法解析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>

- Stephan

---

谢谢。有没有任何方法可以让按钮引用资源部分中的故事板？我的意思是，除了在单击处理程序中使用ShowTemplateSelector.Begin();之外。 - Adam Rackis

此外，这是Silverlight的限制吗？还是WPF也会出现同样的错误？ - Adam Rackis

我的解释措辞有点不好。问题不在于找到故事板，StaticResource标记扩展会很好地找到故事板。问题是Storyboard.TargetName="canvasStyleSelected"无法解析名称canvasStyleSelected，因为它不在范围内。WPF中的DynamicResource可以工作，因为它将从执行范围查找名称，但不幸的是，该扩展在SL中不存在。这是我发现的唯一实现你所描述的方式。 - Stephan

使用这种方法给我抛出了一个“无法分配给属性'system.windows.eventtrigger.routedevent'”的错误。 - Anto

Answer 3

更改这个...

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

变成这样...

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

- Aaron McIver

---

相信我说的，我真希望这是解决方案。我真的希望微软在Silverlight 4中能够添加这个功能。 - Stephan

似乎还有很多东西没有被添加到SL 4中...“它在SL中不起作用”似乎是一个常见的主题 :( - Adam Rackis

@Adam在SL 2中编写了一个LOB应用程序...相信我，与之相比，SL 4看起来非常棒... - Aaron McIver

我一直被使用SL编写LOB的想法所吸引。为什么不使用带有ClickOnce的WPF呢？当然，CO并不是世界上最好的东西，但它肯定比SL更可取... - Adam Rackis

我们的原因是希望在不同的操作系统上运行它，并且它很轻巧，可以在浏览器中运行，这对于大型企业来说非常好，因为他们可以控制机器上允许安装的软件等。我必须说，从SL 4开始，LOB应用程序不会成为问题。问题出现在你知道你可以在WPF中做X、Y、Z，但在SL中却不能。 - Aaron McIver