Silverlight 应用程序的 DataGrid 中的动画 - 如何？

Question

我开始通过重写现有的 ASP.NET 应用程序来改进 Silverlight（尽管目前感觉相反）——这是一个不错的起点。

我已经“掌握”了从数据库中提取数据、通过服务进入数据网格以及在行中填充图像元素。到目前为止一切顺利。

现在我被卡住了，头疼！

我想在每一行的最后一列添加一个简单的动画（一个绿色矩形在红色矩形上移动以显示进度百分比），但无法将其连接起来。

我的 xaml 看起来像这样：

<data:DataGrid.Columns>
.
.
.
.
<data:DataGridTemplateColumn>
    <data:DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <StackPanel x:Name="AnimationPanel">
                <StackPanel.Resources>
                    <Storyboard x:Key="ShowProgress">
                        <DoubleAnimation Storyboard.TargetProperty="Width"
                                        Storyboard.TargetName="goalProgressBar_Complete"
                                         From="0" To="50"
                                        Duration="0:0:5">
                        </DoubleAnimation>
                    </Storyboard>
                </StackPanel.Resources>
                <Rectangle x:Name="goalProgressBar_Complete"
                           Width="1" Height="100"
                           Fill="#0aa60e"></Rectangle>
            </StackPanel>
        </DataTemplate>
    </data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
</data:DataGrid.Columns>

这显然是错误的（因为它不起作用），我开始认为不可能以这种方式将动画添加到 Datagrid。我在 Google 上苦苦寻找一段代码，虽然有一些令人兴奋的结果，但它们并没有起到任何作用。

我是在尝试做一些 Silverlight 根本不支持的事情，还是我错过了一些非常简单的事情？

提前致谢。

更新： 虽然我还没有走出困境，但我已经设法让动画与适当的列一起运行。 MasterMax提供的答案让我看了一下EventTriggers，修改后的xaml看起来是这样的：

<data:DataGridTemplateColumn>
    <data:DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <Rectangle x:Name="GoalProgress" Height="100" Width="1" Fill="Green">
                <Rectangle.Triggers>
                    <EventTrigger RoutedEvent="Rectangle.Loaded">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="Width"
                                             Storyboard.TargetName="GoalProgress"
                                             From="0" To="50" Duration="0:0:5">
                                    </DoubleAnimation>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </Rectangle.Triggers>
            </Rectangle>
        </DataTemplate>
    </data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>

我现在需要做的就是绑定 'To' 属性中的 % 值并添加我的底层红色矩形。毫无疑问，这不会像我目前希望的那样容易，但否则它不会很有趣;-)

Answer 1

尝试将它附加到 Datagrid 的 EventTrigger。类似的东西：

<Window.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Name="EntranceAnimation"
                        Storyboard.TargetName="MainWindow" 
                        Storyboard.TargetProperty="Opacity"
                        From="0.0"
                        To="1.0"
                        Duration="0:0:3">
                    </DoubleAnimation>
                </Storyboard>
                </BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>

在您的情况下，您将寻找 DataGrid.Loaded 事件（或类似事件）。这对我有用，我在加载的页面上淡入整个窗口。

Answer 2

在我看来，您实际上并没有在玩故事板。您需要为矩形添加鼠标进入和鼠标离开处理程序，然后相应地播放和停止情节提要。确保在 enter 命令中停止并播放情节提要（否则会产生一些有趣的副作用）。

更新

好的，我已经在 Silverlight 中度过了我的一天，我离帮助也不近了。我正在查看包含 DataGrid 的 Silverlight 程序集内的 generic.xaml 文件。你可以考虑进去看看。据我所见，尽管我还没有查看相应的代码来确定具体是如何实现的，但他们通过控制模板实现了行细节转换的一些功能。

Answer 3

对于这种类型的应用程序，动画可能不是最佳解决方案。您可能想尝试将移动矩形的宽度属性绑定到应用程序中的变量，或者随着进度的变化调整每个刻度的宽度。