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

I'm starting to kick Silverlight around (although it currently feels the other way around) by rewritting an existing ASP.NET application - as good a place to start as any I thought.

我开始通过重写现有的ASP.NET应用程序来启动Silverlight(虽然它目前感觉相反) - 这是一个好的开始,就像我想的那样。

I have 'mastered' pulling data from a database, through a service and into a datagrid and also populating image elements in the rows. So far so good.

我已“掌握”从数据库,通过服务和数据网格中提取数据,并在行中填充图像元素。到现在为止还挺好。

Now i'm stuck and have a headache!

现在我卡住了,头疼了!

I want to add a simple animation (a green rectangle moving over a red rectangle to display a % progress) to the last column of each row, but can't get it wired up.

我想在每行的最后一列添加一个简单的动画(绿色矩形在红色矩形上移动以显示%进度),但无法将其连线。

My xaml looks like this:

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

which is quite obviously wrong (because it doesn't work) and I am starting to think that it just is not possible to add animation to a Datagrid in this way. I've Googled hard looking for a piece of code and while there have been some tantilising results they have not amounted to anything.

这显然是错误的(因为它不起作用),我开始认为这是不可能以这种方式向Datagrid添加动画。我一直在努力寻找一段代码,虽然已经取得了一些成果,但它们并没有达到任何目的。

Am I trying to do something that Silverlight simply does not support or am I missing something really straightforward?

我试图做一些Silverlight根本不支持的事情,或者我错过了一些非常简单的事情?

Thanks in advance.

提前致谢。

Update: Although I'm not out of the woods yet I have managed to get the animation running with the appropriate column. The answer provided by MasterMax led me to look at EventTriggers and the revised xaml looks like this:

更新:虽然我还没有走出困境但我已经设法使用适当的列运行动画。 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>

All I need to do now is bind in the % value in the 'To' property and add my underlying Red rectangle. No doubt this will not prove as easy as I'm currently hoping but then it wouldn't be fun otherwise would it ;-)

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

3 个解决方案

#1

Try attaching it to the EventTrigger for the Datagrid. Something similar to this:

尝试将其附加到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>

In your case you'd be looking for the DataGrid.Loaded event (or something similar). This works for me, and I'm fading the whole window in on page loaded.

在您的情况下,您将寻找DataGrid.Loaded事件(或类似的东西)。这对我有用,而且我在页面加载时淡化了整个窗口。

#2

It looks to me like you aren't actually playing the storyboard. You need to add mouse enter and mouse leave handlers for your rectangle and then play and stop your storyboard accordingly. Make sure to both stop and then play the storyboard in the enter command (otherwise you get some interesting side-effects).

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

Update

Okay, having spent my day neck deep in Silverlight, I'm not much closer to helping. I was looking at the generic.xaml file inside the Silverlight assembly containing the DataGrid. You might consider taking a look in there. From what I can see, they achieve some of this for the row details transition with control templating though I haven't looked at the corresponding code yet to determine exactly how.

好吧,在Silverlight中度过了我的一天,我不太接近帮助。我在查看包含DataGrid的Silverlight程序集中的generic.xaml文件。你可以考虑看看那里。从我所看到的,他们实现了一些用于控制模板的行细节转换,尽管我还没有查看相应的代码以确定具体如何。

#3

for that type of application, an animation may not be the best solution. you may want to try binding the width property of the moving rectangle to a variable in your application, or adjust the width with each tick as the progress changes.

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